With lessons and projects on our site, you will see a Tools option in the top right-hand corner of the screen, just right of your account avatar. Clicking on this will provide you with many different settings to customize your learning environment as well as other tools!
Dark Mode
Dark mode is currently only available in lessons and projects, but not within articles.
High Contrast Mode
Turn on the visual theme to increase the color contrast of text within the Learning Environment.
Disable Word Wrap
The editor enables “word wrapping” by default. This means that words that are technically on the same line may overflow visually. This can be inconvenient when using a screenreader so you can disable this feature under Tools.
Autoclose brackets and quotes mode
The editor enables the autoclosing of brackets and quotes by default. This means that if you enter a new bracket or quotation mark, the second set will automatically appear to ensure that the bracket and quotes are fully closed. This will help avoid any errors due to forgetting to close a bracket or quote. You can turn this feature off if desired from the Tools option.
Render whitespace mode
Whitespace is any character or series of characters that creates space on a page but does not display a visible mark. Common whitespace characters include tabs and spaces.
If you would like to make this whitespace more visible, you can turn on "Render whitespace mode". This will indicate any spaces or tabs with a visible dot. This may be helpful if you would like to visually see how many spaces or tabs you have entered in your code.
Without render whitespace mode enabled, spaces not visually represented:
With render whitespace mode enabled, spaces are now visually represented by a small dot.
Docs tooltips
During our lesson explanations, you will see links to specific Codecadmey Docs. When this option is turned on, you can hover over that link and see a summary without visiting the link itself. If you turn this feature off, you will still be able to click on the link, you just won't see the pop-up when you hover over it.
Code autocomplete (still in Beta testing)
Suggests code as you type as you type, speeding up your workflow within the Learning Environment. Only available for HTML, CSS, and JavaScript at this time.
Code font size
Change the font size of your code within the Learning Environment to Regular, Large, or Extra Large.
Create a Gist
This feature helps you push your code to Github and make edits to your code inside Github as you please. You can use this tool to share your code as well.