published on 21.08.2020

Math typesetting, or rendering LaTeX, in Hugo is not a hard task. We have two popular alternatives. First one is mathjax, I was using it before with jekyll. The other popular library for math typesetting is KaTeX. Since it’s faster, this time I’ll go with KaTeX.

Implementing these libraries is pretty straightforward. We just need to include them in the <head> section. Yet, we don’t want them to load for every page, only if it’s required.

$$f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz$$

  1. Create a partial template and use the code below. /layouts/partials/helpers/katex.html.

The first line is the CSS, the second one is the javascript file. The third line is the auto render extension. Auto-render extension is required to render math elements inside text.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"></script>

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>

Don’t just copy-paste this one. It’s using version 0.12 which is the latest version when I’m typing this blog post. You may want to see if there is an update.

  1. Include the partial in the head section. This is /layouts/partials/head.html for me.
{{ if .Params.math }}{{ partial "helpers/katex.html" . }}{{ end }}
  1. Use the parameter math in the front-matter if you want to use the library in that post/page.
---
math: true
---
  1. If you want inline equations, you should add the following too.
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            delimiters: [
                {left: "$$", right: "$$", display: true},
                {left: "$", right: "$", display: false}
            ]
        });
    });
</script>

This will provide inline equations with single dollar signs. $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$, $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$.

Have fun!

You are reading the 7th of 19 episodes in Hugo.
Published on 21.08.2020 by Mert Bakır with commit 3be25fb.
hugo
#hugo #latex #static-site
Next episode:
Render Tags and Tag Cloud in Hugo
published on 22.08.2020

Tags in Hugo is a default taxonomy and we don’t need any special configuration to use tags. We just enter the tags in the post’s front-matter. This can be YAML, TOML, or JSON. I’m using the YAML format, just a personal preference. […] tags:["hugo","tags"]In …

published on 22.08.2020

I like to display “published date” and “last modified date” info for my posts. Date info comes from the date parameter and last modified info comes from the lastmod parameter, both defined in the front-matter. […] …

published on 22.08.2020

We talked about rendering dates and the last modification date in the last post. Now, we’ll look into how can we convert month names into another language? I’ve had a similar experience last year with jekyll. The idea is the same, we need to map each month to their version of the …

published on 10.07.2022

Previously, I’ve published a blog post about deploying static content on heroku with basic authentication. You can find the link here. In that post, we hosted the source code on GitLab and configured a CI/CD pipeline to render the static content a.k.a html files and push these files to Heroku. …

published on 28.05.2022

Each git commit has a field called Author which consists ‘user.name’ and ‘user.email’. We usually set these variables once, after installing git, with git config --global so that each repo gets the variables from the global definition. We can also set them locally for a …

published on 25.05.2022

In this post, I’ll first walk through hosting static content with basic authentication. Then, we’ll look into deploying to Heroku using GitLab Pipelines, more specifically deploying a certain sub-directory within the project instead of pushing the whole project. Also, I’ll share …

published on 17.04.2022
edited on 15.07.2022

Önceki bölümde, markdown formatını LaTeX formatına dönüştürmek için kullanılan Pandoc yazılımından bahsetmiştik. Şimdi konuyu bir adım daha ileri taşıyıp ve bookdown’a geçiyoruz. Bookdown; Rmarkdown kullanarak teknik dökümanlar, kitaplar yazabilmemizi sağlayan, Yihui Xie tarafından yazılmış …

published on 10.04.2022

I’ve been using WSL-2 on Windows for over a year. It’s very useful because some Python packages are just a headache to install on Windows. Also, docker. It’s just better on Linux. Yet, WSL-2 can also be problematic. I remember trying a dual-boot setup when things just went way too …

published on 03.03.2022

In this post, I’ll share how to install geopandas and some other gis related packages on Windows. If you are on Mac or Linux you can probably just pip install those without any issue. I usually had to do a google search every time I wanted to install these packages on Windows environment. Of …