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?

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: [imagem] However I get the following results: [imagem] (Link to the page: https://forum.appleseedhq.net/t/some-thoughts-on-beta-1-4/144 ) Notice that…

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…

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.

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 remain…

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 fo…

I agree it is pretty fiddly overriding what we have. Highlight ships with a big pile of themes at: [imagem] highlight.js/src/styles at main · highlightjs/highlight.js JavaScript syntax highlighter with language auto-detection and zero dependencies. - highlightjs/highlight.js …

I made a theme component that allows admins to select a hljs theme from a dropdown. More details here [imagem] Codeblock Theme Picker Theme component discourse2 Summary Codeblock Theme Picker will allow you to easily change the theme used in code blocks.…

Change highlight.js styles?

Suporte

Johani (Joe) Abril 1, 2020, 6:53am 11

Criei um componente de tema que permite aos administradores selecionar um tema do hljs em um menu suspenso. Mais detalhes aqui:

Tópico		Respostas	Visualizações
Choosing code highlight styles Support	3	1272	18 de Abril de 2016
(old) method for adding languages to highlight.js on Discourse Development	12	7751	22 de Janeiro de 2024
Allow users to select Highlightjs theme Feature	0	405	22 de Julho de 2021
"New reply/prop/etc" highlight color has disappeared on only one of my themes Support	3	137	18 de Maio de 2025
Codeblock Theme Picker Theme component official , codeblock-theme-picker	18	5102	19 de Janeiro de 2026

Change highlight.js styles?

Tópicos relacionados