[TW5] How to add and use highlight style?

[Jimmy Liew]

Hi all,

I understand that TW5 Version 5.0.8 has incorporate the famous highlight.js but how to add or use a style (CSS) provided by highlight.js official website into our TW5?

For instance, how can I use the GoogleCode color highlight style?

Kindly advise. Thanks.


Regards,
Jim

[Danielo Rodríguez]

I don't remember the details, but basically you have to copy the desired style sheet into a tiddler and tag it as stylesheet (it's a certain system tag, not just style sheet). Then you have to create a Json config tiddler. If I remember well it was not very clear on the plugin wiki. I asked a couple of times here too and at the end I found the solution myself. In a couple of hours I will provide you more detail and maybe I could write a tutorial

[Xavier Cazin]

Hello,

The highlight plugin adds language variants to the code block mecanism: http://tiddlywiki.com/static/Code%2520Blocks%2520in%2520WikiText.html. If highlight is loaded and you start you code block with  ```ruby instead of merely ```, you'll get your code highlighted with respect to the ruby syntax.

The CSS class involved are described here http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html, and you can use the regular CSS mechanisms to alter the rendering. Examples of themes are available here: https://github.com/isagalaev/highlight.js/tree/master/src/styles.

Best,
Xavier.

-- Xavier Cazin

On Sat, Apr 12, 2014 at 12:23 PM, Danielo Rodríguez <rdan...@gmail.com> wrote:

I don't remember the details, but basically you have to copy the desired style sheet into a tiddler and tag it as stylesheet (it's a certain system tag, not just style sheet). Then you have to create a Json config tiddler. If I remember well it was not very clear on the plugin wiki. I asked a couple of times here too and at the end I found the solution myself. In a couple of hours I will provide you more detail and maybe I could write a tutorial

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Andreas Hahn]

Hi Jimmy,

here is the link to the highlightdemo: http://tiddlywiki.com/highlightdemo.html (there are also examples for different languages)

As mentioned there, copy the css into a tiddler and tag it with $:/tags/stylesheet (maybe set the tiddler type to text/css) and it should work. Also if you tried out more than one highlight style, you might want to remove the tags on the styles you are not using.

[Mohammad]

• Open https://highlightjs.org/download/
• Select the language you want and then click download
• Unzip the highlight.zip and open the highlight.pack.js in a text editor
• Paste the following line as the first line in the text editor

var hljs = require("$:/plugins/tiddlywiki/highlight/highlight.js");

• Paste the following line as the last line in the text editor

exports.hljs = hljs;

• Open the $:/plugins/tiddlywiki/highlight/highlight.js tiddler in your wiki and click on edit button from text editor
• Replace the content of this tiddler with the content of edited highlight.pack.js from text editor
• Save tiddler and save wiki
• Close and reopen the wiki
• Enjoy