Updates from the Repl.it team about the product

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

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

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

Comments
hotnewtop
RolandJLevy (1083)

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 (1083)

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

Thanks again!

RolandJLevy (1083)

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 (928)

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

RolandJLevy (1083)

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 (928)

@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 (928)

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

ArchieMaclean (928)

@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 (1083)

@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 (1083)

@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 (928)

@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 (928)

@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 (1083)

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

<span>0.1 <input type="range" min="0.1" max="1" step="0.1"> 1</span>
RolandJLevy (1083)

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

RolandJLevy (1083)

@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 (928)

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

ArchieMaclean (928)

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

ArchieMaclean (928)

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

This just isn't my day haha

RolandJLevy (1083)

@ArchieMaclean I can't open the dev tools 😮

RolandJLevy (1083)

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

ArchieMaclean (928)

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

RolandJLevy (1083)

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

RolandJLevy (1083)

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

ArchieMaclean (928)

@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 (1083)

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

ArchieMaclean (928)

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.

FernandoAugust7 (0)

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 (928)

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

ArchieMaclean (928)

@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 :]

mesquite2234 (278)

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

ArchieMaclean (928)

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

LoganSpong (56)

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

ArchieMaclean (928)

@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 (56)

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

ArchieMaclean (928)

@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 (56)

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

ArchieMaclean (928)

@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 (56)

@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 (928)

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

JuanDanielDan12 (0)

The best thing evere thank you

Wjie (0)

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 (928)

@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 (928)

@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 (0)

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 (928)

@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 (928)

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

blaw (0)

@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 (928)

@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 (0)

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

zahrazadeh (0)

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

ArchieMaclean (928)

@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 (0)

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

ArchieMaclean (928)

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