CODEWITHSUNDEEP
themeshighlighthighlight.jstiddlywikitiddlywiki5
Dennis
Dennis

Reputation: 696

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

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)

Upvotes: 21

Views: 15348

Answers (3)

lsmpascal
lsmpascal

Reputation: 780

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

Upvotes: 0

agm1984
agm1984

Reputation: 17132

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.

Upvotes: 6

MadPhysicist
MadPhysicist

Reputation: 5831

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

Upvotes: 27

Related Questions