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 slash-square-brackets 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 scripttag 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 newly-posted 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=TeX-AMS-MML_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].contentWindow||n[r].contentDocument,i.document||(i=i.parentNode),t(i)
		},
		process_comments: function() {
			MathJax.Hub.Queue(['Typeset',MathJax.Hub,'idc-container']);
		}
	};
	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 image-based 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/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['\(','\)'], ['\\(','\\)']],
                       displayMath: [['\\[','\\]'], ['\(\)','\(\)']]}});
</script>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Click Update file, and you’re done! Here’s how it looks on my self-hosted 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/x-mathjax-config">
  // <![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="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_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/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['\(','\)'], ['\\(','\\)']],
                       displayMath: [['\\[','\\]'], ['\(\)','\(\)']]}});
</script>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_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/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['\(','\)'], ['\\(','\\)']],
                       displayMath: [['\\[','\\]'], ['\(\)','\(\)']]}});
</script>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_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 ready-made design.

The other method, if you haven’t paid for TypePad Pro or if you want to use one of the non-customizable 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://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/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://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/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/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['\(','\)'], ['\\(','\\)']],
                       displayMath: [['\\[','\\]'], ['\(\)','\(\)']]}});
</script>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_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 bottom-left. 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/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['\(','\)'], ['\\(','\\)']],
                       displayMath: [['\\[','\\]'], ['\(\)','\(\)']]}});
</script>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Click on the Save button at the top-right, 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/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['\(','\)'], ['\\(','\\)']],
                       displayMath: [['\\[','\\]'], ['\(\)','\(\)']]}});
</script>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_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://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/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>