Updates from the Repl.it team about the product

← Back to all posts
Customising repl.it syntax highlighting with repl.it-color
ArchieMaclean

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

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.

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

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

Voters
hg0428
GoodCoderBadBoy
ANDREWVOSS
Dunce
AizaKhan
DynamicSquid
JelteJohannesen
JediSamB
skinford
Alyssa2023
Comments
hotnewtop
HazTheWaz

👀

ArchieMaclean
RolandJLevy

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

@ArchieMaclean, I just found the icon! I didn't realise your extensions was hidden because it wasn't pinned.

Thanks again!

RolandJLevy

Hi @ArchieMaclean, I really like the extension but I had to disable it because I kept on getting this error 👇 Do you know if there is a fix?

ArchieMaclean

@RolandJLevy Oh dear that's a bit worrying. I'll see if I can replicate it.

RolandJLevy

Hi @ArchieMaclean, thanks. If it's any help, I'm using

Chrome: Version 87.0.4280.88 (Official Build) (x86_64)
MacOS High Sierra 10.13.6

ArchieMaclean

@RolandJLevy I'm not getting any errors when I try it. Have you tried un- and re-installing it? Does it work with the default colours? What changes cause it to break? This is just so I can try to work out why it's breaking :/
Thanks :)

ArchieMaclean

@RolandJLevy Also, thanks for letting me know about the new icon behaviour in Chrome, I've updated the parent post 👍

RolandJLevy

@ArchieMaclean nice one! 😁

ArchieMaclean

@RolandJLevy Ah wait, I managed to get the error just by changing a lot of the colours very quickly. I'll probably fix this just by putting a 'save' button rather than autosaving.

RolandJLevy

@ArchieMaclean yes, that makes a lot of sense. When will I see the changes? I have removed and reinstalled. It seems to be fine at the moment..

RolandJLevy

@ArchieMaclean is it possible to make the Highlight input field for opacity wider so you can see the floating number? At first glance it looks like opacity is 0 which it isn't

ArchieMaclean

@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

@RolandJLevy Ok, I think it works now. You'll need to redownload the latest version from Github.
Let me know if/when you find any more bugs! :)

RolandJLevy

@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?

RolandJLevy

@ArchieMaclean yay! I'll download it and give it a try now...

RolandJLevy

@ArchieMaclean I've downloaded from Github and installed the new version. The option page doesn't load. It's just a blank page. Does it work in your environment?

ArchieMaclean

@RolandJLevy Good idea! I'll just add it...

ArchieMaclean

@RolandJLevy Oh dear :( is there anything in dev tools?

ArchieMaclean

@RolandJLevy It definitely works here; are you sure you're using the new version?

This just isn't my day haha

RolandJLevy
RolandJLevy

@ArchieMaclean I can't open the dev tools 😮

RolandJLevy

@ArchieMaclean OK, good point, I will remove and install again. Do I need to restart Chrome?

ArchieMaclean

@RolandJLevy Probably not but it can't hurt :)

RolandJLevy

@ArchieMaclean I think that did the trick - it's all working fine now and the opacity range works well :)

RolandJLevy

@ArchieMaclean did you say you were going to add a Save button?

ArchieMaclean

@RolandJLevy Yeah I was, but I worked out that it was actually a bug with the UI that was causing an issue, not the autosave (.....I think....).

Thanks for your patience :) let me know if you find any more bugs

RolandJLevy

Hi @ArchieMaclean, apologies for the long delay getting back to you. I hope you had a happy new year :)

ArchieMaclean

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.

ArchieMaclean
diamondtnt2018

for some reason my indents disappear when i installed this extension please fix

ArchieMaclean

@diamondtnt2018 that's strange. What do you mean by disappear? The code is not indented, even if you press tab at the start of the line? It doesn't auto-indent? Can you give me a screenshot?

Thanks

diamondtnt2018

@ArchieMaclean

as you can see above me you can't see the lines between indents unlike the image below

ArchieMaclean

@diamondtnt2018 Hi, I've fixed this in the latest version. I think Chrome auto-updates extensions, so you should get the fix pretty soon (you may have to restart Chrome). You can now customise the indentation lines to be whatever colour you want.

Thanks for reporting this!

diamondtnt2018

@ArchieMaclean thank you so much

hg0428

Make an extension for the superior browsers, please

ArchieMaclean

@hg0428 by superior I assume you mean Firefox? It works on Chrome and Chrome derivatives (e.g. Brave (that I use), Vivaldi, Opera, Ungoogled Chromium, Edge).

Edit: I read your other post. You might find my reply there more constructive than this one

hg0428

But, you completely forgot about the better browsers, which are Firefox and Safari. @ArchieMaclean

ArchieMaclean

@hg0428 better is subjective :)

But if you want to add support for a Firefox or Safari extension, go for it! The code is here: I think the only JavaScript you'll need to change is the getPrefs and setPrefs functions in storage.js (as well as fiddling with the manifest no doubt).

hg0428

I may try that actually.
If I do, I will start with Safari, because I have more experience with it.
@ArchieMaclean

ArchieMaclean

@hg0428 Great! If you get it working, give me a link e.t.c. so I can add it to the post.
Good luck!

hg0428

No safari extension, no Firefox extension, no opera extension. You had to put it on my least favorite browser.

ArchieMaclean

@hg0428 you can install Chrome extensions on Opera I believe...?

https://addons.opera.com/en-gb/extensions/details/install-chrome-extensions/

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!

FernandoAugust7

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?

ArchieMaclean

@FernandoAugust7 Ok, I've submitted it to the Chrome Web Store for review, so hopefully it will be added in a few weeks. I'll let you know if/when it has.

FernandoAugust7
ArchieMaclean

@FernandoAugust7 It got approved but now since it's moving from https://repl.it to https://replit.com I had to update the extension so it's back in review again :]

FernandoAugust7

@ArchieMaclean Awesome! thx!

ArchieMaclean
FernandoAugust7

@ArchieMaclean got it! thx!

mesquite2234

This looks cool but i can't see the Clone or Download button.

ArchieMaclean

@TommyVictory Aha - GitHub's UI changed. Thanks for letting me know. Now you need to press Code then Download ZIP.

I've updated the parent post.

mesquite2234

@ArchieMaclean OH thanks

CoolCoderSJ

THis is undervoted

ArchieMaclean

@CoolCoderSJ Thanks for the praise :)

LoganSpong

is there a way to customize syntax in .txt files? thanks.

ArchieMaclean

@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

@ArchieMaclean Oh well. I am familiar with Markdown, BTW. Also, I don't think Markdown supports color as far as I know.

ArchieMaclean

@LoganSpong Not in the final result, though it syntax-highlights when you're editing it (e.g. titles are a different colour, and so are italics e.t.c.).

If you want different colours in your outputted text, then you probably want HTML.

LoganSpong

@ArchieMaclean I'm make a language, so I would prefer live highlighting.

ArchieMaclean

@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

LoganSpong

@ArchieMaclean oh well. thanks for helping me though! i just tried the extension and it actually makes Python coding 175% better! Upvote for you.

Not Proven
ArchieMaclean

@LoganSpong Thank you! Sorry I couldn't help you here, and do let me know if you run into any issues using the extension.

LoganSpong
JuanDanielDan12

The best thing evere thank you

ArchieMaclean

@JuanDanielDan12 I'm glad you like it :)

wjllll

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.

ArchieMaclean

@Wjie Thanks for reporting this! I'll see if I can fix it, though I'm not sure if I'll be able to. I'll reply back here with any updates.

ArchieMaclean

@Wjie I've got the wavy line back (download/reinstall the latest version to get it) but I can't seem to get the error message on hover. If I manage to fix this I'll notify you.

blaw

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?

ArchieMaclean

@blaw That's very odd... I will see if I can replicate this tomorrow. Can you send me the links to both repls? Thanks

ArchieMaclean

@blaw It may be the recent update to the repl.it UI has broken everything.

blaw

@ArchieMaclean Heh, I only have a couple of Repls, so you can find them easily. But even when I look at your Python repls, I just get white on black text. Same with .hs and .js files.

Your HTML repls highlight properly for me though, as do your .sh, .clj, and JSON files.

ArchieMaclean

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

blaw

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

blaw

@ArchieMaclean Awesome thanks.

zahrazadeh

@ArchieMaclean hi, the same thing happens for me with JS, was this fixed? I'd love to fix this somehow! tysm!!!

ArchieMaclean

@zahrazadeh Ah thanks for reminding me, I forgot all about this!
I should be able to fix this in the next couple of days.

zahrazadeh

@ArchieMaclean Oh yay! I am so happy. TY!

ArchieMaclean

@zahrazadeh @blaw I've updated the extension (see the bottom of the parent post). You'll need to re-download/install it. Thanks for pointing it out, and do let me know if/when you find more bugs!

JacobMacLeod

Wow, this is awesome!

ArchieMaclean

@JacobMacLeod Thank you :)

argthe1st

Nice

ArchieMaclean

@argthe1st Thanks :)

EchoCoding

Yo this is lit! +1

ArchieMaclean

@EchoCoding Thanks :)

TheDrone7

Yes, I like as well.

ArchieMaclean

@TheDrone7 Double yay

theangryepicbanana

Yes I like

ArchieMaclean