# How to change your code syntax highlighting colors

**URL:** <https://discuss.write.as/t/how-to-change-your-code-syntax-highlighting-colors/2283>\
**Category:** Customization\
**Created:** [January 4, 2021, 9:43pm UTC](https://discuss.write.as/t/how-to-change-your-code-syntax-highlighting-colors/2283 "2021-01-04T21:43:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vivgui](https://discuss.write.as/user_avatar/discuss.write.as/vivgui/32/860_2.png) [@vivgui](https://discuss.write.as/u/vivgui)\
**Post date:** [January 4, 2021, 9:43pm UTC](https://discuss.write.as/t/how-to-change-your-code-syntax-highlighting-colors/2283/1 "2021-01-04T21:43:20Z")

</div>

Write.as currently uses `highlight.js` under the hood for code syntax highlighting but they use a particular theme called `Atom One Light`, which, as the name suggests, is a light theme.

Now, as a professional developer, I _never_ use light themes since it strains my eyes after some time. Knowing my target audience (developers) would think the same, I figured I should change it.

Here’s the thing, `highlight.js` has custom CSS themes which you can find [here](https://cdnjs.com/libraries/highlight.js). It’s a big list but for my site, I wanted to use the `Atom One Dark` theme (which is what I used to use in VSCode). So you do a quick search and find the [appropriate CSS file](https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/atom-one-dark.min.css).

Now here’s the catch, you cannot modify Write.as’ HTML so you cannot add the code the CDN is giving you. What you _can_ do is add custom CSS so you can go straight to the file in your browser and it will look something like this:

 ![Image](https://i.snap.as/6JVWhZx4.jpg)

Right now the code is minified and we’ll need to prettify it first, so copy and paste the code and pass it through [here](https://www.freeformatter.com/css-beautifier.html). You’ll get a nice chunk of readable CSS code. Go and paste that on the **_Custom CSS section_** in your blog.

You’ll notice that it doesn’t work, the styles are not being applied. The problem? Write.as’ `Atom One Light` theme has a higher [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) than our CSS code so you’ll have to go through each CSS rule and add `!important` at the end. It’ll end up looking something like this:

```css
.hljs {
	display: block !important;
	overflow-x: auto !important;
	padding: .5em !important;
	color: #abb2bf !important;
	background: #282c34 !important;
}

.hljs-comment,
.hljs-quote {
	color: #5c6370 !important;
	font-style: italic !important;
}

.hljs-doctag,
.hljs-formula,
.hljs-keyword {
	color: #c678dd !important;
}

.hljs-deletion,
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
	color: #e06c75 !important;
}

.hljs-literal {
	color: #56b6c2 !important;
}

.hljs-addition,
.hljs-attribute,
.hljs-meta-string,
.hljs-regexp,
.hljs-string {
	color: #98c379 !important;
}

.hljs-built_in,
.hljs-class .hljs-title {
	color: #e6c07b !important;
}

.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
	color: #d19a66 !important;
}

.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
	color: #61aeee !important;
}

.hljs-emphasis {
	font-style: italic !important;
}

.hljs-strong {
	font-weight: 700 !important;
}

.hljs-link {
	text-decoration: underline !important;
}

```

Now save, refresh, and viola, you have a new code syntax highlighting theme 😄.

**Important note** : the new theme will only be visible on your blog, not in an anonymous post. Something to keep in mind.

---

<div class="post-metadata">

**Author:** ![dino](https://discuss.write.as/user_avatar/discuss.write.as/dino/32/645_2.png) [@dino](https://discuss.write.as/u/dino)\
**Post date:** [January 4, 2021, 10:50pm UTC](https://discuss.write.as/t/how-to-change-your-code-syntax-highlighting-colors/2283/2 "2021-01-04T22:50:20Z")

</div>

Thanks for sharing this!

Just curious, when you share code in your post, what Markdown syntax do you use? I’ve always just used ``` to indicate a code block, but syntax highlighting never triggered for me.

So when I saw your post and saw the syntax highlighting, I viewed the source and saw that you use `<pre><code class="language-css">`. Do you manually type that every time you share code?

---

<div class="post-metadata">

**Author:** ![vivgui](https://discuss.write.as/user_avatar/discuss.write.as/vivgui/32/860_2.png) [@vivgui](https://discuss.write.as/u/vivgui)\
**Post date:** [January 4, 2021, 11:04pm UTC](https://discuss.write.as/t/how-to-change-your-code-syntax-highlighting-colors/2283/3 "2021-01-04T23:04:24Z")

</div>

> [@dino](#):
>
> ```auto
> 
> ```

What you have to do is specify the language you want right after the backticks, for my example above I did ```css, for javascript you just do “js”, for HTML you do “html” and so on.

---

<div class="post-metadata">

**Author:** ![dino](https://discuss.write.as/user_avatar/discuss.write.as/dino/32/645_2.png) [@dino](https://discuss.write.as/u/dino)\
**Post date:** [January 4, 2021, 11:06pm UTC](https://discuss.write.as/t/how-to-change-your-code-syntax-highlighting-colors/2283/4 "2021-01-04T23:06:27Z")

</div>

Ah that’s what I’ve been missing. Thanks a lot!

---

<div class="post-metadata">

**Author:** ![dino](https://discuss.write.as/user_avatar/discuss.write.as/dino/32/645_2.png) [@dino](https://discuss.write.as/u/dino)\
**Post date:** [April 21, 2021, 8:41pm UTC](https://discuss.write.as/t/how-to-change-your-code-syntax-highlighting-colors/2283/5 "2021-04-21T20:41:51Z")

</div>

Just wanted to say thanks again to @vivgui for creating this guide. I was able to use a custom highlight.js theme for my dev blog.

---

<div class="post-metadata">

**Author:** ![AasheeshAgarwal](https://discuss.write.as/user_avatar/discuss.write.as/aasheeshagarwal/32/1584_2.png) [@AasheeshAgarwal](https://discuss.write.as/u/AasheeshAgarwal)\
**Post date:** [February 4, 2022, 12:10pm UTC](https://discuss.write.as/t/how-to-change-your-code-syntax-highlighting-colors/2283/6 "2022-02-04T12:10:20Z")

</div>

Oof all guys, its just simple! While loading the style.css file in the head tag, just load the atom-one-dark.css file instead of style.css. Its simple!