# Jekyll and Mathjax: How to configure specific inline and display math

**URL:** <https://talk.jekyllrb.com/t/jekyll-and-mathjax-how-to-configure-specific-inline-and-display-math/9551>\
**Category:** Uncategorized\
**Created:** [November 20, 2024, 3:27am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax-how-to-configure-specific-inline-and-display-math/9551 "2024-11-20T03:27:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![sugab](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/sugab/32/6143_2.png) [@sugab](https://talk.jekyllrb.com/u/sugab)\
**Post date:** [November 20, 2024, 3:27am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax-how-to-configure-specific-inline-and-display-math/9551/1 "2024-11-20T03:27:41Z")

</div>

Hi, I tried to render inline math (with “$`”) and math block (below) with a tick, as it is the preferred Github-flavored markdown (for preview), to publish on GH pages.

````auto
```math
E = m c^2

````

But the equation is not rendered on the GH page, although I already set the `_includes/head-custom.html` as follows (called in `_layouts/defaults.html`). I used the default `primer` theme from GH pages.

````auto
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>

<script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['$`', '`$'], ['\\(', '\\)']],
      displayMath: [['```math', '```'], ['$$', '$$'], ['\\[', '\\]']]
    }
  };
</script>

````

Is there any way to address this issue?

---

<div class="post-metadata">

**Author:** ![george-gca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/george-gca/32/5301_2.png) [@george-gca](https://talk.jekyllrb.com/u/george-gca)\
**Post date:** [November 25, 2024, 9:53pm UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax-how-to-configure-specific-inline-and-display-math/9551/2 "2024-11-25T21:53:31Z")

</div>

Not sure about how to fix that, but when building a page with jekyll, the code markdown line will be replaced by something else, so by the time that the MathJax script runs, the

````auto
```math
E = m c^2
```

````

block will be something completely different.

I would suggest you don’t replace the default inlineMath and use 2 dollar signs, as `$$E = m c^2$$` instead.

---

<div class="post-metadata">

**Author:** ![bewuethr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/bewuethr/32/4611_2.png) [@bewuethr](https://talk.jekyllrb.com/u/bewuethr)\
**Post date:** [November 26, 2024, 2:15am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax-how-to-configure-specific-inline-and-display-math/9551/3 "2024-11-26T02:15:17Z")

</div>

Is it preferred? The [documentation](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/writing-mathematical-expressions) just says that ````math` is an alternative. Since `$$` works both with kramdown + MathJax and in Github flavoured Markdown, it seems to be the easier solution. As @george-gca says, by the time the MathJax JavaScript sees the question, the triple-backtick fence is gone.

---

<div class="post-metadata">

**Author:** ![sugab](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/sugab/32/6143_2.png) [@sugab](https://talk.jekyllrb.com/u/sugab)\
**Post date:** [November 26, 2024, 5:20am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax-how-to-configure-specific-inline-and-display-math/9551/4 "2024-11-26T05:20:40Z")

</div>

Yes; in my experience, both `$` or `$$` will struggle with some Mathjax expressions, particularly when using `{},` `_,` and `\hat`.

So using `$`` and ````math` is preferred.

---

<div class="post-metadata">

**Author:** ![george-gca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/george-gca/32/5301_2.png) [@george-gca](https://talk.jekyllrb.com/u/george-gca)\
**Post date:** [November 30, 2024, 2:37am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax-how-to-configure-specific-inline-and-display-math/9551/5 "2024-11-30T02:37:19Z")

</div>

This documentation is from GitHub. You are not rendering it using the GitHub markdown parser, you are using Jekyll. This documentation is for when you are rendering math blocks on GitHub itself. In your case you are building your page with Jekyll and then publishing to GitHub pages, which is different.

---

<div class="post-metadata">

**Author:** ![bewuethr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/bewuethr/32/4611_2.png) [@bewuethr](https://talk.jekyllrb.com/u/bewuethr)\
**Post date:** [November 30, 2024, 2:51am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax-how-to-configure-specific-inline-and-display-math/9551/6 "2024-11-30T02:51:34Z")

</div>

Yes, I was questioning if GitHub-flavoured Markdown really prefers fenced code blocks for math, and the documentation I linked to just says that it’s an alternative, and not preferred.

---

<div class="post-metadata">

**Author:** ![sugab](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/sugab/32/6143_2.png) [@sugab](https://talk.jekyllrb.com/u/sugab)\
**Post date:** [December 2, 2024, 1:53am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax-how-to-configure-specific-inline-and-display-math/9551/7 "2024-12-02T01:53:25Z")

</div>

So, that is why I am asking for, how to do that in Jekyll.

For reference, here are examples of why I said the use of backtick is preferred:

1. [mathjax - How to create multi-line equation blocks in GitHub? - Stack Overflow](https://stackoverflow.com/questions/76425932/how-to-create-multi-line-equation-blocks-in-github)
2. [math in markdown failed rendering · community · Discussion #41087 · GitHub](https://github.com/orgs/community/discussions/41087)

---

<div class="post-metadata">

**Author:** ![george-gca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/george-gca/32/5301_2.png) [@george-gca](https://talk.jekyllrb.com/u/george-gca)\
**Post date:** [December 4, 2024, 3:24pm UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax-how-to-configure-specific-inline-and-display-math/9551/8 "2024-12-04T15:24:26Z")

</div>

Yes, but again, these uses are inside GitHub’s own markdown. Jekyll doesn’t necessarily supports this. And you can change that behavior if you want. For instance, in [our template](https://alshedivat.github.io/al-folio/blog/2024/echarts/) we added support for other fenced blocks, like `echarts`.

Being clearer: when you build your site with Jekyll and upload to GitHub pages, you are not using GitHub’s markdown parser, you are using Jekyll’s. And all examples here point to someone trying to display math inside a GitHub markdown, like in a `README.md` file, not inside a GitHub page that is displayed as `your-page.github.io`. MathJax doesn’t handle itself the `math` fenced block. It was something added by the GitHub team to their markdown parser. If you check [MathJax documentation](https://docs.mathjax.org/en/latest/input/tex/delimiters.html) there’s nothing about `math` fenced blocks.

Now, why this

````js
displayMath: [['```math', '```']

````

doesn’t work? Because Jekyll build takes place before Javascript even has the chance to look at the code. So, by the time this fenced block:

````auto
```math
E = mc^2
```

````

gets to the Javascript, means Jekyll built the site, it gets like this:

```html
<div class="code-display-wrapper">
  <pre>
    <code class="language-math">E = mc^2</code>
  </pre>
</div>

```

Now, if you use

```auto
$$
E = mc^2
$$

```

it correctly converts to

![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/4/4e60449b04b32496f677ed61cb1b909259c63272.png)

Note: as stated in MathJax docs:

> By default, the TeX processor uses the LaTeX math delimiters, which are `\(...\)` for in-line math, and `\[...\]` for displayed equations. It also recognizes the TeX delimiters `$...$` for displayed equations, but it does **not** define `$...$` as in-line math delimiters. That is because dollar signs appear too often in non-mathematical settings, which could cause some text to be treated as mathematics unexpectedly. For example, with single-dollar delimiters, “… the cost is $2.50 for the first one, and $2.00 for each additional one …” would cause the phrase “2.50 for the first one, and” to be treated as mathematics since it falls between dollar signs.

So, changing to `$` delimiters might be a bad idea. You should use the default `$$`.