Overview
CodeHS offers users access to the Ace and Monaco code editors, giving them the option to choose the tool that best fits their learning style and experience. Ace is simple and great for beginners, while Monaco has advanced features for experienced coders. This article highlights their differences and features, so that students and teachers can choose the editor that fits their coding needs.
Changing Your Editor Engine
Users can change which engine the IDE runs in the editor settings. To access these settings, click the gear icon in the upper left corner of any editor.
Selecting an Editor Engine for your Class
Teachers have the ability to set the default editor engine for a class and prevent students from switching their Editor Engine. These options can be found within the
Section Settings.
Ace Editor
Ace is a lightweight, user-friendly code editor designed for accessibility and ease of use. Its intuitive interface makes it ideal for beginners and younger students, offering the essential tools needed to write and run code without overwhelming complexity.
Features
Auto Formatting
The Ace Editor will automatically format the code each time students save the program. To enable Auto-Format, click the gear icon in the upper left corner to access the Editor Settings and toggle the Auto-Format control under Editor.
Syntax highlighting
The Ace editor has accurate, language‑specific coloring that enhances readability and helps distinguish code structures quickly.
Theme customization
The Ace editor allows the user to switch between multiple light and dark themes (such as Monokai, Twilight, or Chrome) for personal preference.
Multiple cursors and selections
The Ace Editor allows users to perform edits across several lines at once. This is useful for batch renaming or refactoring.
Wrap Lines
The Ace Editor allows users to enable a choice between horizontal scrolling or wrapped lines for long text via the “Wrap Lines” toggle.
For more information on the Ace Editor, please visit: https://ace.c9.io/
Monaco Editor
Monaco is a powerful code editor built for users who want more advanced features and flexibility in their coding environment. With tools like syntax highlighting, intelligent code completion, and support for many programming languages, Monaco helps experienced students write, organize, and debug code efficiently.
Features
Auto Formatting
The Monaco editor allows users to automatically format their code via the Format Options in the context menu.
Auto formatting in the Monaco Editor is only available for the following program types:
JavaScript
HTML
Syntax highlighting
The Monaco editor has accurate, language‑specific coloring that enhances readability and helps distinguish code structures quickly.
Theme Customization
The Monaco editor allows the user to switch between light and dark themes for easier readability.
Multiple cursors and selections
The Monaco Editor allows users to perform edits across several lines at once. This is useful for batch renaming or refactoring.
Autocomplete
The Monaco editor supports autocomplete and IntelliSense, offering intelligent suggestions powered by the same engine used in Visual Studio Code.
Command Palette
The Monaco editor includes a Command palette exposing every command through keyboard access, allowing full control without a mouse. To access the Command Pallet, press Command+Shift+P on Mac and press Control+Shift+P on a PC.
High Contrast Mode
The Monaco editor includes a High Contrast Mode that can be accessed from the Command Palette that ensures readability for users with visual impairments.
For more information on the Monaco Editor, please visit: https://microsoft.github.io/monaco-editor/
Still have questions? Contact our team at support@codehs.com to learn more!