Customising repl.it syntax highlighting with repl.it-color
ArchieMaclean (541)

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

Greetings!

Currently, the only options that repl.it 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 repl.it syntax highlighting. The result is repl.it-color.

repl.it-color allows you to change the syntax highlighting completely on repl.it.

Installation

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 repl.it editor - if you like light theme, you can change the settings via repl.it-color later. However, dark theme needs to be enabled in order for the syntax highlight customisation to work.

Usage

Once you have installed repl.it-color, 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 repl.it-color 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 repl.it looking exactly how you would like.

Thank you

Thank you for checking out repl.it-color - 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!

Changelog

16th July
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! :)

You are viewing a single comment. View All