• Skip to main content
  • Skip to primary sidebar

Founder at work

Master the skills to create and launch your next SaaS company

  • About Me
  • Reviews
  • Resources
  • Community
  • Contact
  • Lessons
  • Series
  • Search
  • Login

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

July 13, 2015 by Rick Hernandez Leave a Comment

How to embed math into a website
How to embed math into a website

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.
Screen Shot 2015-04-15 at 11.35.54 PM

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!
Screen Shot 2015-04-15 at 11.48.03 PM

Result

Solve\quad { 7 }^{ { 7 }^{{ 7 }^{7}}}
Solve\quad { 7 }^{ { 7 }^{{ 7 }^{7}}}

Rick Hernandez

I always had a passion for the field of STEM (Science, Technology, Engineering, and Math) and I knew I wanted to do something to make a difference in the world. I just didn’t know where to start. I was an immigrant in a new country, grew up in a tough environment, and wasn’t sure how… Read More

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

Filed Under: JavaScript, Mathematics, Programming

Primary Sidebar

Learn How To Take Your Idea And Convert It Into An App From Scratch Even If You Have Never Written A Single Line Of Code.

  • How to Find Your Next Great App Idea
  • The Secret To Getting PAID To Build Your Own App
  • How To Create Your App (SaaS, Mobile, VR, AR, Game)
  • How To Monetize Your Apps
Learn More
4.82 Ratings

Copyright © 2025 · JSecademy Blog Theme on Genesis Framework · WordPress · Log in