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: 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?
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?
혹시 다른 분들도 코드 문법 하이라이팅을 위한 더 깔끔하고 색감 좋은 스타일을 가져오는 좋은 방법을 찾으셨는지 궁금해서 이 글을 다시 올립니다. 현대적인 코드 에디터의 뷰처럼 보이는 스타일요.
커스텀 CSS도 괜찮은 해결책이 될 수 있을 것 같은데, 누군가 가져오기에 적합한 CSS를 CDN에 올려놓았거나 테마 컴포넌트를 만들어 두었는지 궁금합니다.
관리자가 드롭다운에서 hljs 테마를 선택할 수 있는 테마 컴포넌트를 만들었습니다. 자세한 내용은 여기서 확인하세요.