TiddlyWiki5 and highlight.js - How to change style / theme of syntax highlighting?

Asked 20/4, 2017 at 10:31 Answered 29/10, 2020 at 13:55

themes highlight highlight.js tiddlywiki tiddlywiki5

I am using TiddlyWiki version 5.1.13. I have added the highlight plugin (version 5.1.13) which uses highlight.js (version 8.8.0).

In a tiddler I successfully highlight XML like this:

```xml
  <html>
    <body>
    </body>
  </html>
```

How can I change the highlight style / theme to one of highlight.js various styles? (Highlight.js styles)

Melanoid answered 20/4, 2017 at 10:31 Comment(1)

BTW, this is exactly the way to highlight code in SO as well. wink – Afflictive 14/2, 2021 at 19:22

When you add Highlight.js to your site's directory, it contains a directory called styles. Inside that directory you have styles for all the themes available with Highlight.js.

To switch to a different theme, simply switch this line

<link rel="stylesheet" href="/path/to/styles/default.css">

to something like this:

<link rel="stylesheet" href="/path/to/styles/pick-theme-name-here.css">

Taylor answered 23/9, 2017 at 14:54 Comment(0)

Here is the URL to the styles directory in the highlight.js repo.

I found it useful to locate the name of the Vs 2015 theme which isn't vs-2015 but rather vs2015.

I'm importing the styles from a CDN:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/vs2015.min.css">

Also, for the record, Vs 2015 is very similar to VS Code's Dark+ (default dark) theme. That's the default theme that ships with VS Code.

Ladonnalady answered 28/5, 2020 at 18:37 Comment(0)

The MadPhysicist's answer below is not as right as it can be. I'm using the highlight.js 10.3.1 version and the style css is available only in .min on cdnjs. So you must put pick-theme-name-here.min.css and not pick-theme-name-here.js

Ex :

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/styles/solarized-light.css

=> 404

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/styles/solarized-light.min.css

=> available

Quicksilver answered 29/10, 2020 at 13:55 Comment(5)

This reads more like a problem description than an answer. Could you elaborate how this helps to solve the described problem? – Tedie 29/10, 2020 at 13:59

You're right, but I didn't really know where to put this. The MadPhysicist's answer is not right as you must put pick-theme-name-here.min.css and not pick-theme-name-here.js. May be I should only comment his post, and not create an answer. – Quicksilver 30/10, 2020 at 14:7

Either do that to provide helpful feedback there or add all information and context here (with or without contrasting to the other answer) to make a complete competitive answer. – Tedie 30/10, 2020 at 14:13

I'm not sure to fully understand what you explained : with my editing, is my answer correct now ? – Quicksilver 2/11, 2020 at 7:59

Looks fine now. – Tedie 2/11, 2020 at 8:1

Recommended topics

Hot tags