Only load highlght css when needed

templates/include/render.tmpl

@@ -1,25 +1,26 @@
 <!-- Miscelaneous render related template parts we use multiple times -->
 {{define "highlighting"}}
-  <!-- TODO: make this conditional on presence of code blocks -->
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css"/>
-
   <script>
     // TODO: this feels more like a mutation observer
     addEventListener('DOMContentLoaded', function () {
         var hlbaseUri="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/";
-        var x = document.querySelectorAll("code[class^='language-']");
+        var x=document.querySelectorAll("code[class^='language-']");
         if (x.length > 0 ) {
     	    // We have blocks to be highlighted, stuff, so we load css + js
-    	    var s=document.createElement('script');
-    	    s.type="text/javascript"; s.src= hlbaseUri + "highlight.min.js"; s.async=true;
+	    var st=document.createElement('link');
+	    st.rel="stylesheet"; st.href=hlbaseUri + "styles/atom-one-light.min.css";
+	    document.getElementsByTagName('head')[0].appendChild(st);
+
+    	    var sc=document.createElement('script');
+    	    sc.type="text/javascript"; sc.src=hlbaseUri + "highlight.min.js"; sc.async=true;
 
     	    // Here's the crux, we need to react on load event for this new element to make it work.
-    	    s.onload = ()  => { highlight(x) }
-    	    document.getElementsByTagName('head')[0].appendChild(s);
+    	    sc.onload=()  => { highlight(x) }
+    	    document.getElementsByTagName('head')[0].appendChild(sc);
 
     	    // Gives a set of nodes, run highlighting on them
     	    function highlight(nodes) {
-		for (i=0; i<nodes.length; i++) {
+		for (i=0; i < nodes.length; i++) {
     		    hljs.highlightBlock(nodes[i]);
 		}
     	    }