I'd like to add MathJax to Tumblr site, although I'm a bit confused as to where to begin.
MathJax doesn't offer documentation for Tumblr, just sites like WordPress and some others.
Add a comment
|
4 Answers
MathJax is now available through a CDN, so you don't have to install it on a server any more. All you need to do is include a few lines in your html header and you can start using mathematics in your posts.
To do this, go to Theme -> Use custom HTML, and insert the following just above the </head> marker:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"></script>
Save changes, and you're ready to include mathematics on your Tumblr pages. Try, for example
\[ \exp(x) = \sum_{n=1}^{\infty} \frac{x^n}{n!} \]
Good luck, hope this helps.
-
Is it sufficient to just copy and paste that first line? Or are we supposed to replace cdn.mathjax.org/mathjax/latest/… with something else? I attempted to do this on tumblr, and the text post only displayed the raw TeX code.– yunoneCommented Apr 16, 2011 at 10:59
Looking through the MathJax install notes it appears all you need to do is link to the JavaScript file.
For Tumblr, this means you will need to customize your HTML Theme.
From what I can gather you will need to add this line just before the </head> tag.
<script type="text/javascript" src="path-to-MathJax/MathJax.js"></script>
Where path-to-MathJax is to where ever on your server you have uploaded the JS file.
e.g.
<html>
<head>
<title>My Tumblr site</title>
<script type="text/javascript" src="path-to-MathJax/MathJax.js"></script>
</head>
<body>
...
</body>
</html>
answered Feb 2, 2011 at 8:27
-
Thanks for the response - The issue I think, I that I'm hosting through tumblr - I just pointed by domain there. I think I may trying just customizing the HTML with the whole Mathjax source, then try.– tshauckCommented Feb 2, 2011 at 20:34
In addition to Barry's answer, you need to add some additional data to let Tumblr know what to do with the '$' and '$$' that you typically use with MathJax. Try adding these lines after what's posted above.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [[ '$','$']],
displayMath: [['$$','$$']],
processEscapes: true
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
[props to http://blog.angjookanazawa.com/post/15081007922/how-to-write-in-latex-use-mathjax-in-tumblr] for providing these.
Recently, I have enabled the latest MathJax (version 3) on my Tumblr site[1] in the following way:
We need to go to the HTML editor of the Tumblr theme template (Edit appearance → Edit Theme → Edit HTML) and insert the below MathJax JS script inside the Header tag (somewhere between <head> and </head>):
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
window.MathJax = {
tex: {
inlineMath: [ ['$','$'],['\\(','\\)'] ],
displayMath: [ ['$$','$$'], ['\\[','\\]'] ],
processEscapes: true,
processEnvironments: true,
processRefs: true
},
options: {
ignoreHtmlClass: 'tex2jax_ignore|editor-rich-text'
}
};
</script>
The same script[2] can be applied on WordPress or Blogger[3] themes.
Also, there exists a MathJax Configuration Converter[4]. This tool can convert a MathJax version 2 configuration to a corresponding MathJax version 3 configuration. So, it can be very useful if anyone wants to do the update automatically.
[1] https://rafisics.tumblr.com/post/648704355473752064/mathjax
[2] https://gist.github.com/rafisics/1babbb8c3ac1d43f595414ec2aa7681a
[3] https://webapps.stackexchange.com/a/153527/196564
[3] https://mathjax.github.io/MathJax-demos-web/convert-configuration/convert-configuration.html
