How to setup MathJax with a CMS(WordPress, Ghost) plus sweet syntax highlighting

Science is a way of thinking

― Carl Sagan

If you are involved in any type of science (life science, social science, physical science, formal science) more then likely you are doing some type of math. If it’s just basic arithmetic in sociology or advance mathematics in computer science to analyze an algorithm they all need symbols to represent those ideas.

Since I’m a aspiring scientist, I have been wanting to learn LaTeX for the past year, but I have not found an easy way to start using it. For most of my editing needs I tend to use MarkDown for it’s simplicity, making LaTeX to time consuming and confusing compared to MarkDown in my opinion. Now that I have some ideas for some Blog post’s with some mathematical symbol’s then LaTeX is the goto standard on the web. Of course the value of LaTeX remains, it’s designed for the production of technical and scientific documents. So yes if writing a white paper is something of interest then LaTeX is a must.

Since most CMS don’t have baked in support for mathematical symbols, the best tool that I have found are some nice tools to abstract away LaTeX with the use of a GUI tool to generate equations. Google chrome has a good plugin to do just that the Daum Equation editor give it a try. This tool does have some limitations, for example the symbols that get generated from LaTeX can NOT be embed on to a site, the best work around that I have found is to take a single screen shot and use that image on the blog post, but quickly this becomes a headache to maintain over time specially if you make a mistake.

The solution that I decided to use instead is to learn LaTeX and use MathJax to embed LaTeX into the page. This way I can quickly maintain blog posts and keep them up to date.

This tutorial is based on the documentation from MathJax.

Setting up MathJax with GHOST

1. SSH into the server

   ssh [email protected]

2. Find location of site

   cd /my/sites/folder/for/ghost

3. Setup CDN an bootstrap the library

   vim content/themes/casper/default.hbs
   Before the end of the body tag insert the following lines of code

   
   “`

4. Setup Syntax Syntax Highlighting

   vim content/themes/casper/default.hbs
   Before the end of the body tag insert the following lines of code

5. Setup Live Preview

   vim core/server/views/default.hbs
   Before the end of the body tag insert the following lines of code

6. Test it out and check if it’s working correctly.

Setting up MathJax with WordPress

Since the WordPress project is a more mature project, their is some nice plugins that allows for the same functionality as the GHOST setup. For MathJax I ended up using MathJax-LaTeX, even though it had low ratings it’s still a relatively good plugin. Since their is hundreds of plugins for WordPress to allow for syntax highlighting, the best one that I have come across is the SmartAss Highlighter, because it’s main library that it’s using to render the code highlights is google-code-prettify, that means it just works!

1. Install MathJax-LaTeX
2. Install SmartAss Highlighter
3. Activate plugins on your wordpress install
4. Add custom css class to the pre tags at

http://mydomain.com/wp-admin/themes.php?page=editcss

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

1. Test out code highlighting

Create a new blog post entry and switch to text view, the SmartAss Highlighter requires that the [highlighter] tag be present only once on the blog post the the rest of the code examples must be wrapped in pre tags.

Result

package main

import "fmt"

func main() {

    // We'll iterate over 2 values in the `queue` channel.
    queue := make(chan string, 2)
    queue <- "one"
    queue <- "two"
    close(queue)

    // This `range` iterates over each element as it's
    // received from `queue`. Because we `close`d the
    // channel above, the iteration terminates after
    // receiving the 2 elements. If we didn't `close` it
    // we'd block on a 3rd receive in the loop.
    for elem := range queue {
        fmt.Println(elem)
    }
}

Now let’s output some math!

Result