# Jekyll and Mathjax

**URL:** <https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514>\
**Category:** Help\
**Created:** [January 18, 2021, 1:25am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514 "2021-01-18T01:25:08Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![comb](https://avatars.discourse-cdn.com/v4/letter/c/e0b2c6/32.png) [@comb](https://talk.jekyllrb.com/u/comb)\
**Post date:** [January 18, 2021, 1:25am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/1 "2021-01-18T01:25:08Z")

</div>

I use this code to inject mathjax on site.

```auto
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    jax: ["input/TeX","input/MathML","output/SVG", "output/CommonHTML"],
extensions: ["tex2jax.js","mml2jax.js","MathMenu.js","MathZoom.js", "CHTML-preview.js"],
TeX: {
  extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
},
  tex2jax: {
      inlineMath: [['$','$'], ["\\(","\\)"] ],
      displayMath: [['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true,
      processEnvironments: true
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
  });
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>

```

I use formulas with underscore.  
If I use `$\begin{aligned} \mathbb{E}_{\mathrm{x} \sim P} [f(x)]= \sum_{x} P(x) f(x) \end{aligned}$` it fails

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

If I use `$$\begin{aligned} \mathbb{E}_{\mathrm{x} \sim P} [f(x)]= \sum_{x} P(x) f(x) \end{aligned}$$` it works.

The reason why fails is `em` tag:

```auto
$\begin{aligned} \mathbb{E}<em>{\mathrm{x} \sim P} [f(x)]= \sum</em>{x} P(x) f(x) \end{aligned}$

```

While I can fix this with using `\_` this will brake my formula in VS Code.

Here is the [URL](https://dejanbatanjac.github.io/expectation).

I would like to know:

- if it is possible to suppress `_` inside the `$` … `$` somehow?
- why it works for `$$` … `$$` and not for `$` … `$` .

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [January 18, 2021, 9:18am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/2 "2021-01-18T09:18:01Z")

</div>

Two suggestions.

Put your code inside an HTML file, so markdown like `_` is not evaluated.

For example

`_includes/math.html`

```auto
<script type="text/x-mathjax-config">
// ...
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>

```

Use in a markdown or HTML page (or layout) as:

```auto
{% include math.html %}

```

* * *

Put your code inside a `raw` tag. This helps to stop Liquid templating e.g. `{{ }}` is Moustache.js syntax that must not be evaluated by Jekyll.  
I don’t know if this will prevent `_foo_` from becoming `<em>foo</em>`

```auto
This code will be evaluated.

{{ site.description }}

{% raw %}
This code will stay as plain text and will not be evaluated by Jekyll

{{ site.description }}
{% endraw %}

This code will also be evaluated.

{{ site.description }}

```

```auto

```

---

<div class="post-metadata">

**Author:** ![comb](https://avatars.discourse-cdn.com/v4/letter/c/e0b2c6/32.png) [@comb](https://talk.jekyllrb.com/u/comb)\
**Post date:** [January 18, 2021, 9:40am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/3 "2021-01-18T09:40:21Z")

</div>

> [@MichaelCurrin](#):
>
> `{{ }}`

Using this {{ … }} syntax to inject math formula in will produce:

```auto
The page build failed for the `master` branch with the following error:
The variable `{{ $\begin{aligned}` on line 7 in `_posts/2021-01-17-Expectation.md` was not properly closed with `}}`.

```

Speaking of that attempt is there a way to disable liquid somehow?

I used at first the `span` and `div` tags but it failed disabling the liquid to interpret the `_`.

The other solution you proposed looks like a solution but is complicated.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [January 18, 2021, 10:00am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/4 "2021-01-18T10:00:11Z")

</div>

> [@comb](#):
>
> Using this {{ … }} syntax to inject math formula in will produce:

As I covered above, the _raw_ tag will disable Liquid so `{{ }}` will be shown literally and you won’t get errors

```auto
{% raw %}
<script type="text/x-mathjax-config">
// ...
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>
{% endraw %}

```

And your formula

````
## Magic formula

{% raw %}
```
$\begin{aligned} \mathbb{E}_{\mathrm{x} \sim P} [f(x)]= \sum_{x} P(x) f(x) \end{aligned}$ 
```
{% endraw %}

````

Or using HTML and the `pre` preformat tag.

```
<h2>Magic formula</h2>

{% raw %}
<pre>$\begin{aligned} \mathbb{E}_{\mathrm{x} \sim P} [f(x)]= \sum_{x} P(x) f(x) \end{aligned}$</pre>
{% endraw %}

```

---

<div class="post-metadata">

**Author:** ![comb](https://avatars.discourse-cdn.com/v4/letter/c/e0b2c6/32.png) [@comb](https://talk.jekyllrb.com/u/comb)\
**Post date:** [January 18, 2021, 10:08am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/5 "2021-01-18T10:08:28Z")

</div>

`{% raw %}` seams it is not working inside the .md file, it would work from .html, but for articles I use .md files. I wonder if I can use `{% raw %}` from .md somehow.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [January 18, 2021, 10:09am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/6 "2021-01-18T10:09:19Z")

</div>

Using `includes` is not complicated I think.

Instead of putting your script tag on your page, you put it in a separate file and import or “include” it so it gets added to the current page. This also makes it more reusuable.

Another approach. If you are happy to have your script tags on _every_ page, then put them in a layout - which is HTML and will _not_ try and evaluate underscores as markdown.

e.g.

`_layouts/default.html`

```auto
<head>

  <script>
  // ...
  </script>
  <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>

</head>

<body>
  {{ content }}
</body>

```

Note that `type` defaults to `text/javascript`, so you can leave it out.

For performance reasons, it doesn’t matter whether you actually use the script on a page after it is loaded. The browser will cache the external `.js` script so that on a navigation click, the next page will load faster because that asset is already in the browser.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [January 18, 2021, 10:18am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/7 "2021-01-18T10:18:18Z")

</div>

Can you post a snippet or link?

`{% raw %}` does indeed work inside a `.md` file - I use it regularly.

For example [cheatsheets/jekyll/code-blocks/basics.md](https://github.com/MichaelCurrin/dev-cheatsheets/blob/8696cff2485aafd41f33307e059f12e5a202a04b/cheatsheets/jekyll/code-blocks/basics.md)

````
{% raw %}
```liquid
{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}
```
{% endraw %}

````

Here you see the `highlight` tag rendered as literal text.

> **[Basics](https://michaelcurrin.github.io/dev-cheatsheets/cheatsheets/jekyll/code-blocks/basics.html)**
>
> Backticks vs highlight tag

---

<div class="post-metadata">

**Author:** ![comb](https://avatars.discourse-cdn.com/v4/letter/c/e0b2c6/32.png) [@comb](https://talk.jekyllrb.com/u/comb)\
**Post date:** [January 18, 2021, 10:27am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/8 "2021-01-18T10:27:09Z")

</div>

Hi, it looks like using `div` tag is working now. The only trick is that `div` tag must not be close to the formula, there should be the space in between. When using the below code it won’t work.

```auto
---
published: true
layout: post
title: Expectation
permalink: /expectation
---

In here I will set some notation of the mathematical expectation of discrete and continuous random variable (RV).

### Discrete RV expectation

In case of the discrete variable the expectation, or expected value, of some function $f(x)$ with respect to a probability distribution $P(x)$ is the average, or mean value, that $f$ takes on when $x$ is drawn from $P$:

{% raw %}

$\begin{aligned} \mathbb{E}_{\mathrm{x} \sim P} [f(x)]= \sum_{x} P(x) f(x) \end{aligned}$
{% endraw %}

$\mathrm{x} \sim P$ means $\mathrm{x}$ is drawn from distribution $P(x)$ or just from $P$. Inside the $[\ldots]$ brackets we should have some function $f(x)$, or in special case just $x$.

### Continuous RV expectation

For continuous variables it is computed with the integral:

$\mathbb{E}_{\mathrm{x} \sim p}[f(x)]=\int p(x) f(x) d x$

If the identity of the distribution is clear from the context we may write simple:

$\mathbb{E}_{\mathrm{x} }[f(x)]$

If the random variable is clear from the context we may write:

$\mathbb{E}[f(x)]$

By default, we can assume that

$\mathbb{E}[\cdot]$

averages over the values of all the random variables inside the brackets. 

Likewise, when there is no ambiguity, we may omit the square brackets:

$\mathbb{E}$

Expectations are linear:

$\mathbb{E} \_ {\mathrm{x}}[\alpha f(x)+\beta g(x)]=\alpha \mathbb{E}_{\mathrm{x}}[f(x)]+\beta \mathbb{E}_{\mathrm{x}}[g(x)]$

We define the <span> $\mathbb X = \{{\pmb x^{(1)}}, \ldots ,{\pmb x^{(m)}}\}$ </span>

$p_{data}(\mathrm x)$

$p_{model}(\pmb {\mathrm x}; \pmb \theta)$

$p_{model}(\pmb {x}; \pmb \theta)$ maps any concrete configuration to $p_{data}(\pmb {x})$

$\theta_{ML} = arg max$

$\begin{aligned} \boldsymbol{\theta}_{\mathrm{ML}} &=\underset{\boldsymbol{\theta}}{\arg \max } p_{\text {model }}(\mathbb{X} ; \boldsymbol{\theta}) \\ &=\underset{\boldsymbol{\theta}}{\arg \max } \prod_{i=1}^{m} p_{\text {model }}\left(\boldsymbol{x}^{(i)} ; \boldsymbol{\theta}\right) \end{aligned}$

For numeric stability:

$\boldsymbol{\theta}_{\mathrm{ML}}=\underset{\boldsymbol{\theta}}{\arg \max } \sum_{i=1}^{m} \log p_{\text {model }}\left(\boldsymbol{x}^{(i)} ; \boldsymbol{\theta}\right)$

Defined by train data:

$\boldsymbol{\theta}_{\mathrm{ML}}=\underset{\boldsymbol{\theta}}{\arg \max } \mathbb{E}_{\mathbf{x} \sim \hat{p}_{\text {data }}} \log p_{\text {model }}(\boldsymbol{x} ; \boldsymbol{\theta})$

Final:

$D_{\mathrm{KL}}\left(\hat{p}_{\text {data }} \| p_{\text {model }}\right)=
\mathbb{E}_{\mathbf{x} \sim \hat{p}_{\text {data }}}
\left[\overbrace{\log \hat{p}_{\text {data }}(\pmb{x})}^{\ data \ generating \ process}-\log p_{\text {model }}(\pmb{x})\right]$

Important part: 

$\mathbb{E}_{\mathbf{x} \sim \hat{p}_{\text {data }}}\left[-\log p_{\text {model }}(\pmb{x})\right]$

where:

$\hat{p}_{\text {data }}$ is empirical distribution, ${p}_{\text {data }}$ is true distribution

Once we have the expectation we can define the variance and covariance.

## Variance

Variance give us the measure how much values of a function of a random variable $\text x$ vary as we sample different values of $\mathrm x$ from it's probability distribution.

$\operatorname{Var}(f(x))=\mathbb{E}\left[(f(x)-\mathbb{E}[f(x)])^{2}\right]$

## Covariance

The covariance gives some sense of how much two values are linearly related to each other, as well as the scale of these variables:

$\operatorname{Cov}\left(f(x), g(y)\right)=\mathbb{E}[(f(x)-\mathbb{E}[f(x)])(g(y)-\mathbb{E}[g(y)])]$

```

---

<div class="post-metadata">

**Author:** ![comb](https://avatars.discourse-cdn.com/v4/letter/c/e0b2c6/32.png) [@comb](https://talk.jekyllrb.com/u/comb)\
**Post date:** [January 18, 2021, 10:32am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/9 "2021-01-18T10:32:48Z")

</div>

While `div` tag works I wonder, why I may not use `div` tag with `$$` … `$$` and why I need to use `div` tag with `$` … `$`. Is there something like a setting I may use.

I wonder if there is some explanation possible checking the Jekyll source.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [January 18, 2021, 11:40am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/10 "2021-01-18T11:40:45Z")

</div>

I don’t know about $ or $$. They aren’t used in Jekyll.

It would be nice to see how you used div

You can use div or span to force markdown to HTML

```auto
<div>
## this will **render** as plain text and not treated as markdown.
</div>

```

Beware that if you add an empty line then it goes back to markdown

```auto
<div>

## this will **render** as markdown.

</div>

```

Again, I would use triple backticks or pre tag to display your formula as monospaced code that will not get treated as markdown

````
```
_This will render as **plain** text not markdown_
```
````

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [January 18, 2021, 11:44am UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/11 "2021-01-18T11:44:57Z")

</div>

Also sure to close your raw tag with endraw

---

<div class="post-metadata">

**Author:** ![comb](https://avatars.discourse-cdn.com/v4/letter/c/e0b2c6/32.png) [@comb](https://talk.jekyllrb.com/u/comb)\
**Post date:** [January 18, 2021, 12:11pm UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/12 "2021-01-18T12:11:18Z")

</div>

> [@MichaelCurrin](#):
>
> would be nice to see how you used div

```auto
<div>

$\begin{aligned} \mathbb{E}_{\mathrm{x} \sim P} [f(x)]= \sum_{x} P(x) f(x) \end{aligned}$
</div>

```

This is exactly what I used.

What I further noticed `span` tag has no influence at all.

---

<div class="post-metadata">

**Author:** ![comb](https://avatars.discourse-cdn.com/v4/letter/c/e0b2c6/32.png) [@comb](https://talk.jekyllrb.com/u/comb)\
**Post date:** [January 18, 2021, 12:12pm UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/13 "2021-01-18T12:12:48Z")

</div>

> [@MichaelCurrin](#):
>
> Also sure to close your raw tag with endraw

Yeah, I did that, you may check the example I shared:

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

---

<div class="post-metadata">

**Author:** ![comb](https://avatars.discourse-cdn.com/v4/letter/c/e0b2c6/32.png) [@comb](https://talk.jekyllrb.com/u/comb)\
**Post date:** [January 18, 2021, 12:14pm UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/14 "2021-01-18T12:14:47Z")

</div>

> [@MichaelCurrin](#):
>
> I don’t know about $ or $$. They aren’t used in Jekyll.

Great feedback! I may actually check what MathJax forum has to say.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [January 18, 2021, 12:44pm UTC](https://talk.jekyllrb.com/t/jekyll-and-mathjax/5514/15 "2021-01-18T12:44:25Z")

</div>

> [@comb](#):
>
> Yeah, I did that, you may check the example I shared:

Oh yes sorry. I was looking for one at the bottom of the page. I like to escape the entire page usually so i don’t need raw tags all over