Code Pro

HTML Code Editor & Syntax Highlighting

Much better than the core/html block, it’s powered by the Monaco editor and Emmet autocomplete. With a split preview, it can run as an HTML code block or highlight code on the front end so others can easily copy the code snippets.

frame 1

Change Editor Font Size

If you need more space, you can adjust the editor’s font size.

Block Width

You can set the block width to match any core group blocks: None, Wide, or Full.


You can choose whether you need extra classes and IDs. If not, simply remove the wrapper to have the exact output as in the code editor.

More! You can use it as code snippets preview as well

just Toggle Syntax Highlighting

Supported languages:

HTML, CSS, SCSS, JavaScript, PHP, TypeScript, Bash, Twig, YAML, Plaintext, JSON

code pro hl


For Free. Soon it will be on the WordPress.org