katex.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css" integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js" integrity="sha384-pK1WpvzWVBQiP0/GjnvRxV4mOb0oxFuyRxJlk6vVw146n3egcN5C925NCP7a7BY8" crossorigin="anonymous"></script>
<script>
  "use strict";
  document.addEventListener("DOMContentLoaded", function () {
      var maths = document.getElementsByClassName("language-math");
      for (var i=0; i<maths.length; i++) {
          var el = maths[i];
          katex.render(el.innerText, el, {displayMode: true});
      }

      var codes = document.getElementsByTagName("code");
      for (i=0; i<codes.length; i++) {
          el = codes[i];
          if (el.classList.contains("language-math")) continue;
          if (el.classList.contains("language-inline-math")) {
              katex.render(el.innerText, el);
              continue;
          }

          var parent = el.parentNode;
          if (parent.nodeName.toLowerCase() === "pre") continue;
          // TODO: Can this be done with DOM manipulation rather than string manipulation?
          // https://stackoverflow.com/q/48438067/3019990
          var inlineMath = "$" + el.outerHTML + "$";
          if (parent.innerHTML.indexOf(inlineMath) !== -1) {
              el.classList.add("language-inline-math");
              parent.innerHTML = parent.innerHTML.replace("$" + el.outerHTML + "$", el.outerHTML);
              i--;
          }
      }
  });
</script>