How WordPress Uses CodeMirror for a Better Code Editing Experience

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…

…a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

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

There are several places in the WordPress admin area where users can access HTML, PHP, CSS & JavaScript code.

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)

It is not recommended to make edits to themes or plugins from the admin area. Use SFTP or some form of version control instead.

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.

Important Points

• 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…

Line Numbering

CodeMirror adds line numbers to the left side of the code area.

Color Coding

CodeMirror detects the specific coding language being used (PHP, HTML, CSS, JavaScript, etc.), and applies colors to different elements within the code. This makes it easier to scan the code, as well as spot mistakes.

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.

Bracket Matching

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.

Error Notices

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.

Cannot Save

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.

SEE ALSO: Scheduling Themes Changes in the Customizer

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

CodeMirror Resources

• In-depth post on WordPress blog
• CodeMirror User Guide
• CodeMirror on GitHub

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.