I've read this post on how to add inline math mode to ghost :
http://ghost-rkingsbury.rhcloud.com/how-to-add-mathjax-to-a-ghost-blog/
I've added to Settings -> Code Injection :
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true}
});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
but receive error :
jquery.fitvids.js:16 Uncaught TypeError: Cannot read property 'fn' of undefined
at jquery.fitvids.js:16
at jquery.fitvids.js:67
index.js:56 Uncaught ReferenceError: jQuery is not defined
at index.js:56
localhost/:3 Uncaught SyntaxError: Invalid or unexpected token
at eval (<anonymous>)
at EVAL (MathJax.js:19)
at Function.execute (MathJax.js:19)
at cb (MathJax.js:19)
at Object.Process (MathJax.js:19)
at Object.Push (MathJax.js:19)
at Object.ConfigBlocks (MathJax.js:19)
at Function.execute (MathJax.js:19)
at cb (MathJax.js:19)
at Object.Process (MathJax.js:19)
Removing :
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true}
});
</script>
allows MathJax to be rendered but $...$ is not recognized as an inline math statement
Adding jQuery library to Code Injection :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true}
});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
results in error :
VM411:3 Uncaught SyntaxError: Invalid or unexpected token
at eval (<anonymous>)
at EVAL (MathJax.js?config=TeX-MML-AM_CHTML:19)
at Function.execute (MathJax.js?config=TeX-MML-AM_CHTML:19)
at cb (MathJax.js?config=TeX-MML-AM_CHTML:19)
at Object.Process (MathJax.js?config=TeX-MML-AM_CHTML:19)
at Object.Push (MathJax.js?config=TeX-MML-AM_CHTML:19)
at Object.ConfigBlocks (MathJax.js?config=TeX-MML-AM_CHTML:19)
at Function.execute (MathJax.js?config=TeX-MML-AM_CHTML:19)
at cb (MathJax.js?config=TeX-MML-AM_CHTML:19)
at Object.Process (MathJax.js?config=TeX-MML-AM_CHTML:19)
EVAL # MathJax.js?config=TeX-MML-AM_CHTML:19
execute # MathJax.js?config=TeX-MML-AM_CHTML:19
cb # MathJax.js?config=TeX-MML-AM_CHTML:19
Process # MathJax.js?config=TeX-MML-AM_CHTML:19
Push # MathJax.js?config=TeX-MML-AM_CHTML:19
ConfigBlocks # MathJax.js?config=TeX-MML-AM_CHTML:19
execute # MathJax.js?config=TeX-MML-AM_CHTML:19
cb # MathJax.js?config=TeX-MML-AM_CHTML:19
Process # MathJax.js?config=TeX-MML-AM_CHTML:19
call # MathJax.js?config=TeX-MML-AM_CHTML:19
WAITEXECUTE # MathJax.js?config=TeX-MML-AM_CHTML:19
cb # MathJax.js?config=TeX-MML-AM_CHTML:19
Execute # MathJax.js?config=TeX-MML-AM_CHTML:19
loadComplete # MathJax.js?config=TeX-MML-AM_CHTML:19
(anonymous) # TeX-MML-AM_CHTML.js?V=2.7.0:68
Am I missing a step trying to embed inline functionality in Ghost ?
I am using Ghost for my blog.
MathJax.Hub.Config and script source need to be in one script block for async to work correctly, else MathJax.Hub.Config will be defined before MathJax.js is available and generate an error.
Use double quote(") in code injection. This may due to Ghost template parsing. If single quote (') is used, the line is chopped off right after the first quote.
Ghost demo page: https://johnsiu.com/mathjax-test/
Demo page raw data:
Inline : $ y = \int_0^1 {1\over x} dx $
Standalone: $$ y = \int_0^1 {1\over x} dx $$
<script type="text/javascript" async src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [["$", "$"], ["\\(", "\\)"]],
processEscapes: true
}
});
</script>
If you use mathjax extensively in your side, move the script block into Ghost Setting->Code Injection header or footer.
Tested with FF and Chrome browser.
Related
I am trying to enable siunitx for a (hosted) talkyard side and by adding the following to the html header:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js","[siunitx]/siunitx.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
TeX: {extensions: ["AMSmath.js","AMSsymbols.js", "sinuitx.js"]}
});
MathJax.Ajax.config.path['siunitx'] = 'http://rawgit.com/burnpanck/MathJax-siunitx/master/';
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<script>
talkyard.postElemPostProcessor = function(elem) {
console.log('Telling MathJax to post process elem: ' + elem);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, elem]);
};
</script>
However rawgit seems to be down now and I didn't find another server for it. So how can I enable the siunitx extension on a hostet talkyard site?
I'm trying to replicate this jsfiddle and add a toggle on/off button to my popup in my chrome extension.
popup.html
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<button id="toggle">OFF</button>
</body>
</html>
popup.js
console.log("popup.js running..")
var button = document.getElementById('toggle');
var isToggled = false;
button.onclick = function(e){
isToggled = !isToggled;
// Your code here
button.innerText = isToggled ? 'ON' : 'OFF';
};
My error:
Uncaught TypeError: Cannot set property 'onclick' of null
why do I get this error on the bottun.onclick? How can I fix this?
When I try to compile the following server-side code with
vue 2.5.13
node 9.9.0
I get an "unexpected token" error. I don't know why that is. I am simply trying to do an extrapolation. Unfortunately I can not codepen, because this is server side code. But the example is bare bones, so it should be possible to reproduce.
Here's the code:
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();
let template = `<!DOCTYPE HTML>
<html lang="de" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="utf-8"/>
{{{meta}}}
<title>{{{title}}}</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>`;
let app = new Vue({
data: {
meta: '<meta/>',
title: 'title'
},
template: template
});
renderer.renderToString(app, (err, html) => {
if (err) {
console.error(err);
}
console.log(html);
});
This is the error I get:
<!DOCTYPE HTML>
<html lang="de" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="utf-8"/>
{{{meta}}}
<title>{{{title}}}</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
- invalid expression: Unexpected token ) in
"\n "+_s({meta)+"}\n "
Raw expression: {{{meta}}}
- invalid expression: Unexpected token ) in
_s({title)+"}"
Raw expression: {{{title}}}
(found in <Root>)
at onCompilationError (/path/node_modules/vue-server-renderer/build.js:7378:9)
at compileToFunctions (/path/node_modules/vue-server-renderer/build.js:5536:9)
at normalizeRender (/path/node_modules/vue-server-renderer/build.js:7388:22)
at render (/path/node_modules/vue-server-renderer/build.js:7752:5)
at Object.renderToString (/path/node_modules/vue-server-renderer/build.js:8232:9)
at Object.<anonymous> (/path/playground/vue-render.js:24:10)
at Module._compile (module.js:649:30)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
Looking at the section on Template Interpolation in SSR guide. I think {{{title}}} in your code ought to be {{title}} (two instead of three curly brackets) since its just a string and not HTML.
The forward slash in <meta/> probably needs to be escaped.
I've been following the "let's make a map" tutorial https://bost.ocks.org/mike/map/, however in the middle of the tutorial, drawing the paths failed with errors about topojson.feature() is not a function.
script.js:14 Uncaught TypeError: topojson.feature is not a function(…)
(anonymous function) # script.js:14
(anonymous function) # d3.min.js:6
call # d3.min.js:6
e # d3.min.js:6
script.js:
var width = 960,
height = 1160;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("js/uk.json", function(error, uk) {
if (error) return console.error(error);
console.log(uk);
svg.append("path")
.datum(topojson.feature(uk, uk.objects.subunits))
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
});
HTML included scripts:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Map test</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src='js/jquery.js'></script>
<script src='js/d3.min.js' charset="utf-8"></script>
<script src='js/topojson.js'></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
Originally I've suspected the issue to be with the topojson file I've converted Pathfile-GeoJSON-TopoJSON, I've names it uk.js for testing purposes while following the tutorial.
Another hint as mentioned in the reply here:
https://github.com/topojson/topojson/issues/236
However after changing the issue remained the same, and confirmed after substituting uk.json I've creted myself with:
https://bost.ocks.org/mike/map/uk.json
You are missing the topojson client files, which have been split off from the base topojson code in v2. If you include the following script in your code, it should work:
<script src="https://unpkg.com/topojson-client#2"></script>
i am using backbonejs with node js trying to pass variable from backbone view to template(html file). function for rendering view template is like this :
render: function(event){
var compiled_template = _.template( $("#results-template").html() );
console.log(myPhoto.toJSON());
$(this.el).html(compiled_template(myPhoto.toJSON()));
return this;
}
myPhoto having a value :
{
src: 'placeholder.jpg',
title: 'an image placeholder',
coordinates: [0,0],
tags: ['untagged'],
location: 'home'
}
and in html file :
<script id="results-template" type="text/template">
<h2><%= title %></h2>
<p>testing....</p>
</script>
when i am execute it gives an error like
ReferenceError: c:\trello\testApp/views/test.html:19
17| <script id="results-template" type="text/template">
18|
>> 19| <h2><%= title %></h2>
20| <p>testing....</p>
21| </script>
22|
title is not defined
at Object.<anonymous> (eval at <anonymous> (c:\trello\node_modules\ejs\lib\ejs.js:203:1))
at Object.<anonymous> (c:\trello\node_modules\ejs\lib\ejs.js:201:15)
at ServerResponse._render (c:\trello\node_modules\express\lib\view.js:425:21)
at ServerResponse.render (c:\trello\node_modules\express\lib\view.js:318:17)
at c:\trello\testApp\test.js:23:16
at callbacks (c:\trello\node_modules\express\lib\router\index.js:272:11)
at param (c:\trello\node_modules\express\lib\router\index.js:246:11)
at pass (c:\trello\node_modules\express\lib\router\index.js:253:5)
at Router._dispatch (c:\trello\node_modules\express\lib\router\index.js:280:4)
at Object.handle (c:\trello\node_modules\express\lib\router\index.js:45:10)
how to solve this???
Are you sure all your photos have a title? Empty properties can cause this error. You can fix this by adding default values (empty strings for example) in your backbone Model class.