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?
Admin, customize, css
Oh right, thanks Jeff.
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-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?
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 remains: what’s the (second) easiest way to try an highlight.js theme with Discourse?
Ich wollte das nur kurz nach oben bringen, falls jemand einen schönen Weg gefunden hat, um schönere und farbenfrohere Stile für die Syntax-Hervorhebung von Code zu importieren? Etwas, das eher wie die Ansicht eines modernen Code-Editors aussieht.
Benutzerdefiniertes CSS wäre eine akzeptable Lösung. Ich habe mich gefragt, ob jemand entweder passendes CSS in einem CDN zum Import bereitgestellt hat oder eine Theme-Komponente?
Ich stimme zu, es ist ziemlich fummelig, das Vorhandene zu überschreiben. Highlight.js bietet eine große Auswahl an Themes unter:
Ein benutzerdefiniertes Theme kann einer Website definitiv ein einzigartiges Aussehen verleihen:
@Johani, vielleicht sollten wir eine #howto-Anleitung erstellen, die erklärt, wie man CSS aus dem offiziellen Repository entnimmt, transformiert und mit unserem CSS kompatibel macht?
Ich habe eine Theme-Komponente erstellt, mit der Administratoren über ein Dropdown-Menü ein hljs-Theme auswählen können. Weitere Details finden Sie hier: