Change highlight.js styles?

Product Support

AI-generated summary

Users are discussing how to customize syntax highlighting styles in Discourse using highlight.js, particularly for dark-themed instances. dictoon initially tried copying CSS from the Agate theme into Admin > Customize > CSS but found styles were overridden due to CSS specificity issues — specifically, .hljs-tag .hljs-string had higher priority than .hljs-string alone riking. Attempts to use !important failed, and manually tweaking each rule proved impractical dictoon. Others, like pacharanero, echoed the desire for easier, modern-looking syntax themes. sam acknowledged the difficulty and suggested a howto guide to adapt themes from highlight.js’s official repo. Ultimately, Johani provided a solution: a theme component that lets admins pick from a dropdown of pre-configured highlight.js themes, available at hljs-theme-picker.

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

Admin, customize, css

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: https://forum.appleseedhq.net/t/some-thoughts-on-beta-1-4/144)

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.

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?

9

Sollevo di nuovo l’argomento nel caso in cui qualcuno abbia trovato un modo efficace per importare stili più gradevoli e colorati per l’evidenziazione della sintassi del codice? Qualcosa che assomigli alla vista di un editor di codice moderno.

Un CSS personalizzato sarebbe una soluzione accettabile; mi chiedevo se qualcuno abbia già reso disponibile CSS adatto su un CDN per l’importazione o se esista un componente tema.

10

Concordo, è piuttosto complicato sovrascrivere ciò che abbiamo. Evidenzia le navi con un’ampia collezione di temi all’indirizzo:

Un tema personalizzato può certamente dare un aspetto unico a un sito:

image
image1153Ă—937 77.1 KB

@Johani, forse dovremmo creare una guida howto che spieghi come prendere il CSS dal repository ufficiale, trasformarlo e farlo funzionare con il nostro CSS?

11

Ho creato un componente tema che consente agli amministratori di selezionare un tema hljs da un menu a tendina. Maggiori dettagli qui