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"


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}
]
}
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
---