How to support latex in github-pages?

Question

I use jekyll to write post and show it in github-pages. My source file is writen with markdown.

How can I insert formula into the markdown file?

Answer 1

The best way right now IMO is to use the MathJax backend (which is part of kramdown, i.e. available on GitHub Pages) and then use KaTeX on the frontend for rendering. KaTeX is more lightweight and faster than MathJax, which makes it a better fit for a blog theme.

I'm using this technique with great success for my Jekyll theme Hydejack. Feel free to use it on your own site, by doing the following:

In config.yml, set the math engine to mathjax:

kramdown:
  math_engine: mathjax

Add KaTeX to your site and also make sure the following code runs sometime after it has loaded.

const mathBlocks = document.querySelectorAll('script[type^="math/tex"]');
Array.from(mathBlocks).forEach((el) => {
  const tex = el.textContent.replace("% ", "");
  el.outerHTML = window.katex.renderToString(tex, {
    displayMode: el.type === "math/tex; mode=display",
  });
});

The actual code I'm using is slightly more complicated. You can check it out on GitHub.