Markdown fenced math blocks in Neovim and KaTeX

The ```math fenced math code block syntax is an alternative to the traditional $$ or \[ syntax for \begin{display} supported by GitHub.

I learned about it today while working on a small (~200 line) shell script to serve Markdown files as live-reloading webpages w/ KaTeX support: markd.

To use the LaTeX syntax highlighter for triple-backtick ```math fenced code blocks in Neovim, place this at ~/.config/nvim/after/queries/markdown/injections.scm:

; extends
; Use :Inspect, :InspectTree, and :EditQuery

; Highlight ```math fenced code blocks using the LaTeX highlighter.
(fenced_code_block
  (info_string (language) @_lang)
  (code_fence_content) @injection.content
  (#eq? @_lang "math")
  (#set! injection.language "latex"))

I use the following to render KaTeX on this blog and in markd:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
      integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+"
      crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
        integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg"
        crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
        integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk"
        crossorigin="anonymous"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // HACK: https://github.com/KaTeX/KaTeX/issues/437#issuecomment-1147314526
  document.body.innerHTML = document.body.innerHTML.replace(/\\\$/g, '<span>$</span>');
  renderMathInElement(document.body, {
    delimiters: [
      {left: '$$', right: '$$', display: true},
      {left: '$', right: '$', display: false},
      {left: '\\[', right: '\\]', display: true},
      {left: '\\(', right: '\\)', display: false},
    ],
    supportEscapedSpecialCharsInText: true,
    throwOnError: false
  });

  // ```math
  document.querySelectorAll("pre:has(> code.language-math)").forEach((el) => {
    const tex = el.innerText;
    katex.render(tex, el, {
      throwOnError: false,
      displayMode: true
    });
    el.classList.add("katex-display");
  });
});
</script>

Note that this assumes your Markdown to HTML compiler will output ```math blocks as <pre><code class="language-math">. That’s what cmark does.