Microlight.js TD v.2

by neohiro79

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/styles/googlecode.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
<!DOCTYPE html>
<html>
<head>

</head><body onload="iniDone()"> 
  
<h1>Microlight.js Testcases:</h1>

<b>HTML, CSS &amp; JS:</b>

<!--
<pre><code><script>function xyz(){}; var testing = true;</script></code></pre>
<pre><code>function xyz(){}; var testing = true;</code></pre>
-->

<div class="microlight">

      &lt;!-- this is a html comment --&gt;
      &lt;!-- this is a html comment 
           across multiple lines 
      --&gt;   
      &lt;p&gt;
      This is a paragraph
      &lt;/p&gt;
     
     
      &lt;style&gt;
    
      /* this is a css and a js comment */
      /* this is a css and js comment 
         across multiple lines
      */
      html { display : block; }

      &lt;/style&gt;
    
    
      &lt;script&gt;
    
      // this is a javascript comment
      /* this is a css and a js comment */
      /* this is a css and js comment 
         across multiple lines
      */

      function iniDone(){

            console.log("and this is some javascript itself");
      }
      
      &lt;/script&gt;
   
</div>
  
</body>
</html>

CSS

/* https://asvd.github.io/microlight/ */

.microlight {
    font-family : monospace;
    white-space : pre;
    background-color : white;
    color : blue;    
}

JavaScript

/**
 * @fileoverview microlight - syntax highlightning library
 * @version 0.0.7
 *
 * @license MIT, see http://github.com/asvd/microlight
 * @copyright 2016 asvd <[email protected]>
 *
 * Code structure aims at minimizing the compressed library size
 */


(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['exports'], factory);
    } else if (typeof exports !== 'undefined') {
        factory(exports);
    } else {
        factory((root.microlight = {}));
    }
}(this, function (exports) {
    // for better compression
    var _window       = window,
        _document     = document,
        appendChild   = 'appendChild',
        test          = 'test',
        
        // style and color templates
        textShadow    = ';text-shadow:',
        opacity       = 'opacity:.',
        _0px_0px      = ' 0px 0px ',
        _3px_0px_5    = '3px 0px 5',
        brace         = ')',

        i,
        microlighted,
        el;  // current microlighted element to run through


    
    var reset = function(cls) {
        // nodes to highlight
        microlighted = _document.getElementsByClassName(cls||'microlight');


				// Tokenize 
        for (i = 0; el = microlighted[i++];) {
        
            var text  = el.textContent,
            
                pos   = 0,       // current position
                next1 = text[0], // next character
         /** /   next2 = text[1], // next character			/**/														// ---- das hier habe ich eingef. !
                chr   = 1,       // current character
                prev1,           // previous character
                prev2,           // the one before the previous
                token =          // current token content
                
                el.innerHTML = '',  // (and cleaning the node)
                
                
                // current token types:
                
                //  0: anything else (whitespaces / newlines)
           ...