codeblock as a widget and plugin for highlight code blocks

core/modules/parsers/wikiparser/rules/codeblock.js

@@ -23,14 +23,15 @@ exports.types = {block: true};
 
 exports.init = function(parser) {
 	this.parser = parser;
-	// Regexp to match
+	// Regexp to match and get language if defined
-	this.matchRegExp = /```\r?\n/mg;
+	this.matchRegExp = /```([\w-]*)\r?\n/mg;
 };
 
 exports.parse = function() {
 	var reEnd = /(\r?\n```$)/mg;
 	// Move past the match
 	this.parser.pos = this.matchRegExp.lastIndex;
+
 	// Look for the end of the block
 	reEnd.lastIndex = this.parser.pos;
 	var match = reEnd.exec(this.parser.source),
@@ -43,14 +44,14 @@ exports.parse = function() {
 		text = this.parser.source.substr(this.parser.pos);
 		this.parser.pos = this.parser.sourceLength;
 	}
-	// Return the pre element
+	// Return the $codeblock widget
 	return [{
 			type: "element",
-		tag: "pre",
+			tag: "$codeblock",
-		children: [{
+			attributes: {
-			type: "text",
+					code: {tye: "string", value: text},
-			text: text
+					language: {tye: "string", value: this.match[1]}
-		}]
+			}
 	}];
 };
 

core/modules/widgets/codeblock.js

@@ -0,0 +1,64 @@
+/*\
+title: $:/core/modules/widgets/codeblock.js
+type: application/javascript
+module-type: widget
+
+Code block node widget
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var CodeBlockWidget = function(parseTreeNode,options) {
+	this.initialise(parseTreeNode,options);
+};
+
+/*
+Inherit from the base widget class
+*/
+CodeBlockWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+CodeBlockWidget.prototype.render = function(parent,nextSibling) {
+	this.parentDomNode = parent;
+	this.computeAttributes();
+	this.execute();
+	var codeNode = this.document.createElement("code");
+	if (this.getAttribute("language")) {
+		codeNode.setAttribute("class",this.getAttribute("language"));
+	}
+	var domNode = this.document.createElement("pre");
+	codeNode.appendChild(this.document.createTextNode(this.getAttribute("code")));
+	domNode.appendChild(codeNode);
+	parent.insertBefore(domNode,nextSibling);
+	this.domNodes.push(domNode);
+
+	if(this.postRender) {
+		this.postRender();
+	}
+};
+
+/*
+Compute the internal state of the widget
+*/
+CodeBlockWidget.prototype.execute = function() {
+	// Nothing to do for a text node
+};
+
+/*
+Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
+*/
+CodeBlockWidget.prototype.refresh = function(changedTiddlers) {
+	return false;
+};
+
+exports.codeblock = CodeBlockWidget;
+
+})();

editions/highlightdemo/tiddlers/HelloThere.tid

@@ -7,3 +7,7 @@ The HighlightExample tiddler have fenced blocks of code.
 To add the plugin to your own TiddlyWiki5, just drag this link to the browser window:
 
 [[$:/plugins/tiddlywiki/highlight]]
+
+To add your prefered [[theme|http://highlightjs.org/static/test.html]] append to your:
+
+[[$:/boot/boot.css]]

editions/highlightdemo/tiddlers/HighlightExample.tid

@@ -2,7 +2,7 @@ title: HighlightExample
 
 ''Javascript'' fenced code:
 
-```
+```javascript
 (function(a,b){
     var result = a+b;
     return result;
@@ -11,7 +11,7 @@ title: HighlightExample
 
 ''CSS'' fenced code:
 
-```
+```css
  * { margin: 0; padding: 0; } /* micro reset */
 
 html { font-size: 62.5%; }
@@ -21,7 +21,7 @@ h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
 
 ''Perl'' fenced code:
 
-```
+```perl
 package Name;
 my $singleton;
 
@@ -49,3 +49,9 @@ class Singleton:
             raise Singleton.__single
         Singleton.__single = self
 ```
+
+''~No-Highlight'' now
+
+```no-highlight
+$ TW5_BUILD_OUTPUT=tmp/ ./bld.sh
+```

plugins/tiddlywiki/highlight/highlightblock.js

@@ -1,7 +1,7 @@
 /*\
 title: $:/plugins/tiddlywiki/highlight/highlightblock.js
 type: application/javascript
-module-type: parser
+module-type: widget
 
 Wraps up the fenced code blocks parser for highlight and use in TiddlyWiki5
 
@@ -12,42 +12,17 @@ Wraps up the fenced code blocks parser for highlight and use in TiddlyWiki5
 		/*global $tw: false */
 		"use strict";
 
-    var hljs = require("$:/plugins/tiddlywiki/highlight/highlight.js").hljs,
+		var CodeBlockWidget = require("$:/core/modules/widgets/codeblock.js").codeblock;
-        WikiParser = require("$:/core/modules/parsers/wikiparser/wikiparser.js")["text/vnd.tiddlywiki"],
-        BlockParsers = $tw.modules.createClassesFromModules("wikirule", "block", $tw.WikiRuleBase);
 
-    BlockParsers.codeblock.prototype.parse = function() {
+		CodeBlockWidget.prototype.postRender = function() {
-        var reEnd = /(\r?\n```$)/mg;
+				var self = this,
-        // Move past the match
+						lang = this.domNodes[0].getElementsByTagName('code')[0].className,
-        this.parser.pos = this.matchRegExp.lastIndex;
+						hljs = require("$:/plugins/tiddlywiki/highlight/highlight.js").hljs;
-        // Look for the end of the block
+
-        reEnd.lastIndex = this.parser.pos;
+				if ($tw.browser && lang !== 'no-highlight') {
-        var match = reEnd.exec(this.parser.source),
+						hljs.tabReplace = '    ';
-            text;
+						hljs.highlightBlock(this.domNodes[0]);
-        // Process the block
-        if (match) {
-            text = this.parser.source.substring(this.parser.pos, match.index);
-            this.parser.pos = match.index + match[0].length;
-        } else {
-            text = this.parser.source.substr(this.parser.pos);
-            this.parser.pos = this.parser.sourceLength;
 				}
-
-        // Return the pre element
-        return [{
-            type: "element",
-            tag: "pre",
-            children: [{
-                type: "element",
-                tag: "code",
-                children: [{
-                    type: "raw",
-                    html: hljs.highlightAuto(text).value
-                }]
-            }]
-        }];
 		};
 
-    WikiParser.prototype.blockRuleClasses = BlockParsers;
-
 })();