1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 03:57:21 +00:00

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
This commit is contained in:
Jermolene 2016-08-18 09:07:06 +01:00
parent ffae85140f
commit ee9d19d299
4 changed files with 32 additions and 10 deletions

View File

@ -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

View File

@ -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

View File

@ -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,

View File

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