From ee9d19d2993a3e4cbb44adf2fbb39c8279954a94 Mon Sep 17 00:00:00 2001
From: Jermolene <jeremy@jermolene.com>
Date: Thu, 18 Aug 2016 09:07:06 +0100
Subject: [PATCH] Fix problem with highlight plugin language brushes

 TiddlyWiki passes the MIME type of the tiddler to highlight.js as the
"language brush", but it turns out that highlight.js doesn't actually
understand MIME types. This commit introduces a configuration mapping
between common MIME types and highlight.js language brushes

Fixes #2535
---
 .../tiddlers/widgets/CodeblockWidget.tid      | 13 +++++++++----
 .../tiddlywiki/highlight/TypeMappings.multids |  9 +++++++++
 .../tiddlywiki/highlight/highlightblock.js    | 19 +++++++++++++------
 plugins/tiddlywiki/highlight/readme.tid       |  1 +
 4 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 plugins/tiddlywiki/highlight/TypeMappings.multids

diff --git a/editions/tw5.com/tiddlers/widgets/CodeblockWidget.tid b/editions/tw5.com/tiddlers/widgets/CodeblockWidget.tid
index 5592b3b45..acdab9ef9 100644
--- a/editions/tw5.com/tiddlers/widgets/CodeblockWidget.tid
+++ b/editions/tw5.com/tiddlers/widgets/CodeblockWidget.tid
@@ -1,6 +1,6 @@
 caption: codeblock
 created: 20151103160200000
-modified: 20151103160200000
+modified: 20160817175325205
 tags: Widgets
 title: CodeBlockWidget
 type: text/vnd.tiddlywiki
@@ -16,9 +16,14 @@ displayed monospace. A language may optionally be specified using the
 
 The content of the `<$codeblock>` widget is ignored.
 
-|!Attribute |!Description|
-|code|Contents of the block to render as code|
-|language|Programming language for syntax highlighting|
+|!Attribute |!Description |
+|code |Contents of the block to render as code |
+|language |Programming language for syntax highlighting |
+
+The `language` attribute accepts either:
+
+* a Highlight.js language code (see https://highlightjs.org/static/demo/ for a list)
+* a MIME type (eg, `text/html` or `image/svg+xml`)
 
 ! Examples
 
diff --git a/plugins/tiddlywiki/highlight/TypeMappings.multids b/plugins/tiddlywiki/highlight/TypeMappings.multids
new file mode 100644
index 000000000..0bf0ef87e
--- /dev/null
+++ b/plugins/tiddlywiki/highlight/TypeMappings.multids
@@ -0,0 +1,9 @@
+title: $:/config/HighlightPlugin/TypeMappings/
+
+text/plain:
+application/javascript: javascript
+application/json: json
+text/css: css
+text/html: html
+image/svg+xml: xml
+text/x-markdown: markdown
diff --git a/plugins/tiddlywiki/highlight/highlightblock.js b/plugins/tiddlywiki/highlight/highlightblock.js
index a2187e8d7..70f8d5899 100644
--- a/plugins/tiddlywiki/highlight/highlightblock.js
+++ b/plugins/tiddlywiki/highlight/highlightblock.js
@@ -12,6 +12,8 @@ Wraps up the fenced code blocks parser for highlight and use in TiddlyWiki5
 /*global $tw: false */
 "use strict";
 
+var TYPE_MAPPINGS_BASE = "$:/config/HighlightPlugin/TypeMappings/";
+
 var CodeBlockWidget = require("$:/core/modules/widgets/codeblock.js").codeblock;
 
 var hljs = require("$:/plugins/tiddlywiki/highlight/highlight.js");
@@ -19,14 +21,19 @@ var hljs = require("$:/plugins/tiddlywiki/highlight/highlight.js");
 hljs.configure({tabReplace: "    "});	
 
 CodeBlockWidget.prototype.postRender = function() {
-	var domNode = this.domNodes[0];
-	if($tw.browser && this.document !== $tw.fakeDocument && this.language) {
-		domNode.className = this.language.toLowerCase();
+	var domNode = this.domNodes[0],
+		language = this.language,
+		tiddler = this.wiki.getTiddler(TYPE_MAPPINGS_BASE + language);
+	if(tiddler && tiddler.fields.text) {
+		language = tiddler.fields.text;
+	}
+	if($tw.browser && this.document !== $tw.fakeDocument && language) {
+		domNode.className = language.toLowerCase();
 		hljs.highlightBlock(domNode);
-	} else if(!$tw.browser && this.language && this.language.indexOf("/") === -1 ){
+	} else if(!$tw.browser && language && language.indexOf("/") === -1 ){
 		try {
-			domNode.className = this.language.toLowerCase() + " hljs";
-			domNode.children[0].innerHTML = hljs.fixMarkup(hljs.highlight(this.language, this.getAttribute("code")).value);
+			domNode.className = language.toLowerCase() + " hljs";
+			domNode.children[0].innerHTML = hljs.fixMarkup(hljs.highlight(language, this.getAttribute("code")).value);
 		}
 		catch(err) {
 			// Can't easily tell if a language is registered or not in the packed version of hightlight.js,
diff --git a/plugins/tiddlywiki/highlight/readme.tid b/plugins/tiddlywiki/highlight/readme.tid
index 2b645432a..59001fc85 100644
--- a/plugins/tiddlywiki/highlight/readme.tid
+++ b/plugins/tiddlywiki/highlight/readme.tid
@@ -45,3 +45,4 @@ The plugin includes support for the following languages (referred to as "brushes
 * sql
 * xml
 
+You can also specify the language as a MIME content type (eg `text/html` or `text/css`). The mapping is accomplished via mapping tiddlers whose titles start with `$:/config/HighlightPlugin/TypeMappings/`.