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: [صورة] However I get the following results: [صورة] (Link to the page: Some thoughts on beta 1.4 - appleseed Users Forum ) Notice that the .hljs-strin…

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: [صورة] 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 [صورة] Codeblock Theme Picker Theme component discourse2 Summary Codeblock Theme Picker will allow you to easily change the theme used in code blocks. eyeg…

Change highlight.js styles?

الدعم

Johani (Joe) 1 أبريل 2020، 6:53ص 11

لقد قمت بإنشاء مكون سمة يسمح للمسؤولين باختيار سمة hljs من قائمة منسدلة. مزيد من التفاصيل هنا

الموضوع		الردود	مرات العرض
Choosing code highlight styles Support	5	1260	8 يناير 2019
(old) method for adding languages to highlight.js on Discourse Development	13	7662	22 يناير 2024
Allow users to select Highlightjs theme Feature	0	391	22 يوليو 2021
"New reply/prop/etc" highlight color has disappeared on only one of my themes Support	3	103	18 مايو 2025
Codeblock Theme Picker Theme component codeblock-theme-picker , official	18	4924	19 يناير 2026

Change highlight.js styles?

الموضوعات ذات الصلة