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 « J'aime »
Admin, customize, css
2 « J'aime »
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.
3 « J'aime »
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 « J'aime »
Je remonte ce sujet au cas où quelqu’un aurait trouvé une bonne méthode pour importer des styles plus agréables et plus colorés pour la coloration syntaxique du code ? Quelque chose qui ressemble davantage à la vue d’un éditeur de code moderne.
Un CSS personnalisé serait une solution acceptable. Je me demandais si quelqu’un avait déjà mis un CSS approprié sur un CDN pour importation, ou un composant de thème ?
3 « J'aime »
Je suis d’accord, c’est assez délicat de remplacer ce que nous avons déjà. Mettez en évidence les ships avec un grand nombre de thèmes à l’adresse suivante :
Un thème personnalisé peut certainement donner un look unique à un site :
@Johani, peut-être devrions-nous créer un howto expliquant comment récupérer du CSS depuis le dépôt officiel, le transformer et le faire fonctionner avec notre CSS ?
5 « J'aime »
J’ai créé un composant de thème qui permet aux administrateurs de sélectionner un thème hljs dans une liste déroulante. Plus de détails ici
6 « J'aime »