Here’s a simple tutorial on enabling $\LaTeX$ for Jekyll.

Installation

The script below (provided by KaTeX Auto-render extension) can automatically render $\LaTeX$ blocks.

<link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
  integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
  crossorigin="anonymous">
<script defer 
  src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" 
  integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
  crossorigin="anonymous"></script>
<script defer 
  src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
  integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
  crossorigin="anonymous"
  onload="renderMathInElement(document.body);"></script>

For Jekyll, we simply add this block of script to _includes/head.html. More precisely, it should be placed between the <head>...</head> tags. After that, $\LaTeX$ blocks should be rendered properly for Jekyll. For both inline and display math, write $\LaTeX$ code between $$...$$. For example, the reinforcement learning objective

\theta^{\star}=\arg \max _{\theta} E_{\tau \sim p_{\theta}(\tau)}\left[\sum_{t} r\left(\mathbf{s}_{t}, \mathbf{a}_{t}\right)\right]

should be rendered as

\[\theta^{\star}=\arg \max _{\theta} E_{\tau \sim p_{\theta}(\tau)}\left[\sum_{t} r\left(\mathbf{s}_{t}, \mathbf{a}_{t}\right)\right].\]

Inline/Display Mode Options

However, some of you might want to use $...$ for inline mode and $$...$$ for display mode. To fix it, we can modify the script above to

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
  integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
  crossorigin="anonymous">
<script defer
  src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
  integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
  crossorigin="anonymous"></script>
<script defer
  src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
  integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
  crossorigin="anonymous"></script>
<script>
  let options = {
    delimiters: [
      {left: "$", right: "$", display: false},
      {left: "$$", right: "$$", display: true},
      {left: "\\(", right: "\\)", display: false},
      {left: "\\[", right: "\\]", display: true}
    ]
  }
  document.addEventListener("DOMContentLoaded", function() {
      renderMathInElement(document.body, options);
  });
</script>

As shown in the above code, \\(...\\) (inline) and \\[...\\] (display) should also work. If you need more details on the configuration, see KaTeX API.

Render on Demand

We might not want the code block to run if the page does not have any $\LaTeX$ code, so we can wrap the code given above with some Liquid syntax.

{%- if page.usekatex -%}
...
{% endif %}

We also need to add a tag like usekatex: true to the front matter of the post.

---
layout: post
title: "Enable LaTeX Support for Jekyll with KaTex"
usekatex: true
---