Simple Syntax Highlighting + LaTeX

Ever wanted to add syntax highlighting and to your own website? Well, with highlight.js and MathJax it only takes 5 minutes to set up!

Syntax Highlighting

There are a lot of syntax highlighting libraries out there. The easiest one to use in my opinion is highlight.js. All you have to do is a few lines of Javascript and CSS! There are also quite a few themes you can pick from. As you can see, I’m partial to solarized.

With this code snippet, highlight.js will scan through the DOM and highlight any region surrounded by <pre><code> … </pre></code>. The language-type is detected automatically.

def foo():
print "this is some python"

LaTeX

Adding LaTeX support is even easier. All you have to do is add this to your HTML. (Download URL here).

<script type="text/javascript" src="/MathJax.js"></script>

With this, you can use \ ( #LaTex_Here# \ ) for inline math and \ [ \#LaTex_Here# \ ] for display math. Just one caveat: this creates problems if you are also using Markdown, since some LaTeX characters will be interpreted as Markdown characters. The way to get around this is to explicitly use <script> tags of the right type: