Ghost mathjax inlining not working

Question

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 ?

@PeterKrautzberger I don't have live example as I'm just running Ghost locally. — blue-sky, Feb 17 '17 at 20:56
It's hard to say much without being able to reproduce the issue. — Peter Krautzberger, Feb 17 '17 at 21:54
Note from the future: cdn.mathjax.org is nearing its end-of-life, cf. https://www.mathjax.org/cdn-shutting-down/. — Peter Krautzberger, Apr 11 '17 at 15:22

John Siu · Answer 1 · 2017-04-23T05:44:39.983

5

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.

edited Apr 23 '17 at 05:44

answered Mar 13 '17 at 04:48

John Siu

5,056
2
26
47

1

Note from the future: cdn.mathjax.org is nearing its end-of-life, cf. https://www.mathjax.org/cdn-shutting-down/. – Peter Krautzberger Apr 11 '17 at 15:22
1

@PeterKrautzberger Thanks for the info! I updated the answer to use cdnjs opensource cdn. – John Siu Apr 23 '17 at 05:46
Thank you for your answer. It helped me in using inline MathJax on my blog - blog.vcillusion.co.in – vCillusion Jun 02 '18 at 09:21

Ghost mathjax inlining not working

1 Answers1