add HTML renderer

Author: joshgoebel

src/highlight.js

@@ -452,9 +452,8 @@ const HLJS = function(hljs) {
           list.unshift(current.className)
         }
       }
-      list.forEach((item) => { emitter.openNode(item) }
-    )
-  }
+      list.forEach(item => emitter.openNode(item))
+    }
 
     var lastMatch = {};
     function processLexeme(text_before_match, match) {
@@ -522,28 +521,30 @@ const HLJS = function(hljs) {
     }
 
     compileLanguage(language);
-    var current;
     var top = continuation || language;
     var continuations = {}; // keep continuations for sub-languages
-    var result = '';
+    var result;
     var emitter = new TokenTree();
     processContinuations();
     var mode_buffer = '';
     var relevance = 0;
+    var match, processedCount, index = 0;
+
     try {
-      var match, count, index = 0;
       while (true) {
         top.terminators.lastIndex = index;
         match = top.terminators.exec(codeToHighlight);
         if (!match)
           break;
-        count = processLexeme(codeToHighlight.substring(index, match.index), match);
-        index = match.index + count;
+        let beforeMatch = codeToHighlight.substring(index, match.index);
+        processedCount = processLexeme(beforeMatch, match);
+        index = match.index + processedCount;
       }
       processLexeme(codeToHighlight.substr(index));
       emitter.closeAllNodes();
-      emitter.collapse();
+      emitter.finalize();
       result = new HTMLRenderer(emitter, options).value();
+
       return {
         relevance: relevance,
         value: result,

src/lib/html_renderer.js

@@ -0,0 +1,42 @@
+const SPAN_CLOSE = '</span>';
+
+import {escapeHTML} from './utils';
+
+export default class HTMLRenderer {
+  constructor(tree, options) {
+    this.buffer = "";
+    this.classPrefix = options.classPrefix;
+    tree.walk(this);
+  }
+
+  // renderer API
+
+  addText(text) {
+    this.buffer += escapeHTML(text)
+  }
+
+  openNode(node) {
+    let className = node.kind;
+    if (!node.kind) return;
+
+    if (!node.sublanguage)
+      className = `${this.classPrefix}${className}`;
+    this.span(className);
+  }
+
+  closeNode(node) {
+    if (!node.kind) return;
+
+    this.buffer += SPAN_CLOSE;
+  }
+
+  // helpers
+
+  span(className) {
+    this.buffer += `<span class="${className}">`
+  }
+
+  value() {
+    return this.buffer;
+  }
+}

src/lib/token_tree.js

@@ -3,12 +3,15 @@ export default class TokenTree {
     this.rootNode = { root: true, children: [] };
     this.stack = [ this.rootNode ];
   }
+
   get top() {
     return this.stack[this.stack.length - 1];
   }
+
   add(node) {
     this.top.children.push(node);
   }
+
   addKeyword(text, kind) {
     if (text === "") { return; }
 
@@ -17,37 +20,42 @@ export default class TokenTree {
       children: [ text ]
     });
   }
+
   addText(text) {
     if (text === "") { return; }
 
     this.add(text);
   }
+
   addSublanguage({rootNode}, name) {
     let node = rootNode;
     delete node.root; // no longer a root node
     node.kind = name;
     node.sublanguage = true;
     this.add(node);
   }
+
   openNode(kind) {
     var node = { kind, children: [] };
     this.add(node);
     this.stack.push(node);
   }
+
   closeNode() {
     if (this.stack.length > 1)
       this.stack.pop();
   }
+
   closeAllNodes() {
     while (this.stack.length > 1)
       this.closeNode();
   }
 
-
   toJSON() {
     return JSON.stringify(this.rootNode, null, 4);
   }
-  collapse() {
+
+  finalize() {
     return;
     TokenTree._collapse(this.rootNode);
   }