20

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)

Dennis
  • 646
  • 2
  • 6
  • 19

3 Answers3

25

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">

MadPhysicist
  • 5,401
  • 11
  • 42
  • 107
5

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.

agm1984
  • 15,500
  • 6
  • 89
  • 113
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

lsmpascal
  • 762
  • 8
  • 24
  • This reads more like a problem description than an answer. Could you elaborate how this helps to solve the described problem? – Yunnosch Oct 29 '20 at 13:59
  • 1
    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. – lsmpascal Oct 30 '20 at 14:07
  • 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. – Yunnosch Oct 30 '20 at 14:13
  • I'm not sure to fully understand what you explained : with my editing, is my answer correct now ? – lsmpascal Nov 02 '20 at 07:59
  • Looks fine now. – Yunnosch Nov 02 '20 at 08:01