[markdown preview add-ons for HTML header] #js #markdown

md-addons.js

function $$( selector, context ) {
return ( context || document ).querySelectorAll( selector )
}

var highlightCode = function() {

    var cssId = 'myCss';  // you could encode the css path itself to generate id..
    if (!document.getElementById(cssId))
    {
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id   = cssId;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/monokai-sublime.min.css';
        link.media = 'all';
        head.appendChild(link);
    }

   // using highlight
    var mermaids = [];
    [].push.apply(mermaids, document.getElementsByClassName('mermaid'));
    for (i = 0; i < mermaids.length; i++) {
        mermaids[i].className = 'nohighlight mermaid';
    }

   hljs.initHighlightingOnLoad();
   var blocks = $$( 'pre > code' )
    for( var i = 0; i < blocks.length; i++ ) {
        try { hljs.highlightBlock( blocks[i] ) } catch( error ) {}
    }
};

var bigfootCode1 = function() {
    var cssId = 'bigfootcss'; 
    if (!document.getElementById(cssId))
    {
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id   = cssId;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot-number.min.css';
        link.media = 'all';
        head.appendChild(link);
    }

   $.bigfoot();
};

var bigfootCode2 = function() {
   loadScript("https://cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot.min.js", bigfootCode1);
};

var mermaidCode = function() {
    mermaid.init(undefined, $("code.mermaid"));
};


function loadScript(url, callback)
{
    // Adding the script tag to the head
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;


    // Then bind the event to the callback function.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Load Script
    head.appendChild(script);
}

loadScript("https://code.jquery.com/jquery-1.12.4.min.js", bigfootCode2);
loadScript("https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.1.2/mermaid.min.js", mermaidCode);
loadScript("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML");
loadScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js", highlightCode);