@phoenix-plugin-registry/brackets-markdown-preview/scripts/ExtHighlighting.js

Markdown live preview incl. detached window, code syntax highlighting, output themes, adaptive preview width, graphical checkboxes, activation on start...

/**
 * @module      ExtHighlighting
 * @file        Functions and classes to highlight code of HTML documents and HTML fragments using the 'highlight.js' library.
 * @author      Loïs Bégué
 * @license     MIT license (MIT)
 * @copyright   Copyright (c) 2017 Loïs Bégué
 */

/*global define, $, brackets, window, DOMParser */

define(function (require, exports, module) {
    "use strict";

    // Register highlight object "hljs"
    var hljs = require("lib/highlight.js/highlight.pack");

    // Register local extension modules
    var ExtUtils            = require("scripts/ExtUtils");
    var ExtLoggingUtils     = require("scripts/ExtLoggingUtils");

    // Module variables
    var currentStyleSheetFile;
    var _DOMParser;

    /**
     * Automatically highlights all source codes embeded in a '<pre><code>...</code></pre>' construct within an input html DOCUMENT.
     * The html output may be enriched with a link (statement) to a specific highlight theme style sheet .
     * Note: the 'highlight.js' library script is not required in the resulting document i.e. at the client/browser side.
     * @author Loïs Bégué
     * @param   {string} html           The source code of the HTML document to be highlighted
     * @param   {string} styleSheetFile The path/URI to the style sheet to be applied for highlighted sources
     * @returns {string} The source code of the HTML document including highlighted codes
     */
    function highlightHTMLDocument(html, styleSheetFile){
        // Update the globaly defined Stylesheet for highlighting, if necessary
        if (styleSheetFile) { currentStyleSheetFile = styleSheetFile; };
        // Parse the original document and highlight all "pre code" marked blocks
        let originalDocument = _DOMParser.parseFromString(html, "text/html");
        let docType          = ExtUtils.HTMLDocumentDoctype2String(originalDocument);
        let docContent = $(originalDocument);
        docContent.find("pre code").each( function(i, block){ hljs.highlightBlock(block); });
        originalDocument.body.innerHTML = docContent.find("body").html();
        if (currentStyleSheetFile) { ExtUtils.insertStyleSheetLinkIntoHTMLDocument(originalDocument, currentStyleSheetFile); }
        // Since the function "outerHTML do not give the doctype back, we have t provide a new one.
        return docType + "\n" + originalDocument.documentElement.outerHTML;
    }

    /**
     * Automatically highlights all source codes embeded in a '<pre><code>...</code></pre>' construct within an input html FRAGMENT.
     * @author Loïs Bégué
     * @param   {string} htmlFragment The source code of the HTML fragment to be highlighted
     * @returns {string} The source code of the HTML fragment including highlighted codes
     */
    function highlighthtmlFragment(htmlFragment){
        let $fragment     = $("<div>" + htmlFragment + "</div>");
        $fragment.find("pre code").each(function(i, block){ hljs.highlightBlock(block); });
        return $fragment.html();

        /* ALTERNATIVE
        _createDOMParser();
        var originalFragment = _DOMParser.parseFromString(htmlFragment,"text/html");
        var fragment        = originalFragment.body.innerHTML;
        var $fragment     = $("<div>" + fragment + "</div>");
        
        $fragment.find("pre code").each(function(i, block){        
            hljs.highlightBlock(block);
        });
        
        return $fragment.html();        
        */
    }

    /**
     * Self test function to check the module functionality (also suitable as usage example)
     * @author Loïs Bégué
     */
    function selfTest(){
        let test = ExtLoggingUtils.createLogCase("Self Test of the module 'ExtHighlighting'", true, false);
        let testHTMLFragment = "<pre><code class='javascript'>function echo(voice){ console.log('ECHO: ' + voice); return voice; }</code></pre>";
        test.start();
        test.log("Input = fragment");
        test.log(testHTMLFragment);
        test.log("outut = highlighted fragment");
        test.log(highlighthtmlFragment(testHTMLFragment));
        let testHTMLDocument = "<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'><html><head><title>XYZ (HIGHLIGHT)</title></head><body>" +
            "<h1>Test HIGHLIGHTING II</h1><pre><code>function doSomething() {console.log('doing something');}</code></pre></body></html>";
        test.log("Input = document");
        test.log(testHTMLDocument);
        test.log("outut = highlighted document");
        test.log(highlightHTMLDocument(testHTMLDocument));
        test.end();
    }

    exports.styleSheetFile          = currentStyleSheetFile;
    exports.highlightHTMLDocument   = highlightHTMLDocument;
    exports.highlighthtmlFragment   = highlighthtmlFragment;
    exports.selfTest                = selfTest;

    _DOMParser = new DOMParser();
});