How to change your code syntax highlighting colors

Help Customization
1

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. 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.

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
Image1280×366

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. 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 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:

.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 :smile:.

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

3 Likes
2

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?

3

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.

1 Like
4

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

1 Like
5

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.

6

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!