1
0
mirror of https://github.com/writeas/writefreely synced 2024-12-12 08:36:14 +01:00
writefreely/templates/include/post-render.tmpl
Marcel van der Boom f40ce14fb2 Resolve an edge case where last language has error
If there are multiple language blocks on a page, we set the
onload on the last one to load all highlighting at once.

If the last language block has an error, the onload would
never fire and thus all blocks would not be highlighted.

The simplest resolution is to fire the callback regardless. We've
already loaded everything so running the callback is not causing any
performance hit which is relevant I think.
2019-03-05 14:36:40 +01:00

77 lines
2.5 KiB
Cheetah

<!-- 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}}