<sub><sup>19/08/2023</sup></sub>

<script id="MathJax-script" rel="preload" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

#### How to display LaTeX equations with HTML?

I wanted to add some equations for my [blog post](/entries/but_what_is_nucleus_sampling_anyway.html){target="_blank"} about Nucleus Sampling. Searched the web for a way to do it, did not find anything that worked without altering the `pandoc` command. So I decided to write this post.

The solution is to embed [MathJax](https://www.mathjax.org/){target="_blank"} in to the page and escape every back slash in the equation with another back slash. So you would add this line **directly** to your actual blog entry, i.e. markdown file:

```html
<script id="MathJax-script" 
  rel="preload" 
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
```

And then you can add equations like this:

```html

\\[
    \\sum_{x\\in V^{p}} P(x|x_{1:i-1})\\geq p
\\]

```

And it will look like this:

\\[
    \\sum_{x\\in V^{p}} P(x|x_{1:i-1})\\geq p
\\]


I didn't like the way it's centered, this is not a scientific paper, so if you want to align it to the left, you can wrap the equation, again, directly in the markdown file with a `div` tag and add some CSS:

```html

<div style="display: flex; justify-content: flex-start; padding-left: 2em;">

\\[
    \\sum_{x\\in V^{p}} P(x|x_{1:i-1})\\geq p
\\]

</div>

```

And it will look like this:

<div style="display: flex; justify-content: flex-start; padding-left: 2em;">

\\[
    \\sum_{x\\in V^{p}} P(x|x_{1:i-1})\\geq p
\\]

</div>

*PS*: Of course, you can also add the CSS to your stylesheet. :^)