Plugin for syntax highlighting with highlight.js from Ivan Sagalaev

bld.sh

@@ -89,6 +89,12 @@ node ./tiddlywiki.js \
 	--rendertiddler $:/core/save/all $TW5_BUILD_OUTPUT/markdowndemo.html text/plain \
 	|| exit 1
 
+node ./tiddlywiki.js \
+	./editions/highlightdemo \
+	--verbose \
+	--rendertiddler $:/core/save/all $TW5_BUILD_OUTPUT/highlightdemo.html text/plain \
+	|| exit 1
+
 # Run the test edition to run the Node.js tests and to generate test.html for tests in the browser
 
 ./test.sh

editions/highlightdemo/tiddlers/DefaultTiddlers.tid

@@ -0,0 +1,4 @@
+title: $:/DefaultTiddlers
+
+[[HelloThere]]
+[[HighlightExample]]

editions/highlightdemo/tiddlers/HelloThere.tid

@@ -0,0 +1,9 @@
+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.
+
+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]]

editions/highlightdemo/tiddlers/HighlightExample.tid

@@ -0,0 +1,51 @@
+title: HighlightExample
+
+''Javascript'' fenced code:
+
+```
+(function(a,b){
+    var result = a+b;
+    return result;
+})(10,20)
+```
+
+''CSS'' fenced code:
+
+```
+ * { margin: 0; padding: 0; } /* micro reset */
+
+html { font-size: 62.5%; }
+body { font-size: 14px; font-size: 1.4rem; } /* =14px */
+h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
+```
+
+''Perl'' fenced code:
+
+```
+package Name;
+my $singleton;
+
+BEGIN {
+    $singleton = {
+        attribute => 'value',
+        another   => 'something',
+    };
+    bless $singleton, "Name";
+}
+
+sub new {
+    my $class = shift;
+    return $singleton;
+}
+```
+
+''Python'' fenced code:
+
+```
+class Singleton:
+    __single = None
+    def __init__( self ):
+        if Singleton.__single:
+            raise Singleton.__single
+        Singleton.__single = self
+```

editions/highlightdemo/tiddlers/SiteSubtitle.tid

@@ -0,0 +1,3 @@
+title: SiteSubtitle
+
+a demo of the Highlight plugin for TiddlyWiki5

editions/highlightdemo/tiddlers/SiteTitle.tid

@@ -0,0 +1,3 @@
+title: SiteTitle
+
+highlightdemo

editions/highlightdemo/tiddlywiki.info

@@ -0,0 +1,13 @@
+{
+	"plugins": [
+		"tiddlywiki/highlight"
+	],
+	"themes": [
+		"tiddlywiki/vanilla",
+		"tiddlywiki/snowwhite"
+	],
+	"doNotSave": [
+	],
+	"includeWikis": [
+	]
+}

plugins/tiddlywiki/highlight/files/default.min.css

@@ -0,0 +1 @@
+pre code{display:block;padding:.5em;background:#f0f0f0}pre code,pre .subst,pre .tag .title,pre .lisp .title,pre .clojure .built_in,pre .nginx .title{color:black}pre .string,pre .title,pre .constant,pre .parent,pre .tag .value,pre .rules .value,pre .rules .value .number,pre .preprocessor,pre .pragma,pre .haml .symbol,pre .ruby .symbol,pre .ruby .symbol .string,pre .aggregate,pre .template_tag,pre .django .variable,pre .smalltalk .class,pre .addition,pre .flow,pre .stream,pre .bash .variable,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .tex .special,pre .erlang_repl .function_or_atom,pre .asciidoc .header,pre .markdown .header,pre .coffeescript .attribute{color:#800}pre .smartquote,pre .comment,pre .annotation,pre .template_comment,pre .diff .header,pre .chunk,pre .asciidoc .blockquote,pre .markdown .blockquote{color:#888}pre .number,pre .date,pre .regexp,pre .literal,pre .hexcolor,pre .smalltalk .symbol,pre .smalltalk .char,pre .go .constant,pre .change,pre .lasso .variable,pre .makefile .variable,pre .asciidoc .bullet,pre .markdown .bullet,pre .asciidoc .link_url,pre .markdown .link_url{color:#080}pre .label,pre .javadoc,pre .ruby .string,pre .decorator,pre .filter .argument,pre .localvars,pre .array,pre .attr_selector,pre .important,pre .pseudo,pre .pi,pre .haml .bullet,pre .doctype,pre .deletion,pre .envvar,pre .shebang,pre .apache .sqbracket,pre .nginx .built_in,pre .tex .formula,pre .erlang_repl .reserved,pre .prompt,pre .asciidoc .link_label,pre .markdown .link_label,pre .vhdl .attribute,pre .clojure .attribute,pre .asciidoc .attribute,pre .lasso .attribute,pre .coffeescript .property,pre .makefile .phony{color:#88F}pre .keyword,pre .id,pre .title,pre .built_in,pre .aggregate,pre .css .tag,pre .javadoctag,pre .phpdoc,pre .yardoctag,pre .smalltalk .class,pre .winutils,pre .bash .variable,pre .apache .tag,pre .go .typename,pre .tex .command,pre .asciidoc .strong,pre .markdown .strong,pre .request,pre .status{font-weight:bold}pre .asciidoc .emphasis,pre .markdown .emphasis{font-style:italic}pre .nginx .built_in{font-weight:normal}pre .coffeescript .javascript,pre .javascript .xml,pre .lasso .markup,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:.5}

plugins/tiddlywiki/highlight/files/tiddlywiki.files

@@ -0,0 +1,22 @@
+{
+	"tiddlers": [
+		{
+			"file": "highlight.min.js",
+			"fields": {
+				"type": "application/javascript",
+				"title": "$:/plugins/tiddlywiki/highlight/highlight.js",
+				"module-type": "library"
+			},
+			"prefix": "var hljs;if($tw.browser){\n",
+			"suffix": "}\nexports.hljs = hljs;\n"
+		},
+		{
+			"file": "default.min.css",
+			"fields": {
+				"type": "text/css",
+				"title": "$:/plugins/tiddlywiki/highlight/highlight.css",
+				"tags": "[[$:/tags/stylesheet]]"
+			}
+		}
+	]
+}

plugins/tiddlywiki/highlight/highlightblock.js

@@ -0,0 +1,53 @@
+/*\
+title: $:/plugins/tiddlywiki/highlight/highlightblock.js
+type: application/javascript
+module-type: parser
+
+Wraps up the fenced code blocks parser for highlight and use in TiddlyWiki5
+
+\*/
+(function() {
+
+    /*jslint node: true, browser: true */
+    /*global $tw: false */
+    "use strict";
+
+    var hljs = require("$:/plugins/tiddlywiki/highlight/highlight.js").hljs,
+        WikiParser = require("$:/core/modules/parsers/wikiparser/wikiparser.js")["text/vnd.tiddlywiki"],
+        BlockParsers = $tw.modules.createClassesFromModules("wikirule", "block", $tw.WikiRuleBase);
+
+    BlockParsers.codeblock.prototype.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),
+            text;
+        // 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;
+
+})();

plugins/tiddlywiki/highlight/plugin.info

@@ -0,0 +1,5 @@
+{
+	"title": "$:/plugins/tiddlywiki/highlight",
+	"description": "Highlight.js plugin for TiddlyWiki5",
+	"author": "JoaoBolila"
+}

plugins/tiddlywiki/highlight/styles.tid

@@ -0,0 +1,56 @@
+title: $:/plugins/tiddlywiki/highlight/styles
+tags: [[$:/tags/stylesheet]]
+
+
+/* Tomorrow Night Theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+.tomorrow-comment, pre .comment, pre .title {
+  color: #969896;
+}
+
+.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
+  color: #cc6666;
+}
+
+.tomorrow-orange, pre .number, pre .preprocessor, pre .pragma, pre .built_in, pre .literal, pre .params, pre .constant {
+  color: #de935f;
+}
+
+.tomorrow-yellow, pre .ruby .class .title, pre .css .rules .attribute {
+  color: #f0c674;
+}
+
+.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
+  color: #b5bd68;
+}
+
+.tomorrow-aqua, pre .css .hexcolor {
+  color: #8abeb7;
+}
+
+.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
+  color: #81a2be;
+}
+
+.tomorrow-purple, pre .keyword, pre .javascript .function {
+  color: #b294bb;
+}
+
+pre code {
+  display: block;
+  background: #1d1f21;
+  color: #c5c8c6;
+  padding: 0.5em;
+}
+
+pre .coffeescript .javascript,
+pre .javascript .xml,
+pre .tex .formula,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .xml .css,
+pre .xml .cdata {
+  opacity: 0.5;
+}