Customising repl.it syntax highlighting with repl.it-color
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.
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 allows you to change the syntax highlighting completely on
You can get it on the Chrome Web Store here.
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.
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. (If the icon doesn't appear, this may be because it isn't pinned, so click the jigsaw icon in the top right and you should be able to access it through there.) 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 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).
16th July 2019
I have now integrated a CSS editor, to allow for finer control over text - for example, try
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 Repl.it 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! :)
16 December 2020
Thanks @RolandJLevy for bringing to my attention that the Chrome default behaviour has updated so the extension initially won't be pinned, and also for pointing out an error with the user interface that was causing the extension to crash.
9 Jan 2021
Thanks @TommyVictory for pointing out that GitHub's UI has changed. I've updated this post.
12 March 2021
Added to Chrome Web Store.
11 October 2021
Fixed indentation lines - thanks to @diamondtnt2018
Hi @ArchieMaclean, thanks for creating this very helpful Chrome extension, it's just what I'm looking for. However, I am stuck at this point, where you say:
'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.'
The problem is that I can't see a small repl.it-color icon in the top right hand corner in Chrome, next to my extensions. Can you send me a screenshot of where I should be looking?
I have successfully installed and enabled the extension in Chrome:
@RolandJLevy So there actually was a bug where every time you save a preference, it adds another event listener which after a short while meant it was bursting off lots of saves at once.
I'm just fixing it - I'll make the opacity field a bit wider (it's fine on my screen but that's CSS ¯_(ツ)_/¯)
@ArchieMaclean that's great news! Thanks for fixing the opacity field :)
It occurred to me that making the field type="number" means the up/down arrows change the value by +1 or -1 which could be confusing for the user.
Would using an input range with a step of 0.1 make more sense, like this?
No safari extension, no Firefox extension, no opera extension. You had to put it on my least favorite browser.
@hg0428 you can install Chrome extensions on Opera I believe...?
I will never make a Safari extension, but Firefox I could maybe do, if Opera doesn't work out.
Let me know how it goes!
I think it got disabled on chrome, wich it's sad cause i liked the extension, could you upload it to the Chrome Web Store?
@LoganSpong Beyond changing the background colour or text colour for all the letters at once, sorry but no.
The extension just changes the colours that Repl.it provides, it doesn't actually add different syntax highlighting, and Repl.it just gives one colour for all the text in .txt files.
This is mainly because there is no defined syntax for .txt files - you can write anything in a text file and none of it will be 'incorrect'.
If you want a coloured .txt file, you might want to check out markdown (.md file extension). Here's the Github guide to markdown. If you use that then you will get some syntax highlighting.
Hopefully this answers your question :)
@LoganSpong Oh, so you want custom syntax highlighting for a custom file type?
Unfortunately Repl.it doesn't support it, I don't think. You might want to suggest something on the Repl.it feedback page, or upvote on someone who has asked a similar thing.
That's out of scope of this extension since it's just changing the colours defined by Repl.it
Which setting should able to change the color of wavy line for showing that my syntax is error?
I couldn't find my error using this template.
Hi, new Repl.it user here. Having a strange experience with this addon: it works on my C++ repl (though with a lot of the categories mislabelled) but not on my Python repl - everything just appears white!
Any ideas what I'm doing wrong?
@blaw I've found the issue - the update that repl.it made to the UI means that for some languages (e.g. Python) the CSS classes that the extension uses are used in different places. I should be able to fix this but I'm quite busy the next few days so I'll send a message back here when I fix it.
@ArchieMaclean I'm a new user so I wouldn't know! I will say that even though the extension works on my C++ files, a lot of the colours seem mislabelled. E.g. "Comment" doesn't seem to control anything, while comments are coloured by "Keyword", keywords are coloured by "Operator", and as far as I can tell, operators aren't coloured by anything, etc..