mirror of
https://github.com/writeas/writefreely
synced 2024-12-12 08:36:14 +01:00
f40ce14fb2
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.
77 lines
2.5 KiB
Cheetah
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}}
|