توضیحات

Add syntax highlighting to the Classic editor’s Text (Code) tab and the block editor’s Code Editor using CodeMirror 6. HTML, inline CSS and JavaScript, and WordPress shortcodes are all highlighted.

Features

Syntax highlighting in the Classic editor’s Text (Code) tab for posts and pages
Syntax highlighting in the block editor’s Code Editor (not the Visual Editor)
Syntax highlighting for WordPress [shortcodes], [[escaped]] shortcodes and  tags
Search and replace, code folding, bracket and tag matching, auto-closing tags and brackets
Default, VS Code, Vim and Emacs key bindings
Save your posts and pages by pressing Ctrl+S (Cmd+S on Mac)
Restores the cursor position after the page reloads
13 themes and other settings, saved for each user
Fullscreen mode in the Classic editor: toggle with F11/Esc

If you would like to contribute to this plugin, view the github repo.

عکس‌های صفحه

سوالات متداول

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

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

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.

Can I search and replace?

Yes. Ctrl+F / Cmd+F opens the search panel, which also replaces.

Function: WINDOWS / MAC Search and replace: Ctrl+F / Cmd+F Find next: Ctrl+G / Cmd+G or F3 Find previous: Shift+Ctrl+G / Shift+Cmd+G or Shift+F3 Select next occurrence: Ctrl+D / Cmd+D Jump to line: Ctrl+Alt+G / Cmd+Opt+G

What happened to highlighting in the Theme & Plugin editors?

Since version 3.0 the Theme & Plugin file editors use WordPress’s own code editor, which highlights your code and checks HTML, JavaScript and JSON files for errors. Switch it on or off with Syntax Highlighting in your profile.

Why are p and br tags are being removed?

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.

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?

In the Classic editor’s Text tab, the fullscreen button at the right of the toolbar, or F11, makes the editor fill the window. Esc closes it (with Vim key bindings, use the button or F11).

With ‘Enable full-height editor and distraction-free functionality’ on (in ‘Screen Options’ at the top right of the editor page), use WordPress’s own distraction-free button instead.

Which browsers does it work with?

Current versions of Chrome, Edge, Firefox and Safari. Internet Explorer is not supported.

نقد و بررسی‌ها

DragoWeb جولای 10, 2026 1 پاسخ

This plugin is really cool. Now I can see any error I make while coding my page and, most of all, I can save it with CTRL+S keys, and that changed my life 😀 Thanks a lot!

Marco Panichi فبروری 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.

Alexander Guskov آکتوبر 21, 2021

The fantastical plugin that converts faceless TinyMCE to the powerful tool. The only suggestion is to mark dark/light themes, please

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.

ximbor آگست 10, 2021

Thank you for taking the time to create such an awesome plugin 🙂 lots of options of colours etc. Very good.

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.

خواندن تمامی 110 نقد و بررسی‌

توسعه دهندگان و همکاران

“HTML Editor Syntax Highlighter” نرم افزار متن باز است. افراد زیر در این افزونه مشارکت کرده‌اند.

“HTML Editor Syntax Highlighter” به 6 زبان ترجمه شده است. با تشکر از مترجمین برای همکاری و کمک‌هایشان.

ترجمه “HTML Editor Syntax Highlighter” به زبان شما.

علاقه‌ مند به توسعه هستید؟

کد را مرور کنید, را بررسی کنید مخزن SVN, یا مشترک شوید گزارش توسعه توسط RSS.

گزارش تغییرات

3.0.0

Rewritten in TypeScript on CodeMirror 6. Shortcodes, HTML, CSS and JavaScript are highlighted by proper parsers.
The Theme & Plugin file editors use WordPress’s own code editor again. It checks HTML, JavaScript and JSON files for errors.
13 themes, including the WordPress theme. Settings that used a removed theme switch to a similar light or dark one.
VS Code key bindings replace the Sublime Text ones. Themes and key bindings load only when used.
Closing shortcodes without an opening tag are marked.
New settings panel. Settings are saved in your user profile through the REST API, and existing settings carry over.
The block editor’s Code Editor keeps its own undo history and passes every change to the post as you type.
Match tags is now part of Match brackets, and Show scrollbars is gone.
Your 2.x settings are moved, not copied: going back to 2.x after opening a post in 3.0 starts from the default settings.

2.5.0

Tested with WordPress 7.1. Now requires WordPress 6.5 or later and PHP 7.4 or later.
Fixed: in the Gutenberg Code Editor, changes were lost when switching back to the Visual Editor with the keyboard shortcut. Changes are now saved as you type.
Fixed: the highlighter did not start when a post opened directly in the Gutenberg Code Editor.
Fixed: undoing with the Gutenberg toolbar, or content changed by saving, now shows up in the Code Editor.
Fixed: Gutenberg Code Editor layout styles for WordPress 6.6 and later.
Fixed: turning off Line Wrap or Numbering did not stay off after reloading the page.
Fixed: the editor failed to start the first time a user opened it.
Fixed: JavaScript error in the Theme & Plugin editors. The built-in WordPress code editor is now switched off the supported way.
Fixed: duplicate element IDs in the Key Bindings options.
Security: settings are validated before they are saved, and all output is escaped.
The settings panel can now be translated.
Removed the old UX survey code.

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 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 Peter 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 <W/>.
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
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 and grunt.js based build so new versions of CodeMirror can be applied easier
Updated CodeMirror to its latest version
Fixed FireFox bug: <select> drop-down would not display due to ::active state transform property
Fixed bug: toolbar covering text at small screen width
Fixed bug: switchEditors is undefined
Updated Css for wp 4.5
Added all available CodeMirror themes
Added syntax highlighting:
- for WordPress shortcodes
- for  tags and their variants
- NEW CodeMirror modes: shortcode.js & wordpresspost.js
Now calling hesh.js in an anonymous wrapper so it won’t pollute the global namespace
Now initializing hesh.js in an async compliant way
Refactored php to enqueue javascript in the WordPress friendly way
Tested with WordPress 4.5.2
Tested in all modern desktop browsers on OSX and Windows 10

1.6.9

Fixed issues with switching editor modes in WP 4.3

1.6.7

Added paragraph tag button, it’s visible only when the visual editor is disabled
Added minimum editor window height for the full-height mode

1.6.6

Added minimum editor window height for the full-height mode

1.6.5

Fixes for full-height mode
Fixed the issue with a hidden first line on smaller screens

1.6.4

Fixed the issue with a hidden first line on smaller screens

1.6.3

Fixed editor window height and resize handler
“headers already sent” issue

1.6.2

Compatibility with WP 4.0
Fixed fullscreen mode

1.6.0

You can change font size in the editor
Fixed issue with restoring cursor position
Updated CodeMirror library
Some minor improvements

1.5.0

Updated CodeMirror library
Some minor improvements

1.4.8

Add Link button now works with page selector window
Some minor improvements

1.4.7

You can now select Light or Dark editor colour theme

1.4.6

Fixed issue when “Add Media” button stopped working
Fixed editor resize bug in Visual mode.

1.4.5

Bug fixing

1.4.4

Add Media button now works correctly in Text mode
Fixed jumping cursor issue when ‘:’, ‘{‘, ‘}’ keys are pressed

1.4.3

Fixed jumping cursor issue when ‘/’ key is pressed.

1.4.2

Fixed a focus bug

1.4.1

Toggle fullscreen mode with F11/Esc hotkeys
Publish Post/Page hotkeys Ctrl + S / Cmd + S
Fixed some bugs for IE 8
Added development files to the zip bundle

1.4.0

New fullscreen mode
Remembers tab state
Editor resize handler
Code refactoring and minification for better loading performance

1.3.2

Updated CodeMirror library
Increased loading performance
Match brackets

1.3.0

CodeMirror library updated to version 3.02
Added quick-tags toolbar buttons
Preserve the scroll position after update or page reload

1.2.1

vertical resize for the editing box (works on FireFox, Chrome, Safari).
not working buttons/tags was hidden

1.2

Bug fix:
* plugin does not work in new post/page.

1.1

Bug fix (thanks to collinprice):
* when user has the visual editor disabled this plugin does not show up.

1.0

Initial release.

Excellent

It does its job very well

The fantastically useful plugin

Works, even on iOS/mobile

Top Tier Plugin

Delays while writing