Custom languages/brushes for highlight.js

[Rob Hoelz]

Hi everyone!

I wanted Lua code in my wiki to get proper treatment, so I whipped up a little hack to make adding new languages/brushes a cinch.  I've seen people ask about this in the past, so I thought I'd share the code I wrote.

Here's the JS code that does the magic:

exports.after = ['load-modules'];

exports.startup = function startup() {
  let hljs = $tw.modules.execute('$:/plugins/tiddlywiki/highlight/highlight.js');

  $tw.modules.forEachModuleOfType('highlighter', function(title, module) {
    let moduleSource = $tw.wiki.getTiddlerText(title);
    $tw.utils.evalSandboxed(moduleSource, {hljs:hljs, exports:{}}, title);
  });
};

Put this in a tiddler - you can name it whatever you want, but its "type" field needs to be "application/javascript", and it needs its "module-type" field set to "startup".  Once you add this and reload your wiki, this code will look for highlight.js brushes in tiddlers that have a module-type of "highlighter" and load them for use in highlighting.

For example, I grabbed the Lua highlighter source from https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/languages/lua.min.js, put it in a tiddler with "module-type: highlighter", reloaded my wiki, and viola - highlighted Lua code.  I recommend always grabbing the 8.8.0 version of any language you add, since that's the version of highlight.js that TiddlyWiki includes with the plugin.

-Rob

[Mohammad]

Rob,
This is great. The current mechanism is not modular. I hope @BTC, who is working on updating highlight.js see this post and also @Jeremy.

We should have the plug-in with minimum common language brushes, and then users can add their brushes of choice.
Your code should be part of plugin.

I will try it with some new brushes and return to you.

Cheers
Mohammad

[Rob Hoelz]

Thanks for letting me know that BTC is working on this, Mohammad!  I'll mention this on the GitHub issue and see if this can get brought into the plugin itself.

[Mohammad]

Rob,

could you put a working example on tiddlyspot or github or post here?

I could not setup as you said on TW 5.1.19

--Mohammad

[Mohammad]

Hello Rob,

 Could you put a working example on tiddlyspot or share here?

I failed to add any extra language!

--Mohammad

[Rob Hoelz]

I'm so sorry, Mohammad - I missed your message last month!  I'll set something up later tonight!

-Rob

[Mohammad]

Thank you Rob,

At least two people here need your solution: me and Josiah!

I am sure if the setup could be simple, many would like to use it as the original Highlight.JS plugin does not include all languages!

Recently I noted that BTC has added the lovely Fortran, Matlab and some other languages to updated plugin!

I hope BTC receive this post, as he is involve in updating and maintaining the highlight.js plugin.

Cheers

Mohammad

[Rob Hoelz]

Hi again Mohammad,

In preparing the sample wiki, I managed to fix a bug in my implementation - thanks for pointing that out!

Here's an example wiki with the tweak and some example code: https://hoelz.ro/files/highlighter-example.html

-Rob

[Mohammad]

Many thanks Rob!

I am playing with it and will return with my comments if any!

Cheers

Mohammad

[Mohammad]

Rob,

 Many thanks. It works.

Just a note in document and the above post add this small guide

1. To add a new brush, download one you like from https://cdnjs.com/libraries/highlight.js
2. Create a new tiddler with any title you like and
1. add a new field, name it `module-type` and set it to `highlighter`
2. set its type to "application/javascript"
3. add if(typeof hljs !== 'undefined') {} as text field
4. add the brush you downloaded from step 1 between above curly brackets
   
5. Save and reload

Cheers

Mohammad

On Monday, February 4, 2019 at 9:59:44 PM UTC+3:30, Rob Hoelz wrote:

[Rob Hoelz]

Good idea, Mohammad - I've added those instructions to that wiki!