Writefreely
/
writefreely
mirror of https://github.com/writeas/writefreely
1
0
Fork 0
Code Issues Releases Wiki Activity

Only load highlght css when needed

This commit is contained in:
Marcel van der Boom 2018-11-22 15:01:11 +01:00
parent add06ee56c
commit e400fe1649
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
templates/include/render.tmpl
View File

@ -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]);
}
}