# Change highlight.js styles?
**URL:** https://meta.discourse.org/t/change-highlight-js-styles/44671
**Category:** Support
**Created:** [5월 23, 2016, 1:52오후 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671 "2016-05-23T13:52:31Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@dictoon](https://meta.discourse.org/u/dictoon)
#### Post date: [5월 23, 2016, 1:52오후 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/1 "2016-05-23T13:52:31Z")
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?
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [5월 23, 2016, 2:00오후 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/2 "2016-05-23T14:00:04Z")
Admin, customize, css
---
### Author:  [@dictoon](https://meta.discourse.org/u/dictoon)
#### Post date: [5월 23, 2016, 2:26오후 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/3 "2016-05-23T14:26:30Z")
Oh right, thanks Jeff.
---
### Author:  [@dictoon](https://meta.discourse.org/u/dictoon)
#### Post date: [5월 23, 2016, 2:38오후 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/4 "2016-05-23T14:38:02Z")
Unfortunately it looks like it isn’t working correctly.
I copy/pasted the CSS from the [Agate theme](https://highlightjs.org/static/demo/styles/agate.css) 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](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?
---
### Author:  [@dictoon](https://meta.discourse.org/u/dictoon)
#### Post date: [5월 23, 2016, 2:54오후 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/5 "2016-05-23T14:54:01Z")
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…
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [5월 23, 2016, 11:35오후 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/6 "2016-05-23T23:35:17Z")
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.
---
### Author:  [@dictoon](https://meta.discourse.org/u/dictoon)
#### Post date: [5월 24, 2016, 6:11오전 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/7 "2016-05-24T06:11:24Z")
Thanks @riking, I hadn’t seen this.
Unfortunately that means it’s basically impossible to try highlight.js themes (from their [demo page](https://highlightjs.org/static/demo/)) 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?
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [1월 23, 2019, 10:09오후 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/8 "2019-01-23T22:09:29Z")
---
### Author:  [@pacharanero](https://meta.discourse.org/u/pacharanero)
#### Post date: [3월 31, 2020, 10:23오전 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/9 "2020-03-31T10:23:33Z")
혹시 다른 분들도 코드 문법 하이라이팅을 위한 더 깔끔하고 색감 좋은 스타일을 가져오는 좋은 방법을 찾으셨는지 궁금해서 이 글을 다시 올립니다. 현대적인 코드 에디터의 뷰처럼 보이는 스타일요.
커스텀 CSS도 괜찮은 해결책이 될 수 있을 것 같은데, 누군가 가져오기에 적합한 CSS를 CDN에 올려놓았거나 테마 컴포넌트를 만들어 두었는지 궁금합니다.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [4월 1, 2020, 4:28오전 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/10 "2020-04-01T04:28:44Z")
기존 것을 오버라이드하는 작업이 꽤 까다롭다는 데 동의합니다. Highlight에는 다음과 같은 주소에 다양한 테마가 포함되어 있습니다:
> **[highlight.js/src/styles at main · highlightjs/highlight.js](https://github.com/highlightjs/highlight.js/tree/main/src/styles)**
>
> JavaScript syntax highlighter with language auto-detection and zero dependencies. - highlightjs/highlight.js
커스텀 테마를 사용하면 사이트에 독특한 느낌을 줄 수 있습니다:
@Johani [공식 저장소](https://github.com/highlightjs/highlight.js/tree/master/src/styles)에서 CSS를 가져와 변환한 후, 우리 CSS와 함께 작동하도록 만드는 방법을 설명하는 #howto를 작성하는 것이 어떨까요?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [4월 1, 2020, 6:53오전 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/11 "2020-04-01T06:53:44Z")
관리자가 드롭다운에서 hljs 테마를 선택할 수 있는 테마 컴포넌트를 만들었습니다. 자세한 내용은 여기서 확인하세요.
> [@코드 블록 테마 선택기](https://meta.discourse.org/t/hljs-theme-picker/146396):
>
> discourse2요약 Codeblock Theme Picker를 사용하면 코드 블록에 사용할 테마를 쉽게 변경할 수 있습니다.eyeglasses미리보기 [Discourse Theme Creator에서 미리보기](https://discourse.theme-creator.io/theme/Discourse/codeblock-theme-picker)hammer_and_wrench레포지토리 링크 [https://github.com/discourse/hljs-theme-picker](https://github.com/discourse/hljs-theme-picker)open_bookDiscourse 테마를 처음 접하는 분? [Discourse 테마 사용 가이드](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) 이 테마 컴포넌트 설치 기능 이것은 사용 가능한 옵션 중 일부일 뿐입니다. 이 컴포넌트에는 hljs 레포지토리에서 제공되는 [모든 90가지 옵션](https://highlightjs.org/static/demo/)이 포함되어 있습니다. information_source 이 컴포넌트에는 모든 옵션이 포함되어 있지만, 사용자가 선택한 옵션만 로드됩니다. 따라서 오버헤드가 없습니다. 사용 방법 이 컴포넌트의 구성 방…
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [4월 16, 2024, 3:02오후 UTC](https://meta.discourse.org/t/change-highlight-js-styles/44671/12 "2024-04-16T15:02:42Z")