mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 12:07:19 +00:00
Code Issues Releases Wiki Activity

Clean up the highlight plugin

Browse Source 
Fixing various issues that were preventing language specifiers from
working.
This commit is contained in:
Jermolene 2014-02-10 13:51:38 +00:00
parent e003889171
commit ecba4f71ea
4 changed files with 32 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
core/modules/widgets/codeblock.js
View File

@ -30,16 +30,12 @@ CodeBlockWidget.prototype.render = function(parent,nextSibling) {
this.parentDomNode = parent; this.parentDomNode = parent;
this.computeAttributes(); this.computeAttributes();
this.execute(); this.execute();
var codeNode = this.document.createElement("code"); var codeNode = this.document.createElement("code"),
if(this.getAttribute("language")) { domNode = this.document.createElement("pre");
codeNode.setAttribute("class",this.getAttribute("language"));
}
var domNode = this.document.createElement("pre");
codeNode.appendChild(this.document.createTextNode(this.getAttribute("code"))); codeNode.appendChild(this.document.createTextNode(this.getAttribute("code")));
domNode.appendChild(codeNode); domNode.appendChild(codeNode);
parent.insertBefore(domNode,nextSibling); parent.insertBefore(domNode,nextSibling);
this.domNodes.push(domNode); this.domNodes.push(domNode);
if(this.postRender) { if(this.postRender) {
this.postRender(); this.postRender();
} }
@ -49,7 +45,7 @@ CodeBlockWidget.prototype.render = function(parent,nextSibling) {
Compute the internal state of the widget Compute the internal state of the widget
*/ */
CodeBlockWidget.prototype.execute = function() { CodeBlockWidget.prototype.execute = function() {
// Nothing to do for a text node this.language = this.getAttribute("language");
}; };
/* /*

16
editions/highlightdemo/tiddlers/HelloThere.tid
View File

@ -1,13 +1,19 @@
title: HelloThere 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]] [[$:/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

16
editions/highlightdemo/tiddlers/HighlightExample.tid
View File

@ -1,6 +1,6 @@
title: HighlightExample title: HighlightExample
''Javascript'' fenced code: ''Javascript'' code:
```javascript ```javascript
(function(a,b){ (function(a,b){
@ -9,7 +9,7 @@ title: HighlightExample
})(10,20) })(10,20)
``` ```
''CSS'' fenced code: ''CSS'' code:
```css ```css
* { margin: 0; padding: 0; } /* micro reset */ * { 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 */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
``` ```
''Perl'' fenced code: ''Perl'' code:
```perl ```perl
package Name; package Name;
@ -39,9 +39,9 @@ sub new {
} }
``` ```
''Python'' fenced code: ''Python'' code:
``` ```python
class Singleton: class Singleton:
__single = None __single = None
def __init__( self ): def __init__( self ):
@ -49,9 +49,3 @@ class Singleton:
raise Singleton.__single raise Singleton.__single
Singleton.__single = self Singleton.__single = self
``` ```
''~No-Highlight'' now
```no-highlight
$ TW5_BUILD_OUTPUT=tmp/ ./bld.sh
```

40
plugins/tiddlywiki/highlight/highlightblock.js
View File

@ -8,34 +8,20 @@ Wraps up the fenced code blocks parser for highlight and use in TiddlyWiki5
\*/ \*/
(function() { (function() {
/*jslint node: true, browser: true */ /*jslint node: true, browser: true */
/*global $tw: false */ /*global $tw: false */
"use strict"; "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) { CodeBlockWidget.prototype.postRender = function() {
var hljs, lang; var domNode = this.domNodes[0];
if($tw.browser && this.document !== $tw.fakeDocument && this.language) {
this.parentDomNode = parent; domNode.className = this.language;
this.computeAttributes(); var hljs = require("$:/plugins/tiddlywiki/highlight/highlight.js").hljs;
this.execute(); hljs.tabReplace = " ";
var codeNode = this.document.createElement("code"); hljs.highlightBlock(domNode);
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);
}
};
})(); })();