Repl.it browser extension (unofficial)

Install this extension

Install this extension


Repl.it Talk

Repl.it talk link


Features


Themes

List of themes:

This extension only themes the editor and not the whole of the Repl.it IDE. However, you can change the theme of the Repl.it IDE to light or dark to match the editors theme! Click the settings button on the left in the IDE and then choose between light or dark.


Code snippets

Add your own code snippets! Each code snippet has a name called a label. As you start to type the label in the code editor, you will see an autocomplete suggestion. Click enter or click on the autocomplete suggestion and your code snippet will be inserted.


Automatically closing HTML tags

Repl.it does support Emmet, so automatically closing HTML tags is not essential, but it is still nice to have.


Settings

To modify the extensions settings, click the extensions button in the bottom left corner of the Repl.it IDE. It is located just above the help and shortcuts button.

The extension button

A popup will appear and you will see some JSON containing all the data for the settings. After saving your settings, you will need to reload the Repl.it IDE.

Key Value (type) Notes
"theme" String/ JSON object/ null If the value is a string, it should be set to the name of the theme that you want to use (see the avaliable themes above). If it is a JSON object, it should be a custom theme for the monaco editor (see this GitHub link for some useful examples. If the value is set to null, no theme will be used and the default monaco editor theme will be used (visual studio light or visual studio dark theme).
"codeSnippets" JSON object Each key inside this object should be the name of a language (eg. "javascript" or "HTML"). The value of each key should be a list. For each item in the list, there should be a JSON object containing 2 mandatory keys and optionally 1 extra key. The two mandatory keys are "code" and "label" and the optional key is "description". The values for the keys "label" and "description" are strings and the value for the key "code" is a list. Each item in the list is a line of code. Therefore, if you have multiple items in the list, you will have several lines of code for this code snippet. The key "label" is the name for the code snippet - as you start typing this name in the code editor this suggestion will appear in the autocomplete suggestions.
"autoCloseHTMLTags" JSON object Contains 2 keys (enabled and inline). Both values are boolean.
"extensionButton" JSON object Contains two keys (backgroundColor and textColor). Both values should be valid CSS colors. These settings will change the color of the extension button (see the image above). Important: Use RGB instead of hex!

Example:

{
    "extensionButton": {
        "backgroundColor": "black",
        "textColor": "white"
    },
    "autoCloseHTMLTags": {
        "enabled": true,
        "inline": true
    },
    "theme": "Brilliance Black",
    "codeSnippets": {
        "javascript": [
            {
                "label": "Hello World",
                "code": [
                    "console.log('Hello')",
                    "console.log('world!')"
                ]
            }
        ]
    }
}
    

Developed by rbinfinity