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   

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   

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

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"] …

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 …

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 …

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 …

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 …

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 …

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 …