Tag: scripts

The script loading is asyncronous, so when hljs.initHighlightingOnLoad() is called the scripts are not loaded yet.

Alternative 1

You can modify your loadScript() function to make it work with promises, which resolve when the script is loaded (taken from here):

function loadScript(url) {    
    return new Promise(function(resolve, reject) {
        var script = document.createElement("script");
        script.onload = resolve;
        script.onerror = reject;
        script.src = url;
        document.getElementsByTagName("head")(0).appendChild(script);
    });
}

Now you can call your code and be sure that all libraries are loaded before calling hljs.initHighlightingOnLoad():

(async function init() {
  await loadScript('https://polyfill.io/v3/polyfill.min.js?features=es6');
  await loadScript('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js')
  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js')
  
  hljs.initHighlightingOnLoad();
})()

Alternative 2

You can modify your loadScript() function to make it load the scripts using defer and add an optional onload handler that you can use to call hljs.initHighlightingOnLoad():

function loadScript(url, onload)
{    
    var head = document.getElementsByTagName('head')(0);
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.async = false;
    script.onload = onload;
    head.appendChild(script);
}

loadScript('https://polyfill.io/v3/polyfill.min.js?features=es6')
loadScript('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js')
loadScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js', () => {hljs.initHighlightingOnLoad()})