With the release of WordPress 4.9, you might have heard people talking about CodeMirror. This article will answer the question, “What is CodeMirror?”, as well as a handful of other questions surrounding how WordPress uses CodeMirror to provide a better code editing experience.
What is CodeMirror?
Directly from the CodeMirror website, it is described as…
CodeMirror is an open-source project shared under an MIT license.
You will mainly notice that it makes
code look better. However, it has other important benefits as well.
How Does WordPress Use CodeMirror?
CodeMirror support will be added in WordPress 4.9 (scheduled for release on November 14, 2017).
Where is CodeMirror found in the WordPress admin area?
- Theme editor (Appearance > Editor)
- Plugin editor (Plugins > Editor)
- Custom HTML widgets
- Additional CSS in the Customizer (Appearance > Customize > Additional CSS)
Benefits of CodeMirror in WordPress
WordPress adding CodeMirror in 4.9 comes with a few benefits:
- a better code editing experience in the WordPress admin
- preventing fatal errors that could bring down your site
I’ll explain each of these in more detail below.
- CodeMirror is only applied to specific areas in the WordPress admin. It does not impact the front-end of your site.
- WordPress only uses some CodeMirror features.
- Starting with WordPress 4.9, theme & plugin developers can use CodeMirror to improve the code editing experience in other parts of the admin area.
CodeMirror Features used in WordPress
CodeMirror comes with several standard features, but also contains quite a few addons to enhance its capabilities. WordPress has chosen to use some CodeMirror features, while leaving others out. This is how WordPress uses CodeMirror.
For a better code editing experience…
CodeMirror adds line numbers to the left side of the code area.
Active Cursor Row Highlighting
CodeMirror also detects where your cursor is currently active, and highlights that entire row. This brings increased visibility to the flashing vertical line that typically indicates where your cursor is currently pointed.
WordPress uses CodeMirror’s bracket matching feature. When your cursor is in a row with an opening or closing bracket, CodeMirror highlights the corresponding bracket for that chunk of code.
Autocomplete & Auto-indent
Autocomplete helps save time by automatically completing commonly used code. CodeMirror anticipates what you will type next, and you can simply hit the Enter key to use their suggestion.
Auto-indent keeps your code clean by auto-indenting new lines when you hit Enter.
CodeMirror in a WordPress Custom HTML Widget
Here’s an example of CodeMirror being applied to a Custom HTML widget:
CodeMirror in the WordPress Theme Editor
Here’s an example of the theme editor in WordPress 4.9, with CodeMirror applied:
The WordPress plugin editor works exactly the same as the theme editor.
CodeMirror & WordPress Error Handling
In addition to its design & autocomplete features, WordPress also uses CodeMirror to better handle syntax errors in your coding.
For example, let’s say you forget a colon in-between your CSS property and value. CodeMirror alerts you that a colon is missing, and on which line it belongs.
You’ll also see a red X in the left gutter. You can easily scan through your code looking for warnings or errors.
If your code contains any critical errors, WordPress uses CodeMirror to prevent you from saving the incorrect code. In some cases, this could prevent your entire site from coming down.
Even a simple comma, period or colon that is missing could break your entire site. WordPress is using CodeMirror to help prevent these fatal errors.
CodeMirror & WordPress Developers
If you’re a WordPress developer, you can now use CodeMirror in your plugins. If part of your plugin would benefit from CodeMirror, you can use the
WP_Customize_Code_Editor_Control instance. Learn more about WP_Customize_Code_Editor_Control here.
How to Disable CodeMirror?
You can disable the syntax highlighting (and other CodeMirror) features from your User Profile. Simply go to Users > Your Profile and check the box to “Disable syntax highlighting when editing code.”
What do you think of CodeMirror being added to WordPress? Has it improved your code editing experience? Perhaps saved your site from going down due to a small syntax error?
If I left anything out, please let me know in the comments.