How to Post Maths in Blogspot: MathJax & QuickLatex

Edit your template and add the following before the closing "head" tag:

<script type=\"text/x-mathjax-config\">
MathJax.Hub.Config({
  MMLorHTML: {
    prefer: {Firefox: \"HTML\"}
  }
});
</script>
<script type=\"text/javascript\" src=\"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full\"></script>

Then you just stick the TeX stuff in backslash square brackets for standalone formulae or backslash rounded brackets for in text symbols.

To get graphics you need to use Quicklatex. You need to drop down the choose options box on that page and then insert this text to activate the Tikz graphics package, with the tikz library that lets you calculate co-ordinates using algebra:

\usepackage{tikz}
\usetikzlibrary{calc}

You then get the URL of an image which you can stick in your blog.

How to Post Code in Blog{er,spot}

This was a collossal pain in the arse to work out, but actually turned out to be quite easy to implement. Y'see when you post text to a blog post everything works fine. The problem is if you try to post code - html, linux command line stuff. You end up with lots of special characters that the site tries to render in HTML instead of just displaying. So instead of (for example) a line which shows the code to get coloured text, you just get the coloured text. Not helpful.

There are many and varied explanations of how to do this, but I prefer this way which is cobbled together from multiple sources. For my epic Amiga Linux project I needed to be able to display commands to type in AND the outputs of commands. I wanted to have those blocks distinct from each other and the surrounding text. This is what I eventually came up with.

Go to the Design tab, and choose the Edit HTML section. You get a text box which behaves much in the same way as the post editting box. Scroll down until you get to a line which says:

]]></b:skin>

Insert above that line the following text:

.postCode{
background:#eeeeee; 
border:1px solid #A6B0BF; 
font-size:120%; 
line-height:100%; 
overflow:auto; 
padding:10px; 
color:#000000
}
.postOutput{
background:#000000; 
border:1px solid #A6B0BF; 
font-size:120%; 
line-height:100%; 
overflow:auto; 
padding:10px; 
color:#eeeeee
}

My workflow is then to copy the text I am working on into some website or other which will automatically convert all the special characters to their escape codes.

Then I paste the resulting text into the blog editing window in HTML mode. I then switch to compose mode, and change all of the code or output text into quotes. I then switch back to the HTML mode, copy all of the HTML text and paste it into a text editor.

I then do a search and replace all "/blockquote" entries for "/pre" and then "blockquote" for "pre class="postCode"". That converts all of the quotes to the code class that I defined above. It is black text (the colour is 00 for all RGB) on a nearly white background (ee in all RGB - ff for all would be completely white).

I then sift through the post and check for any postCode classes that I need to change to postOutput. That is nearly white text on a black background, which gives good contrast between the two texts. If I do actually want to quote something I do it last.

I end up with the following tag regime for the two types of quoted code:

<pre class="postCode"> code </pre>

or

<pre class="postOutput"> output </pre>