# Add MathJax Support to Jekyll and Hugo

I was using Mathjax v2 for a while and I heard v3 perform significantly faster than v2. Many great tutorials explains explains how to add Mathjax support to Jekyll websites. Some of them only cover Mathjax v2. So here is the brief summary on how to add Mathjax v3 support to your Jekyll website (Recently I’ve migrated to Hugo but adding support to Hugo is also pretty similar).

- In the
`_config.yml`

located in your root directory, add this line:

```
markdown: kramdown
```

- Create a file called
`mathjax.html`

insides`_includes/`

, add these lines (these settings come from the Mathjax documentation):

```
<script>
MathJax = {
tex: {
inlineMath: [ ['$', '$'], ['\\(', '\\)'] ]
},
svg: {
fontCache: 'global'
}
};
</script>
<script
type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
```

For Hugo website, the script will be exactly the same. The only difference is instead of putting `mathjax.html`

into `_includes/`

, you would want to put it inside `layouts/partials`

. For example, I put my `mathjax.html`

into the theme directory `themes/mini/layouts/partials`

.

For Jekyll, add this line in your `_includes/head.html`

before `</head>`

:

```
{% include mathjax.html >}}
```

For Hugo, we would add the following line to `layouts/partials/header.html`

before `</head>`

in your theme’s `layouts/partials/header.html`

.

```
{{ partial "mathjax.html" . }}
```

Now you can write in-line math equations in your markdown file like:

```
\\(f(x) = x^2\\)
```

or

```
$f(x) = x^2$
```

The above text will be render to: \(f(x) = x^2\)

If you are already using Mathjax v2 and wish to just convert it to v3, you may also try this configuration converter. There is a much more detailed guide but it may contain information unnecessary to average Hugo or Jekyll users.html) how to migrate from mathjax v2 to v3. The most useful resource is the official Mathjax documentation.