/ Plugin Category

/ Developer Tools & Customization

/ HTML Editor Syntax Highlighter

HTML Editor Syntax Highlighter

Description

Add syntax highlighting in the Classic Post and Page HTML text editor, Gutenberg Code Editor, and Theme and Plugin editors using CodeMirror.js.

This plugin features syntax highlighting in the Post/Page HTML editor, the Gutenberg Code Editor (not the Visual Editor), and the Theme and Plugin editors. It also provides syntax highlighting for WordPress shortcodes, allows saving posts and pages with Ctrl+S (Cmd+S on Mac), and restores cursor position after the page is reloaded.

Customize your experience with a huge selection of themes and other options. Fullscreen mode can be toggled with F11 or Esc hotkeys.

Other Notable Features

Here are a few other notable features of this free HTML Editor Syntax Highlighter plugin.

Code Coloring

Code Highlighter

Codemirror

Syntax Highlighter

Text Editor

Screenshots

FAQ

Yes! Partially… Since version 2.3.0, it works with the Gutenberg Code Editor, but only the Code Editor, not the Visual Editor. Press Ctrl+Shift+Alt+M / Cmd+Shift+Alt+M to switch between the Visual Editor and the Code Editor.

It does not work with blocks in the Gutenberg Visual Editor. This means it does not highlight code in:
* The Edit as HTML section of every block
* The Custom HTML block
* The Shortcode block
See the last screenshot for a visual example.

It may work with other code related parts of Gutenberg in the future. Track the progress here.

WordPress has a feature called the ‘auto p’ filter which:

“Changes double line-breaks in the text into HTML paragraphs.”

For example, auto p will take some standard post content like this:

Some long text that has many lines.  And paragraphs in it.

and turn it into something like this:

<p>Some long text<br/> that has many lines</p> <p>And paragraphs in it.</p>

Like your little brother, it thinks it’s helping, even if it isn’t.

What can I do about it?
* Disable auto p: There are several plugins you can use to disable auto p in the Classic Editor. I’d recommend Toggle wpautop.
* Show the p tags: The plugin TinyMCE Advanced has an Advanced Option to ‘Keep paragraph tags’. This option will still add the “auto p” tags but won’t strip them out of the visible code.

You can read more about this issues this may cause in this support thread.