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-']");


    // Custom aliasmap
    var aliasmap = {
      "elisp"      : "lisp",
      "emacs-lisp" : "lisp",
      "c"          : "cpp",
      "cc"         : "cpp",
      "h"          : "cpp",
      "c++"        : "cpp",
      "h++"        : "cpp",
      "hpp"        : "cpp",
      "hh"         : "cpp",
      "hxx"        : "cpp",
      "cxx"        : "cpp",
      "sh"         : "bash",
      "js"         : "javascript",
      "jsx"        : "javascript",
      "html"       : "xml"
    };

    // 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-','');
        // Support the aliases specified above
        if (aliasmap[lang]) lang = aliasmap[lang];
        lurl = hlbaseUri + "highlightjs/" + lang + ".min.js";
        if (!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>
  MathJax = {
      tex: {
        inlineMath: [
          ["\\(", "\\)"],
          ['$', '$'],
        ],
        displayMath: [
          ['$$', '$$'],
          ['\\[', '\\]'],
        ],
      },
    };
</script>
<script type="text/javascript" id="MathJax-script" src="/js/mathjax/tex-svg-full.js" async>
</script>
{{end}}