How WordPress Uses CodeMirror for a Better Code Editing Experience


Written by

Dave Warfel

Reading Time

4 minutes

If you buy something from one of our links, we may earn a commission.

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?

CodeMirror logoDirectly 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.

WordPress CodeMirror old vs new comparison
WordPress code without CodeMirror (left) and with CodeMirror (right).

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.

CodeMirror row highlighting animation

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.

CodeMirror bracket matching example

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 autocomplete animation

CodeMirror in a WordPress Custom HTML Widget

Here’s an example of CodeMirror being applied to a Custom HTML widget:

CodeMirror in 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:

WordPress theme editor 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.

CodeMirror error handling CSS example

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.

WordPress CodeMirror error message handling

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

Disable CodeMirror syntax highlighting

CodeMirror Resources

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.

Dave Warfel

LinkedIn  •  X (Twitter)Dave has been working with WordPress since 2011. He's built 100s of client sites and almost a dozen of his own. He's tested almost every plugin you can think of, hosted with at least 10 different companies, and gone down every SEO rabbit hole you can imagine. When's he's not tinkering with new software, you'll find him in the mountains of Colorado, trail running, summiting peaks, and rippin' downhills on his mountain bike. 🏔️🏃🚴🤸

2 responses to “How WordPress Uses CodeMirror for a Better Code Editing Experience”

  1. Henk Elemans Avatar
    Henk Elemans

    Could you point me to the setting to disable autocomplete of tags? I can only find an option to disable syntax highlighting.
    While I find syntax highlighting extremely useful the autocomplete is causing errors by autoplacing a closing tag:
    Or if I happen to notice this an correct for it it tries to insert another error by autocompleting the closing tag while I am still typing like this:

    1. Dave Warfel Avatar

      Hi Henk — There is no way to disable the autocompletion of tags. WordPress basically bundles CodeMirror in the software, in its entirety. You either use CodeMirror or you disable it via the option that you mentioned for disabling syntax highlighting. Unfortunately, you cannot change individual options of CodeMirror.

Leave a Comment