Prepare your blog: TeX-like equations and syntax highlighting

Marti Sec -

As a person comming from physics and with interest in coding, the two things I value the most are \(\LaTeX\) equations and syntax highlithing. Here I present you the two libraries that allow to have both passions in the same blog (yaaay!)

Foremost, the important one: \(\LaTeX\), \(\LaTeX\), \(\LaTeX\). Did I tell you I love \(\LaTeX\)? (gosh, I wish in my work I could write everything on \(\LaTeX\) instead of using word :( ). Anyway, let's go to it!

$$\delta\int_{t_1}^{t_2} L({\bf q},{\bf \dot q}, t) dt = 0$$
(So great, such lines, much resolution)

We will use \(MaTjAx\), a great library that also allows other equation markups. I use ghost as blog system, but i'm sure you will know how to get it working with Wordpress or other systems.

First of all, you will need to cd to your ghost location. I will be using the theme casper, so change a bit the commands if it is not your case. I will use the library provided by the CDN, so I won't install it on my server. If you don't want to do so, follow the steps in the next section, that will give you a rough ide on how to do so. Anyway, the first thing we'll do is to add the reference to the file default.hbs. This file is the part of the template that loads every time.

vi content/themes/casper/default.hbs

Then add this below the section {{!-- jQuery + Fitvids, which makes all video embeds responsive --}}

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

Save the file, restart ghost using ghost restart and we are all set!!

Just keep in mind some limitations.

  • In order to write inline equations, you can't use $ ... $ by default (you can activate it though). You will need to use \\( ... \\), but it is not that difficult to learn it ;).
  • The usual way to write displayed equations is $$ ... $$ or \\[ ... \\] For multi line equations you'll need the latter.
  • Sometime you will need to escape characters due to conflicts with ghost's markdown parser. One example is the extra \ needed in the commands above
\\[ 
 \psi(t)=\exp{\left[-c\left(1+\frac{1-\gamma^2}{1+\gamma^2}\right)\right]}
 \\]

Becomes:
\[
\psi(t)=\exp{\left[-c\left(1+\frac{1-\gamma^2}{1+\gamma^2}\right)\right]}
\]

Syntax highlighting

Ok, \(\LaTeX\) is really really cool but some of you are not here for it. In fact, maybe you don't understand the need to have it. Let's talk code. I found out that the library prismjs is a very complete solution for what I want. It has a good ammount of language syntax and it provdes you with different themes to choose. Furthermore, you can choose between a broad range of add-ons like automatic code copying, dusplay line numbers, etc.

Now, go to the page and select the options you want! I have chosen a few, for example scala, python and java. A noce thing is taht you get an url with all the options you choose in case you need to add more in the future. Mine looks like this.

http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+bash+java+json+python+scala+sql&plugins=line-numbers

Once you have selected all the languages and options you want, the css and js code will appear at the end of the page. You will need to copy it to the adequate of the following files:

vi content/themes/casper/assets/js/prism.js
vi content/themes/casper/assets/css/prism.css

Then, edit the same file as above vi content/themes/casper/default.hbs, and place the css reference below {{!-- Styles'n'Scripts --}} marker. In my case, the section looks like this:

    {{!-- Styles'n'Scripts --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.min.css"}}" />

And then, in the section {{!-- jQuery + Fitvids, which makes all video embeds responsive --}} place the following code:

<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

Save the file, restart ghost using ghost restart and we are all set!!

Then, you can use the syntax highlighting just indicating the name of the language like this


```scala
val s = "some scala code"
```

Or using html tags:

<pre><code class="language-css">p { color: red }</code></pre>

Some examples:

<h1>Hello World!</h1>

while True:
    print("Infinite loooooooooooooooooooooooooooooop")
    if viewers == "Rick and Morty":
        attack()

p { color: red }
val myVal: String = "Heey"