Lots of people have blogs where they talk about maths. Lots of these people just use plain text for mathematical notation which, while it gets the point across, isn’t as easy to read or as visually appealing as it could be. MathJax lets you write LaTeX and get beautifully typeset mathematical notation. And it’s really really easy to set up: you just need to paste some code into the header of your blog’s theme. To make it really really really easy, I’ve written some very detailed instructions of what to do for each big blogging service. (If you’re reading this after I wrote it, which you definitely are, beware that the interfaces I describe may have changed, so the advice below might be inaccurate. If it is, or if you’re just having trouble following along, please leave a comment below.) Once you’ve got everything set up, make a post containing this text to check that it works:
Maths between dollars is inline: $\sum_{k=1}^n k = \frac{n(n+1)}{2}$. Maths between slashsquarebrackets is display: \[\sum_{k=1}^n k = \frac{n(n+1)}{2}\]
Click on the statement which best describes you.
 I use Disqus comments on my blog
 I use IntenseDebate comments on my blog
 My blog is hosted by wordpress.com
 I run WordPress on my own server
 My blog is hosted by Blogger
 My blog is hosted by Tumblr
 My blog is hosted by TypePad
 My blog is hosted by Calepin
 My blog is hosted by scriptogr.am
 My blog is hosted by Weebly
 I’ve got my own fruity setup or I use a blogging service not mentioned above
I use Disqus comments on my blog
August 2012: The new version of Disqus, Disqus 2012, loads inside an iframe, which means MathJax can’t touch it. So if you really want MathJax in your comments, don’t upgrade, but it definitely will break at some point in the future. How disappointing! Disqus inserts a comments thread into your posts by using javascript after the rest of the page has loaded, so you need to do a little bit extra to get MathJax to typeset maths written in comments. First of all, get MathJax to work on the rest of your blog by following the instructions in the section which best describes your situation below. Then paste the following at the top of the script
tag you used to load MathJax:
function typeset() { MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } function disqus_config() { this.callbacks.onNewComment = [typeset]; this.callbacks.onInit = [typeset]; }
This adds some hooks into the Disqus code so that MathJax is told when Disqus has loaded and whenever new comments appear on the page. I can’t work out how to get it to prod MathJax when a comment is edited, but that isn’t so bad. I found this page very helpful when writing this code.
I use IntenseDebate comments on my blog
I’ve submitted my IntenseDebate plugin to the plugin directory, but I’m still waiting for it to be accepted. While we’re waiting for that, you can go to the plugin editor, and paste in the code below. Note: There’s a bug with IntenseDebate where it strips out backslashes in newlyposted comments. Obviously that ruins TeX, but it’s fine after you reload the page.
var id_mathjax_plugin; (function() { var mjp = id_mathjax_plugin = { load_mathjax: function() { function e(e){var t='.MathJax .mn {background: inherit;} .MathJax .mi {color: inherit;} .MathJax .mo {background: inherit;}',n=e.createElement('style');n.innerText=t;try{n.textContent=t}catch(r){}e.getElementsByTagName('body')[0].appendChild(n);var i=e.createElement('script'),s;i.src='https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeXAMSMML_HTMLorMML.js',i.type='text/javascript',s='MathJax.Hub.Config({skipStartupTypeset:true,tex2jax:{inlineMath:[[\'$\',\'$\']],displayMath:[[\'\\\\[\',\'\\\\]\']],processEscapes:true}});MathJax.Hub.Startup.onload();',window.opera?i.innerHTML=s:i.text=s,e.getElementsByTagName('head')[0].appendChild(i)}function t(t){t.MathJax===undefined?e(t.document):t.MathJax.Hub.Queue(new t.Array('Typeset',t.MathJax.Hub))}var n=document.getElementsByTagName('iframe'),r,i;t(window);for(r=0;r<n.length;r++)i=n[r].contentWindown[r].contentDocument,i.document(i=i.parentNode),t(i) }, process_comments: function() { MathJax.Hub.Queue(['Typeset',MathJax.Hub,'idccontainer']); } }; id_add_action('idcomments_init',mjp.load_mathjax); id_add_action('idcomments_func_load',mjp.process_comments); id_add_action('page_load',mjp.process_comments); id_add_action('thread_page_load',mjp.process_comments); id_add_action('comment_post',mjp.process_comments); })();
My blog is hosted by wordpress.com
Actually, if your blog is hosted by wordpress.com, you’re flat out of luck. They just will not let you add a script to your page in any way, shape or form. Hopefully they’ll upgrade their old imagebased LaTeX system to MathJax at some point, though. For now, you can either muddle on with ugly maths, move your WordPress blog to your own server, or use one of the other blogging services.
I run WordPress on my own server
You can install the Simple MathJax plugin, or you can take five minutes to edit your theme by hand. If you decide not to use the plugin: Login to your Dashboard. Click on Appearance, then Editor. Click on the Header template on the right. Paste the following code just below the line with the <title>
tag on it:
<script type="text/xmathjaxconfig"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], displayMath: [['\\[','\\]'], ['$$','$$']]}}); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeXAMSMML_HTMLorMML"> </script>
Click Update file, and you’re done! Here’s how it looks on my selfhosted WordPress blog.
My blog is hosted by Blogger
July 2013: I’ve given up on Blogger again. I think Google continually change the way their template system works, making maintaining the MathJax code not worth the effort. If you want to give it a go anyway, follow the instructions below.
April 2013: Thanks to Weiqi Gao for working out how to get MathJax working on blogger again.
Go to your blog and sign in. Click on the Design link in the admin bar at the top. Click on the Edit HTML link. Paste the following code just above the line containing </head>
:
<script type="text/xmathjaxconfig"> // <![CDATA[ MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], displayMath: [['\\[','\\]'], ['$$','$$']]}}); blogger.ui().viewType_.prototype.onRenderComplete=function(){MathJax.Hub.Queue(['Typeset',MathJax.Hub])}; // ]]> </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeXAMSMML_HTMLorMML"> </script>
Click on Save Template, and you’re done! Here’s how it looks on my Blogger blog.
My blog is hosted by Tumblr
Log in to your blog’s dashboard. Click on the Customize appearance link. Click on the Edit HTML button. Paste the following code just below the line with the <title>
tag on it:
<script type="text/xmathjaxconfig"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], displayMath: [['\\[','\\]'], ['$$','$$']]}}); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeXAMSMML_HTMLorMML"> </script>
My blog is hosted by Typepad
You’ve got two options here. You can either pay for Typepad Pro to get the ability to create a template from scratch, or you can paste some code at the top of every post you write with maths in.
I’ve paid for TypePad Pro and I don’t mind making my own design from scratch
Log in to TypePad.com and go to your Dashboard. In the Manage my blog sidebar on the right, click on the Design link. Click on the Choose a theme button. Under Customizable, click on Advanced Templates, then click the Choose button on the right. Click on the Main Index Template link, and paste the following code just below the line with the <title>
tag on it:
<script type="text/xmathjaxconfig"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], displayMath: [['\\[','\\]'], ['$$','$$']]}}); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeXAMSMML_HTMLorMML"> </script>
Click the Save Changes button, then click on the link to Return to templates. At the bottom of the page, tick the checkbox labelled Apply this design to “XXX’s blog”, then click the Save changes button, and you’re done.
I haven’t paid for TypePad Pro, or I want to use a readymade design.
The other method, if you haven’t paid for TypePad Pro or if you want to use one of the noncustomizable designs, is to paste some code into the top of any post with maths in. When you’ve finished writing your post, click on the HTML button at the top right of the editing area, and paste the following code at the top of your post:
<script language="javascript"> if(window.MathJax===undefined){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js"; var config = 'MathJax.Hub.Config({' + 'tex2jax: {'+ 'inlineMath: [ ["$","$"],["\\\\(","\\\\)"]],'+ 'displayMath: [["\\\\[","\\\\]"],["$$","$$"]]'+ '}});'; if (window.opera) script.innerHTML = config; else script.text = config; document.getElementsByTagName("head")[0].appendChild(script); } </script>
Click the Publish button straight away after doing that. If you switch back to the Rich Text editor, TypePad will mess up the script tags by inserting CDATA
tags, and they won’t get loaded. So if you need to make any changes to your post, you’ll need to delete the old script with the CDATA
and paste in the correct version again. Bit of a hassle. Also note that MathJax won’t get loaded when looking at your post in the Preview window. Here’s how it looks on my TypePad blog.
My blog is hosted by Calepin
Calepin doesn’t let you do anything to the page’s HTML at the moment, so you need to paste some code at the top of every post you make. Paste the following code just below the lines where you define the post’s title and publication date:
<style type="text/css"> .math span { color: inherit; } </style>
<script language="javascript"> if(window.MathJax===undefined){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js"; var config = 'MathJax.Hub.Config({' + 'tex2jax: {'+ 'inlineMath: [ ["$","$"],["\\\\(","\\\\)"]],'+ 'displayMath: [["\\\\[","\\\\]"],["$$","$$"]]'+ '}});'; if (window.opera) script.innerHTML = config; else script.text = config; document.getElementsByTagName("head")[0].appendChild(script); } </script>
The content of your post should go underneath that code. Here’s how it looks on my Calepin blog.
My blog is hosted by scriptogr.am
August 2012: It looks like scriptogr.am has disabled the use of custom scripts. I’ve posted on their support forum asking if anything can be done.
Log into your admin page. Click on the HTML Editor button at the top right of the page. Paste the following code just below the line with the <title>
tag on it:
<script type="text/xmathjaxconfig"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], displayMath: [['\\[','\\]'], ['$$','$$']]}}); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeXAMSMML_HTMLorMML"> </script>
Click on the Close button, and you’re done! Here’s how it looks on my scriptogr.am blog. Note that I needed to use two backslashes (\\[
and \\]
) in the display maths delimiters because the Markdown parser seems to be interpreting single slashes as escape codes. There might be other conflicts between Markdown and LaTeX.
My blog is hosted by Weebly
Click on the Design tab at the top of the page, then click on the Edit HTML/CSS button at the bottomleft. For each file listed under the Page Layouts section of the editor, paste the following code just after the line with the <head>
tag on it:
<script type="text/xmathjaxconfig"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], displayMath: [['\\[','\\]'], ['$$','$$']]}}); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeXAMSMML_HTMLorMML"> </script>
Click on the Save button at the topright, pick a name for your theme (or leave the default one), and then publish your site. You’re done! Here’s how it looks on my Weebly site.
I’ve got my own fruity setup or I use a blogging service not mentioned above
If you have the ability to edit the HTML of your blog’s header, paste the following code just below the line with the <title>
tag on it:
<script type="text/xmathjaxconfig"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], displayMath: [['\\[','\\]'], ['$$','$$']]}}); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeXAMSMML_HTMLorMML"> </script>
If you can’t do that, you can try putting the MathJax code inside each post. In a plain HTML editor (not a “visual” or “rich text” editor), paste the following code at the top of your post:
<script language="javascript"> if(window.MathJax===undefined){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js"; var config = 'MathJax.Hub.Config({' + 'tex2jax: {'+ 'inlineMath: [ ["$","$"],["\\\\(","\\\\)"]],'+ 'displayMath: [["\\\\[","\\\\]"],["$$","$$"]]'+ '}});'; if (window.opera) script.innerHTML = config; else script.text = config; document.getElementsByTagName("head")[0].appendChild(script); } </script>
Hi when i paste the script of mathjax in blogger, i am getting this error…
please correct the error below and submit your template again.
More than one widget was found with id: Navbar1. Widget IDs should be unique.
April 18, 2012 @ 1:54 am
Oh dear! It sounds like you’ve pasted the code inside another tag, so that it doesn’t close properly. I don’t have a “navbar1″ widget so I can’t work out where it might be. Which theme are you using?
Can you copy all of your template HTML into pastebin and send me the link? If you’d rather email, I’m at christianperfect@gmail.com.
April 18, 2012 @ 8:24 am
Hi thanks for your post.
can you help clarify about AsciiMathML.js. their website claims you only need to paste in ONE line into your header?
Apologies for being a newbie, but when I put the mathML output (like xml) of a formula from Open office (which displayed it correctly), there’s a newline after every symbol etcc.? (i pasted the xml mathML into the “edit html” window, not the “compose” window in blogger). Is this correct?
I am not using the “new” blogger interface b/c your instructions seem to fit with the older one.
July 14, 2012 @ 5:45 am
ahh sorry. scratch that. it’s my browser: old version of chrome. will update and check.
(shocking how hard it is to get math on a webpage!) (don’t wantto learn Tex or LaTex)
July 14, 2012 @ 6:07 am
I’d like to suggest that you suggest adding Drupal to this blog. There is a very elementary method using the Javascript Libraries module (adding “http://www.example.com/path/to/MathJax/Mathjax.js?config=/path/to/config”), and embedding external configurations. Someone just has to make a text file on their server.
October 18, 2012 @ 3:36 pm
I followed the directions for tumblr and it is not working. Any ideas?
Thank you!
February 23, 2013 @ 2:13 pm
Can you send me the address of your blog?
February 24, 2013 @ 7:26 pm
Thanks for your reply, Christian. I realized that it wasn’t showing up in the WYSIWYG editor but on the page. Thanks for your care in getting back! Really appreciate it.
February 24, 2013 @ 10:32 pm
Hi, thanks for the helpful article, however I haven’t managed to get it working at all in blogger, even with the CDATA tag. The equations do appear using codecogs though. Do you know if anything else has changed?
May 13, 2013 @ 12:20 am
You wouldn’t happen to know how to do this in oblog, would you?
June 17, 2013 @ 7:00 am
Have you tried pasting the first bit of code under “I’ve got my own fruity setup” into
templates/page_header.html
?June 17, 2013 @ 9:39 am
Hello,
I followed your instruction for bloger but unfortunately it doesn’t display your example properly. Any suggestions?
July 11, 2013 @ 12:48 pm
Sorry, Blogger seems to decide at random whether it’ll run MathJax. I’ve given up trying to get a stable solution.
July 12, 2013 @ 10:17 pm
I seem to have achieved stability by using MathJax with a ‘Classic’ Blogger template.
November 24, 2013 @ 8:08 am
The briefer script given on Steve’s Blog (http://holdenweb.blogspot.co.uk/2011/11/bloggingmathematics.html) as a script to be placed at the top of each page, does currently work in Blogger when placed in the header of the template.
September 12, 2013 @ 8:07 pm
I tried doing the Tumblr version. I am not sure if I’m putting into the right location. Is it anywhere inside the tags or just below the tags?
If it helps this is what my HTML looks like:
{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}
July 25, 2013 @ 4:37 am
I got it to work by added the code right above the closing tag. THANKS!
July 25, 2013 @ 5:20 am
Hi Christian Perfect:
I followed your instructions for Disqus and pasted the code anywhere I can, but it didn’t work. I tested here: (http://maxfan.org/mathematics/steinertreeproblem2.html). See the comment, math is not rendering. Do you have any ideas?
Many thanks! ^_^
August 10, 2013 @ 1:56 am
Hi, sorry for the slow reply. If you’re using the new version of Disqus, you can’t use MathJax because of browser security settings. Sadly, there’s nothing I can do!
August 21, 2013 @ 1:29 pm
I asked on stackoverflow.com and got the answer. Anyway, thanks for your reply!
August 21, 2013 @ 2:33 pm
Maths between dollars is inline: $\sum_{k=1}^n k = \frac{n(n+1)}{2}$.
Maths between slashsquarebrackets is display:
\[\sum_{k=1}^n k = \frac{n(n+1)}{2}\]
April 23, 2014 @ 4:29 pm
Is MathJax really safe to enable in comments or can people do things like
\[\newcommand{\t}[1]{\displaystyle{#1 \atop {#1~~#1}}} \t{\t{\t{\t{\t{\triangle}}}}}\]
?
May 7, 2014 @ 1:27 am
They can do it, but I can edit it out. I think obnoxious LaTeX is the least of a blog owner’s problems when it comes to unwanted comments.
May 7, 2014 @ 9:35 am
