↓Skip to main content
  1. Posts/
  2. posts/

How to setup Katex rendering on Hugo

·379 words·2 mins·
Wiki Bruce Willis Katex Guides Blogging Math
Author
Neel Chakraborty
Table of Contents

Since, I will be primarily blogging about Mathematics, it’s essential for me to setup some form of \(\LaTeX\) rendering on my page.There are two popular choices for \(\LaTeX\) rendering, Mathjax and \( \KaTeX \) . For this blog, I decided to go with Katex.

Install Hugo
#

I am on Arch Linux, so the command to install hugo for me will be as follows, refer to your distribution/OS package manager on how to install hugo for the OS you are using.

    sudo pacman -S hugo

Creating a new site and adding a theme
#

Creating a new site on Hugo is pretty easy. You issue the following command, replacing my-site with your chosen site name and you’re good to go.

    hugo new site my-site

We can add a new theme in two different ways, as a git submodule or by simply cloning the git repo into my-site/themes/. For this guide, I will add the theme as a submodule. I am using the Maverick theme

    git submodule add --depth=1 https://github.com/canhtran/maverick.git themes/maverick

That’s it, we are done and good to go and add \( \KaTeX \) support.

Modifying theme files to add KaTeX support
#

Edit the <head> section of your theme’s head.html file (typically located in /theme-name/layouts/partials/ or /theme-name/layouts/_default/):

For this example,I am using the Maverick theme, and I will have to edit /themes/maverick/layouts/partials/head.html

Go to Katex Docs, and copy the code-section between the <head> tags under Starter template and paste it in your head.html file

For example, my head.html looks like this

<html>
    <head>
    ...
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
    ...
    </head>
</html>

Initializing KaTeX Auto-render
#

Add the following script to your head.html to initialize the $\KaTeX$ auto-render feature, or in other words you get math output when you type stuff between dollar signs.

Copy and paste the following code snippet to get it working

<script>
  document.addEventListener('DOMContentLoaded', function() {
    renderMathInElement(document.body, {
      delimiters: [
        {left: "$$", right: "$$", display: true},
        {left: "$", right: "$", display: false}
      ]
    });
  });
</script>

And that’s it, you can now write \(\LaTeX\) expressions in your posts

Related

To those of us
·154 words·1 min
Writings Poems