Change highlight.js styles?

Support
1

I have customized the colors of my Discourse instance to use a dark background color, however syntax highlighting does not look good anymore.

What is the easiest way to tell highlight.js to use a different style?

2 Likes
2

Admin, customize, css

2 Likes
3

Oh right, thanks Jeff.

4

Unfortunately it looks like it isn’t working correctly.

I copy/pasted the CSS from the Agate theme to a new section in Admin / Customize / CSS:

Pasted image1350Ă—1206 74.4 KB

However I get the following results:

Pasted image1350Ă—1206 153 KB

(Link to the page: Some thoughts on beta 1.4 - appleseed Users Forum)

Notice that the .hljs-string color is #f99 which does not match the declared style of this class in the Agate theme:

.hljs-string,
.hljs-bullet {
  color: #a2fca2;
}

Not sure what I’m doing wrong. Any clue?

5

Looks like I would need to add !important to each CSS property…

Is anyone aware of a better solution?

Edit: it doesn’t look like the !important solution would even work…

6

Nope, it’s because the default has a higher specificity - .hljs-tag .hljs-string . You need to replicate the theme’s rule with that selector.

3 Likes
7

Thanks @riking, I hadn’t seen this.

Unfortunately that means it’s basically impossible to try highlight.js themes (from their demo page) to find one that fits the color palette of my Discourse instance without inspecting and tweaking them, one rule at a time…

So I guess my original question remains: what’s the (second) easiest way to try an highlight.js theme with Discourse?

5 Likes
9

Just bumping this in case anyone else has found a nice way of importing nicer and more colourful styles for syntax highlighting of code? Something that looks more like a modern code editor’s view.

Custom CSS would be an acceptable solution, wondered if anyone has either put suitable CSS in a CDN for import, or a theme component?

3 Likes
10

I agree it is pretty fiddly overriding what we have. Highlight ships with a big pile of themes at:

A custom theme can certainly provide a unique look to a site:

image
image1153Ă—937 77.1 KB

@Johani maybe we should do a howto which explains how to take CSS from the official repo transform them and get them to work with our CSS?

5 Likes
11

I made a theme component that allows admins to select a hljs theme from a dropdown. More details here

6 Likes