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/`.