Repository navigation
Syntax Highlighting for HTML block/ Code block and HTML editor #10423
Description
Syntax highlighting as implemented today is not great. We should aim to provide a consistent behavior across blocks while keeping the bundle size as small as possible:
- It should be lazy-loadable
- It should be generic enough to be used as an npm dependency
- It should be consistent.
Also, nowadays, alternative editors like "Monaco Editor" do a better job than CodeMirror, we should try to explore it and see how it fits.
Activity
mor10 commentedon Oct 12, 2018
Just for clarity: There is no syntax highlighting at all in 4.0 RC1, correct? I remember there used to be, but now both the
codeandhtmlblocks show plain unformatted text.chrisvanpatten commentedon Oct 12, 2018
@mor10 it had to be removed due for technical reasons but the hope is to bring it back at some point. I forget the ticket number but I’m sure someone else can dig it up!
youknowriad commentedon Oct 12, 2018
@mor10 yes, that's true. The
htmlblock used to have it, but we removed it for the moment. We were not satisfied with the implementation and it was not consistent. This will be back at some point though.Clorith commentedon Oct 16, 2018
Looking forward to the return :)
I would like to interject that it was mentioned that we might use something other than CodeMirror in Gutenberg, this seems like a poor choice, given that core comes bundled with CodeMirror. This means the package size doesn't affect us at the very least, it's not the smallest library, so it would be a shame to not use it when it's bundled and "always there" for us. Hopefully we can come up with an implementation that is workable with it.
xy0 commentedon Oct 26, 2018
Please bring it back, I found it really useful and didn't experience any issues except for unwanted end tags being created sometimes. The plain text box that exists now is pretty much exactly the same as the shortcode and code blocks.
PeterBooker commentedon Nov 17, 2018
The Monaco editor is not supported in mobile browsers or mobile web frameworks.microsoft.github.io/monaco-editor/CodeMirror is currently being rewritten, as CodeMirror 6 (sponsored by Automattic too), which looks like it might meet the OP requirements. It might be worth reaching out/contributing to ensure that it does.
willdelphia commentedon Nov 21, 2018
any chance this will be fixed by the 5.0 release?
noisysocks commentedon Nov 21, 2018
@willdelphia: No, this will not be in the 5.0 release.
willdelphia commentedon Jan 9, 2019
Is there a place where people can vote for upcoming features to take priority over others? If so, this has my vote.
willdelphia commentedon Mar 8, 2019
https://wordpress.org/plugins/ace-html-block/
5 remaining items
dingo-d commentedon May 17, 2019
So any news on the syntax highlight feature for the default code block? This is a must have for technical blogs.
Isn't REST API response plain JSON? Not sure where syntax highlighting comes into play here 🤷♂
earnjam commentedon Aug 15, 2019
It is, but in the content rendered value of the response, it would return the content of the post or block with the additional required markup to allow just CSS on the front-end to style the various code portions, instead of doing the parsing/modifying via JS.
afercia commentedon Aug 23, 2019
For some design exploration on the Code Editor, see #17017
sudip358 commentedon Sep 15, 2020
Could you please inline editing system?
melroy89 commentedon Dec 16, 2021
Maybe see also Monaco editor: https://github.com/microsoft/monaco-editor, which could be used by Gutenberg.
porg commentedon Jul 18, 2023
Until that feature gets implemented (if ever)
okmttdhr commentedon Mar 26, 2024
I'm proposing #60155.
For lazy-loading, I'm utilizing Webpack's
import()for now (c.f., #53380 (comment)).carolinan commentedon Mar 24, 2026
With "HTML editor" do we mean the block editor and site editor "Code editor mode" ?
westonruter commentedon Mar 24, 2026
@carolinan yes, any interface that exposes code editing should have syntax highlighting.