Customising syntax highlighting with
ArchieMaclean (820)

Note: is made by myself, not Also, it doesn't work on phones and possibly tablets because uses the Ace editor on phones rather than Monaco.


Currently, the only options that gives for personalising your syntax highlighting is a switch between default light and dark themes. I decided to write a very basic Chrome extension that allows customisation of the syntax highlighting. The result is allows you to change the syntax highlighting completely on


In order to put a Chrome extension on the Chrome Web Store, you need to pay. Therefore, this extension is not available on the web store. This means a couple of extra steps need to be taken.

  • 1 - Go to the github repository.
  • 2 - Click on Clone or Download then Download ZIP.
  • 3 - Extract the ZIP file you downloaded into a folder (try right clicking and clicking Extract - if that doesn't work, look it up on Google for your Operating System)
  • 4 - Go to chrome://extensions in Chrome, and enable Developer Mode in the top right hand corner.
  • 5 - Click Load Unpacked and select the folder you unzipped in step 3.
  • 6 - The extension is now ready to use!

Make sure you enable Dark Theme in your editor - if you like light theme, you can change the settings via later. However, dark theme needs to be enabled in order for the syntax highlight customisation to work.


Once you have installed, you should see that the editor has turned into a rather vile color.

To change what colors you want everything to be, you can click on the small icon in the top right hand corner in Chrome, next to your extensions, and select Options. This should open a new tab with which you can edit your color scheme.

Now you can fiddle around with the colors to get looking exactly how you would like.

Thank you

Thank you for checking out - please let me know if you like it or if there are any things you would like me to change. Please upvote to let me know if you like it, and help other people find it.

If I do make any changes, I will post them here. You will need to re-download the repository to update (if you want to update).

Thanks :)

Another Option

I just found out that a while ago, @minx28 made a tutorial on using CSS injection to edit syntax themes. Check that out too!


16th July 2019
I have now integrated a CSS editor, to allow for finer control over text - for example, try

.comment {
  font-style: italic;

to make the comments italic.

You will need to re-download and upload the repo from github to update to this version. Let me know if you find any bugs! :)

12 September 2020
For the new update to UI, I've updated the extension (thanks @blaw and @zahrazadeh for bringing this to my attention!). I also re-wrote most of the code, and removed the CSS editor (under the hood, it was extremely hacky). I've added a bold/italic option to compensate. If you were using the CSS editor and can't do something anymore, let me know and I'll add it to the UI.

You will need to re-download and upload the extension from github to update to this version. Let me know if you find any more bugs! :)

You are viewing a single comment. View All
ArchieMaclean (820)

I thought I might make a CSS editor to allow more custom styles to the syntax. What do you all think about that?

I'm going on holiday for a week now but I'll probably implement it on my return.