writefreely/templates/include/post-render.tmpl

<!-- Miscelaneous render related template parts we use multiple times -->
{{define "highlighting"}}
<script>
  // TODO: this feels more like a mutation observer
  addEventListener('DOMContentLoaded', function () {
    var hlbaseUri = "/js/";
    var lb = document.querySelectorAll("code[class^='language-']");

    // Set langs to the langs that are included by default (for now: 'common set' on CDN)
    var langs = [];

    // Given a set of nodes, run highlighting on them
    function highlight(nodes) {
      for (i=0; i < nodes.length; i++) {
          hljs.highlightBlock(nodes[i]);
      }
    }

    // Given a array of URIs, load them in order
    function loadLanguages(uris, callback) {
      uris.forEach(function(uri) {
        var sc = document.createElement('script');
        sc.src = uri;
        sc.async = false; // critical?
	// Set callback on last script
        if (uris.indexOf(uri) == uris.length-1) {
	  // Set callback regardless
	  // so we're sure it will run if last element had error
	  // (we only know after loading, so we've had load time already)
          sc.onload  = callback; sc.onerror = callback;
        }
        document.head.appendChild(sc);
      });
    }

    // We don't have to do anything if there are no language blocks
    if (lb.length > 0) {
      // We have blocks to be highlighted, so we load css
      var st = document.createElement('link');
      st.rel = "stylesheet";
      st.href = "/css/lib/atom-one-light.min.css";
      document.head.appendChild(st);

      // Construct set of files to load, in order
      var jss = [hlbaseUri + "highlight.min.js"];
      // Check what we need to load
      for (i=0; i < lb.length; i++) {
        lang = lb[i].className.replace('language-','');
        lurl = hlbaseUri + "highlightjs/" + lang + ".min.js";
        if (!(langs.includes(lang) || jss.includes(lurl))) {
          jss.push(lurl);
        }
      }
      // Load files in order, higlight on last load
      loadLanguages(jss, () => {highlight(lb)});
    }
  });
</script>
{{end}}

<!-- Include mathjax configuration -->
{{define "mathjax"}}
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { fonts: ["TeX"] }
  });
</script>
<script type="text/javascript" src="/js/mathjax/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
{{end}}