Add syntax highlighting to WordPress code editors using CodeMirror.js

snowbedding

Easy Syntax Highlighter

Modern, lightweight syntax highlighter for WordPress using Highlight.js

rraub

Peter Mukhortov

collinprice

James Bradford

Add syntax highlighting in the Classic Post & Page HTML text editor, Gutenberg Code Editor, and Theme & Plugin editors using CodeMirror.js
<h4>Features</h4>
<ul>
<li>Syntax highlighting in the Post/Page HTML editor</li>
<li>NEW: Syntax highlighting in the Gutenberg Code Editor (not Visual Editor)</li>
<li>Syntax highlighting in the Theme & Plugin editors</li>
<li>Syntax highlighting for WordPress <code>[shortcodes/]</code></li>
<li>Save your posts and pages pressing <code>Ctrl+S</code> (<code>Cmd+S</code> on Mac)</li>
<li>Restore cursor position after page is reloaded</li>
<li>Huge selection of themes and other customization options</li>
<li>Fullscreen mode: toggle with <code>F11</code>/<code>Esc</code> hotkeys</li>
</ul>
If you would like to contribute to this plugin, view the <a href="https://github.com/mukhortov/HESH-WordPress-Plugin" rel="nofollow ugc">github repo</a>.
If you’re a regular user of this plugin, please consider taking a short <a href="https://goo.gl/forms/xvaHgd7sZEbBbFAL2" rel="nofollow ugc">User Experience Survey</a> to provide feedback that will help shape the new version 3.0.

HTML Editor Syntax Highlighter

And what's really neat, is that there is no WP Admin page, all settings are performed while editing. This is a perfect job. I have only used the classic editor (still waiting until Gutenberg is more mature). A previous reviewer wrote that text added in the Text tab is lost when switching to Visual - I have not seen this happen. I'm very happy :)

Superb, more options than I imagined

HESH is built on top of Code Mirror which is first class code. The implementation is somewhat eclectic including a settings button in the front end which allows the user to really play with editor settings. Easy access to the settings is convenient at first and then a bit of a distraction.

HESH even highlights WordPress shortcodes [shortcode] syntax.

What HESH doesn't have is Markdown syntax highlighting in the posts/pages plain text editor but the WordPress shortcodes and HTML highlighting helps make up for it.

What is buggy are the settings on iPhone (iOS 13.5) where the settings buttons more or less don't work and the settings can't be closed. If you don't touch the settings though, HESH provides a better plain text editor than WordPress default (which can be very finicky to accept text entry). It remains easier to edit on iOS with HESH installed than without so no downnmarks here.

All in all a great plugin, a bit overwhelmed right now with legacy support for WordPress 4.9 editor, Classic Editor, Code view, plain text editor, Gutenberg and the sixteen different kinds of blocks which might need syntax highlighting. I can't blame the plugin authors for not being on top of all editors all the time now in the current Gutenberg-induced editor hell.

Very, very grateful for their hard work and looking forward to HESH v3.

Alternatives to HTML Editor Syntax Highlighter

Top alternatives