17

I want to add MathJax on my blog hosted on Blogger. The only solution I found is this post, but it requires a hosting server. Any other option?

Improve this question
0

5 Answers 5

Reset to default
7

The MathJax people recently started allowing the script to be called from their server.

I added a new post to my blog including the code you have to paste in your template html to get MathJax functionality in Blogger. With the new code you don't need to have MathJax installed in your own server.

Hope it helps.

Improve this answer
7

Basically you just need to copy the following code snippet to Blogger template between <head> and </head>.

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js" />

For a detailed instruction or other options e.g. changing inline math delimiters, please follow this post.

Improve this answer
6
  • 1
    In addition to linking to the blog post can you please extract the relevant information and add it to your answer. In it's current form, your answer would be worthless if that link were ever to disappear. By adding in the content to your answer it will still be useful in the future. Thank you.
    – codingbadger
    Commented Apr 13, 2011 at 18:16
  • Okay but there is a piece of code in the page which I have to copy verbatim to make it work. How can I do that?
    – puri
    Commented Apr 14, 2011 at 17:58
  • I copied the code and kept only the most basic option. I think it is fine now.
    – puri
    Commented Apr 14, 2011 at 21:05
  • In fact, the link you provide says that the post you were referring to does not exist.
    – leo
    Commented Dec 8, 2013 at 16:51
  • I have just updated the link to its old version at archive.org.
    – puri
    Commented Dec 8, 2013 at 18:51
3

An updated script command for Blogger is available at http://www.mathjax.org/docs/1.1/start.html, where they suggest using

<script type="text/javascript" 
        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> 
</script>

For an example of a blog using it at Blogger, is my blog at http://mathjaxtest.blogspot.com. It works fairly well, but one problem is that when one posts a comment in reply, the MathJax script is not applied to the preview version of the comment, only to the published version of the comment. This makes it hard to use MathJax in comments, since there is no way to check to typos in equations. Does anyone know a way to fix this problem with comments?

Improve this answer
3

The procedure and configuration options of the latest MathJax can be found in detail on its official documentation[1] page. But users like me prefer getting a solution directly than reading the long documentations and end up coming here through Google search. The configuration of the latest version is not exactly similar to the older version which is shown in previous answers here.

So, I am sharing the steps that I have followed to enable and configure the latest MathJax (version 3) on my Blogger site[2] recently.

We need to go to the HTML editor of the Blogger template (Theme → Customize → Edit HTML) and insert the following script lines 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>

Also, there exists a MathJax Configuration Converter[3]. 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://docs.mathjax.org/en/latest/web/start.html#ways-of-accessing-mathjax
[2] https://koutuholi.blogspot.com/2021/04/mathjax.html#v3
[3] https://mathjax.github.io/MathJax-demos-web/convert-configuration/convert-configuration.html

Improve this answer
1
1

This answer comes from Tex.Stackexchange:
Copy-past the following code

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
MathJax.Hub.Config({
 extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
 jax: ["input/TeX", "output/HTML-CSS"],
 tex2jax: {
     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
 },
 "HTML-CSS": { availableFonts: ["TeX"] }
});
</script>

in the HTML of the Blogger template (Design→Edit HTML→Edit Template) between <head> and </head>.

The advantage of this code on the other answers here is that the Mathjax rendered is closer to the one practiced on the SE network (in particular with the $). Also one may use macros (\newcommand).

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.