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 is 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.

1
2
3
4
<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.
1
{{ 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.
1
2
3
---
math: true
---
  1. If you want inline equations, you should add the following too.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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}$. By the way, I’m using the default markdown processor of Hugo called goldmark.

Have fun!

You are reading the 7th of 19 episodes in Hugo.
Published on 21.08.2020 by Mert Bakır with commit 3a172e2.
hugo
#hugo #latex #web-dev
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. […] 1 tags:["hugo","tags"] …

published on 22.08.2020
edited on 23.01.2021

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. […] 1 2 …

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 24.01.2021
edited on 11.06.2021

Some time ago, I wanted to display image galleries on my Hugo website and searched for Hugo themes for photography and gallery. I can’t say I find much. Then, I met with a javascript library called nanogallery2 which is using another javascript library as an image viewer lightbox2. In this …

published on 23.01.2021
edited on 11.06.2021

Image processing may seem complicated at first but it’s actually easy and definitely worth implementing since it’ll help you decrease page load times. As you probably know, we don’t want to load raw images with huge sizes for small thumbnails or blog-posts. We want to load a small …

published on 29.11.2020
edited on 05.12.2020

Plotly is a visualization library that allows us to write code in Python, R, or Julia and generates interactive graphs using Javascript. So, we don’t have to deal with Javascript. You can checkout Plotly gallery, there are interesting works. Anyway, last week, I’ve started learning …

published on 18.09.2020
edited on 13.02.2021

First of all, if you don’t know about data files, you may want to start reading from data files in hugo. This post is about a solution for a very particular problem. How can we use “group by” for the data from data files? Let me clarify with an example. I was creating a single page …