Clean up the highlight plugin

Fixing various issues that were preventing language specifiers from
working.

core/modules/widgets/codeblock.js

@@ -30,16 +30,12 @@ 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");
+	var codeNode = this.document.createElement("code"),
+		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();
 	}
@@ -49,7 +45,7 @@ CodeBlockWidget.prototype.render = function(parent,nextSibling) {
 Compute the internal state of the widget
 */
 CodeBlockWidget.prototype.execute = function() {
-	// Nothing to do for a text node
+	this.language = this.getAttribute("language");
 };
 
 /*

editions/highlightdemo/tiddlers/HelloThere.tid

@@ -1,13 +1,19 @@
 title: HelloThere
 
-This is a demo of TiddlyWiki5 incorporating a plugin for the [[highlight.js|https://github.com/isagalaev/highlight.js]] Syntax highlighting for the Web from Ivan Sagalaev.
+This is a demo of TiddlyWiki5 incorporating a plugin for the [[highlight.js|https://github.com/isagalaev/highlight.js]] syntax highlighting library from Ivan Sagalaev.
 
-The HighlightExample tiddler have fenced blocks of code.
+! Usage
 
-To add the plugin to your own TiddlyWiki5, just drag this link to the browser window:
+The HighlightExample tiddler shows how fenced code blocks can have a language specifier added to trigger highlighting.
+
+! Installation
+
+To add this 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:
+! Adding Themes
 
-[[$:/tags/stylesheet]]
+You can add themes from highlight.js by copying the CSS to a new tiddler and tagging it with [[$:/tags/stylesheet]]. The available themes can be found on GitHub:
+
+https://github.com/isagalaev/highlight.js/tree/master/src/styles

editions/highlightdemo/tiddlers/HighlightExample.tid

@@ -1,6 +1,6 @@
 title: HighlightExample
 
-''Javascript'' fenced code:
+''Javascript'' code:
 
 ```javascript
 (function(a,b){
@@ -9,7 +9,7 @@ title: HighlightExample
 })(10,20)
 ```
 
-''CSS'' fenced code:
+''CSS'' code:
 
 ```css
  * { margin: 0; padding: 0; } /* micro reset */
@@ -19,7 +19,7 @@ body { font-size: 14px; font-size: 1.4rem; } /* =14px */
 h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
 ```
 
-''Perl'' fenced code:
+''Perl'' code:
 
 ```perl
 package Name;
@@ -39,9 +39,9 @@ sub new {
 }
 ```
 
-''Python'' fenced code:
+''Python'' code:
 
-```
+```python
 class Singleton:
     __single = None
     def __init__( self ):
@@ -49,9 +49,3 @@ class Singleton:
             raise Singleton.__single
         Singleton.__single = self
 ```
-
-''~No-Highlight'' now
-
-```no-highlight
-$ TW5_BUILD_OUTPUT=tmp/ ./bld.sh
-```

plugins/tiddlywiki/highlight/highlightblock.js

@@ -8,34 +8,20 @@ Wraps up the fenced code blocks parser for highlight and use in TiddlyWiki5
 \*/
 (function() {
 
-		/*jslint node: true, browser: true */
-		/*global $tw: false */
-		"use strict";
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
 
-		var CodeBlockWidget = require("$:/core/modules/widgets/codeblock.js").codeblock;
+var CodeBlockWidget = require("$:/core/modules/widgets/codeblock.js").codeblock;
 
-		CodeBlockWidget.prototype.render = function(parent,nextSibling) {
-			var hljs, lang;
-
-			this.parentDomNode = parent;
-			this.computeAttributes();
-			this.execute();
-			var codeNode = this.document.createElement("code");
-			if(this.getAttribute("language")) {
-				lang = 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($tw.browser && this.document !== $tw.fakeDocument && lang !== 'no-highlight') {
-					hljs = require("$:/plugins/tiddlywiki/highlight/highlight.js").hljs,
-					hljs.tabReplace = '    ';
-					hljs.highlightBlock(domNode);
-			}
-		};
+CodeBlockWidget.prototype.postRender = function() {
+	var domNode = this.domNodes[0];
+	if($tw.browser && this.document !== $tw.fakeDocument && this.language) {
+		domNode.className = this.language;
+		var hljs = require("$:/plugins/tiddlywiki/highlight/highlight.js").hljs;
+		hljs.tabReplace = "    ";
+		hljs.highlightBlock(domNode);
+	}
+};
 
 })();