Jekyll: Create SVG graphics with LaTeX

Although MathJax is an easy option to render LaTeX in your static Jekyll output, you have to add additional Javascript to your page which has to be loaded.

I found a plugin on Github created by Fèlix Galindo Allué which allows you to create PNG files from inline LaTex. PNG is nice but as most browsers nowadays support SVG, I decided to extend the plugin. You can find my version here.

Installation

To install the plugin, you have to copy the liquid_latex.rb file into a subfolder _plugins and depending on the desired output modify your _config.yml:

liquid_latex:
  convert_cmd: "epstopdf $epsfile && pdf2svg $pdffile '$pngfile'"
  output_format: "svg"

Of course you’ll need some dependencies installed before the plugin is able to create graphics:

  • Latex Distribution
  • ghostscript
  • ImageMagick (for png output)
  • pdf2svg (for svg output)
  • eps2pdf (for svg output, debian users can install texlive-font-utils)

For debian:

apt-get install graphviz texlive texlive-latex-extra imagemagick ghostscript textlive-font-utils pdf2svg"

Usage

You can now include latex snippets (no need for a document tag etc).

{% latex %}
$$ a^2 + b^2 = c^2 $$
{% endlatex %}

or

{% latex %}
  \begin{eqnarray}
     y & = & ax^2 + bx + c
  f(x) & = & x^2 + 2xy + y^2
  \end{eqnarray}
{% endlatex %}

Theoretically it should even be possible to include the svg in your source code instead of referencing an external image. But it seems as if the generated SVGs don’t have unique IDs which will mix all characters.

Caveats

As you can see, latex will create those SVG graphics using it’s default font-size. This will most likely not be the same as in your html. You have multiple options to fix this:

  • Add a CSS rule to render the graphics larger
  • Tell Latex which font-size to use (my favorite, see below). You can find more information (here)[https://en.wikibooks.org/wiki/LaTeX/Fonts#Sizing_text]
{% latex %}
\begin{huge}
  \begin{eqnarray}
     y & = & ax^2 + bx + c
  f(x) & = & x^2 + 2xy + y^2
  \end{eqnarray}
\end{huge}
{% endlatex %}

Related Posts