19/08/2023
How to display LaTeX equations with HTML?
I wanted to add some equations for my blog post 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 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:
<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:
\\[
\\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:
<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:
\[ \sum_{x\in V^{p}} P(x|x_{1:i-1})\geq p \]
PS: Of course, you can also add the CSS to your stylesheet. :^)