diff --git a/core/modules/widgets/codeblock.js b/core/modules/widgets/codeblock.js index ef54e2888..b0447d7fb 100644 --- a/core/modules/widgets/codeblock.js +++ b/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"); }; /* diff --git a/editions/highlightdemo/tiddlers/HelloThere.tid b/editions/highlightdemo/tiddlers/HelloThere.tid index a244a1696..af56fc02d 100644 --- a/editions/highlightdemo/tiddlers/HelloThere.tid +++ b/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 diff --git a/editions/highlightdemo/tiddlers/HighlightExample.tid b/editions/highlightdemo/tiddlers/HighlightExample.tid index fd126d13b..9b0e68b77 100644 --- a/editions/highlightdemo/tiddlers/HighlightExample.tid +++ b/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 -``` diff --git a/plugins/tiddlywiki/highlight/highlightblock.js b/plugins/tiddlywiki/highlight/highlightblock.js index 69c94e5f6..e974193de 100644 --- a/plugins/tiddlywiki/highlight/highlightblock.js +++ b/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); + } +}; })();