Title: HTML Editor Syntax Highlighter
Author: Peter Mukhortov
Published: Муус устар 18, 2012
Last modified: Кулун тутар 16, 2024
---
Search plugins
This plugin **hasn’t been tested with the latest 3 major releases of WordPress**.
It may no longer be maintained or supported and may have compatibility issues when
used with more recent versions of WordPress.
# HTML Editor Syntax Highlighter
By [Peter Mukhortov](https://profiles.wordpress.org/nixdns/)
[Download](https://downloads.wordpress.org/plugin/html-editor-syntax-highlighter.2.4.4.zip)
* [Details](https://sah.wordpress.org/plugins/html-editor-syntax-highlighter/#description)
* [Reviews](https://sah.wordpress.org/plugins/html-editor-syntax-highlighter/#reviews)
* [Development](https://sah.wordpress.org/plugins/html-editor-syntax-highlighter/#developers)
[Support](https://wordpress.org/support/plugin/html-editor-syntax-highlighter/)
## Description
Add syntax highlighting in the Classic Post & Page HTML text editor, Gutenberg Code
Editor, and Theme & Plugin editors using CodeMirror.js
#### Features
* Syntax highlighting in the Post/Page HTML editor
* _NEW:_ Syntax highlighting in the Gutenberg _Code Editor_ (not _Visual Editor_)
* Syntax highlighting in the Theme & Plugin editors
* Syntax highlighting for WordPress `[shortcodes/]`
* Save your posts and pages pressing `Ctrl+S` (`Cmd+S` on Mac)
* Restore cursor position after page is reloaded
* Huge selection of themes and other customization options
* Fullscreen mode: toggle with `F11`/`Esc` hotkeys
If you would like to contribute to this plugin, view the [github repo](https://github.com/mukhortov/HESH-WordPress-Plugin).
If you’re a regular user of this plugin, please consider taking a short [User Experience Survey](https://goo.gl/forms/xvaHgd7sZEbBbFAL2)
to provide feedback that will help shape the new version 3.0.
## Screenshots
* [[
* Syntax highlighting in the Classic Post/Page HTML editor.
* [[
* Quick Settings Panel.
* [[
* Advanced Settings Panel.
* [[
* Syntax highlighting in the Theme/Plugin editor.
* [[
* Example code highlighting.
* [[
* [[
## FAQ
### Does it work with Gutenberg?
**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.](https://github.com/mukhortov/HESH-WordPress-Plugin/issues/72)
### How do I get the Classic Editor back!?
Since WordPress version 5.0, Gutenberg is the default editor. If you want this plugin
to work the way it used to, you’ll have to download the [Classic Editor plugin](https://wordpress.org/plugins/classic-editor/).
### Can I search and replace?
**Function: WINDOWS / MAC**
**Start searching:** `Ctrl-F` / `Cmd-F` **Find next:**`
Ctrl-G` / `Cmd-G` **Find previous:** `Shift-Ctrl-G` / `Shift-Cmd-G` **Replace:**`
Shift-Ctrl-F` / `Cmd-Opt-F` **Replace all:** `Shift-Ctrl-R` / `Shift-Cmd-Opt-F` **
Persistent search:** `Alt-F` (dialog doesn’t auto-close, `Enter` to find next, `
Shift-Enter` to find previous) **Jump to line:** `Alt-G`
### Why are p and br tags are being removed?
WordPress has a feature called the _[‘auto p’](https://codex.wordpress.org/Function_Reference/wpautop)_
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:
```
Some long text
that has many lines
And paragraphs in it.
```
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](https://wordpress.org/plugins/toggle-wpautop/).***
Show the p tags:** The plugin [TinyMCE Advanced](https://wordpress.org/plugins/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](https://wordpress.org/support/topic/tags-being-stripped-in-classic-block-content-after-wp-upgrade/).
### Why is my code is being reformatting when I switch to the Visual Editor and back?
The WordPress _Visual Editor_ needs to reformat code in order to function correctly.
This is not something that this plugin can fix. **You can disable the Visual Editor
entirely** by going to: _Users_ > _Your Profile_ > _Visual Editor: check ‘Disable
the visual editor when writing’_.
### Scrollbars are not appearing! / Scroll position is not reset! / Code window is not resizable!
You may have the _‘Enable full-height editor and distraction-free functionality’_
turned on. This is a native WordPress feature that changes the scrolling and fullscreen
behavior of both the _Code Editor_ and _Visual Editor_.
**To Disable Full-height Editor:** Go to _‘Screen Options’_ (in the top right of
the editor page), then uncheck _‘Enable full-height editor and distraction-free
functionality’_ in the _Additional Settings_ section.
### How do I use Fullscreen?
The fullscreen button on the top right of the editor will do one of two things depending
on the _‘Enable full-height editor and distraction-free functionality’_ setting
in your _‘Screen Options’_ (in the top right of the editor page):
* **Full-height
Editor _Enabled_:** Toggles the _‘distraction free mode’_. * **Full-height Editor
_Disabled_:** Toggles the _‘fullscreen mode’_.
**Keybindings:** `F11` will toggle fullscreen on and off, and `esc` will close fullscreen.
### Does it work with Internet Explorer?
**Not really…** It is partially supported in IE 11. Known bugs are tracked [here](https://github.com/mukhortov/HESH-WordPress-Plugin/issues/41),
but won’t be fixed. Anything less that IE 10 isn’t even supported by Microsoft anymore.
If you are using Internet Explorer you should get a [better browser](https://www.mozilla.org/en-US/firefox/new/).
## Reviews
### [It does its job very well](https://wordpress.org/support/topic/it-does-its-job-very-well/)
[Marco Panichi](https://profiles.wordpress.org/marcopanichi/) Олунньу 24, 2024
In the era of Gutenberg and visual builders, as a good old programmer of the past,
I need to edit HTML code in the showcase pages of the WordPress sites I create.
This plugin is therefore a must-have for me. It works very well, it doesn’t have
many options but all those necessary to configure the editing environment comfortable
for me.
### [The fantastically useful plugin](https://wordpress.org/support/topic/the-fantastically-useful-plugin/)
[Alexander Guskov](https://profiles.wordpress.org/forcesail/) Алтынньы 21, 2021
The fantastical plugin that converts faceless TinyMCE to the powerful tool. The
only suggestion is to mark dark/light themes, please
### [Works, even on iOS/mobile](https://wordpress.org/support/topic/works-1934/)
[FolioVision](https://profiles.wordpress.org/foliovision/) Атырдьах ыйа 20, 2021
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.
### [Top Tier Plugin](https://wordpress.org/support/topic/top-tier-plugin-14/)
[ximbor](https://profiles.wordpress.org/ximbor/) Атырдьах ыйа 10, 2021
Thank you for taking the time to create such an awesome plugin 🙂 lots of options
of colours etc. Very good.
### [Delays while writing](https://wordpress.org/support/topic/delays-while-writing/)
[muhiBBi](https://profiles.wordpress.org/muhibbi/) Бэс ыйа 10, 2021
It’s nice that this plugin is customizable. However, it causes delays while writing
in the editor. These pauses are very frustrating.
### [Superb, more options than I imagined](https://wordpress.org/support/topic/superb-more-options-than-i-imagined/)
[Tim Reeves](https://profiles.wordpress.org/tim-reeves/) Кулун тутар 19, 2021
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 🙂
[ Read all 110 reviews ](https://wordpress.org/support/plugin/html-editor-syntax-highlighter/reviews/)
## Contributors & Developers
“HTML Editor Syntax Highlighter” is open source software. The following people have
contributed to this plugin.
Contributors
* [ Peter Mukhortov ](https://profiles.wordpress.org/nixdns/)
* [ James Bradford ](https://profiles.wordpress.org/arniebradfo/)
* [ rraub ](https://profiles.wordpress.org/rraub/)
* [ collinprice ](https://profiles.wordpress.org/collinprice/)
“HTML Editor Syntax Highlighter” has been translated into 6 locales. Thank you to
[the translators](https://translate.wordpress.org/projects/wp-plugins/html-editor-syntax-highlighter/contributors)
for their contributions.
[Translate “HTML Editor Syntax Highlighter” into your language.](https://translate.wordpress.org/projects/wp-plugins/html-editor-syntax-highlighter)
### Interested in development?
[Browse the code](https://plugins.trac.wordpress.org/browser/html-editor-syntax-highlighter/),
check out the [SVN repository](https://plugins.svn.wordpress.org/html-editor-syntax-highlighter/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/html-editor-syntax-highlighter/)
by [RSS](https://plugins.trac.wordpress.org/log/html-editor-syntax-highlighter/?limit=100&mode=stop_on_copy&format=rss).
## Changelog
#### 2.4.4
* Added about 15 new themes
#### 2.4.3
* Updated css for wordpress v5.8
#### 2.4.2
* removing survey notice
#### 2.4.1
* fixed bug: notification would not dismiss if the visual editor was open
* fix bug: Setting Form can now submit from memory, not just when the dom is in
the page.
#### 2.4.0
* updating a major number so I can review downloads more accurately.
* reorganized the codebase
* Reverting the name-change of `hesh.php`
This name-change of `html-editor-syntax-
highlighter.php` to `hesh.php` caused the plugin to deactivate itself because
the php file was missing. Reverting the name-change of `hesh.php` will cause
this all over again, but hey.
#### 2.3.5
* remove Github Updater headers
* testing WP update Process
#### 2.3.4
* fixing typo `$this->$surveyLink` to `$this->surveyLink`
#### 2.3.3
* Updated Release process
* Fix bug: #80 Only activate on pages where the editor will run
* Added UX survey notice.
#### 2.3.2
* added a seventh screenshot
* removed [`smartIndent`](https://codemirror.net/doc/manual.html#option_smartIndent)
because its annoying
* fixed gulp watch task
* updated FAQ
#### 2.3.1
* Fixing JS error in issue #81 _(Hopefully?)_
* Updating authorship so James can get a job. Will revert to Petr Later…
#### 2.3.0
* Support for Gutenberg Code Editor!
* Added new themes: Codepen and WordPress (which is now the default).
* Created new screenshots for the plugin page.
* New Logo based on ``.
* Updated FAQ with Gutenberg info.
* Changed build steps to only export one `.css` and `.js` file
#### 2.2.6
* added Gutenberg information after the update to WordPress version 5.0
#### 2.2.5
* fixed bug: #75 removing `f` typo
#### 2.2.4
* fixed bug: Allow Multiple Instances of CodeMirror on a page #71
* fixed bug: js error when custom post type does not support ‘editor’ feature #
62
#### 2.2.3
* A patch for WP 4.9. No more double editors in theme/plugin editors.
#### 2.2.2
* fixed bug: github updater in production issue #52
* updated Codemirror to latest release version
#### 2.2.1
* fixed bug: editor was not stopping when switching between visual editor and text
editor
#### 2.2.0
* added search & replace with dialog
* added highlighting options
* added auto-close tags and brackets option
* added code-folding option
* added scrollbars option
* added keyMap options
* added _Default_ and _None_ themes
* fixed bug: made tab management agnostic to tab count and names — #50
#### 2.1.0
* added search
* add highlighting for ``
* fixed bug: Theme and Plugin Editor not working
#### 2.0.1
* fixed bug: esc key weirdness
* fixed bug: don’t steal editor focus from title on _‘Add New Post’_
* fixed bug: scrollbar appears in middle of text editor
* fixed bug: toolbar can be too big
#### 2.0.0
* now adjusts to the _‘Enable full-height editor and distraction-free functionality’_
setting
* syntax highlighting on Theme and Plugin Editor pages
* fixed bug: native wp editor buttons work on content — no longer overwrites with
emulating buttons
* **Settings:**
- added an extendable settings panel
- saves settings to WordPress user profile
- added more text customization settings
* basically rewrote the whole codebase
#### 1.7.2
* fixed bug: pre v5.4 php was causing an error — `func_that_returns_array()['index']`
syntax is [not allowed](http://php.net/manual/en/language.types.array.php#example-105)
* fixed bug: CodeMirror not initializing properly when new user tries to edit post
for the first time
* fixed bug: CodeMirror no longer trying to load on “All Posts” and “All Pages”
* fixed bug: Font and theme were reset to default when switching to the visual
editor and back
#### 1.7.1
* fixed bug: return key would create two new lines and ignore indent
* fixed bug: wp native “Add Media” button was not working
* added version string to .css and .js resources for cache-busting purposes
#### 1.7.0
* Ctrl-S / Cmd-S saving will now select “Save Draft” if the post has not been published
yet
* Switched to an [npm](https://www.npmjs.com/) and [grunt.js](http://gruntjs.com/)
based build so new versions of CodeMirror can be applied easier
* Updated CodeMirror to its latest version
* Fixed FireFox bug: `