New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax Highlighting for HTML block/ Code block and HTML editor #10423

youknowriad opened this Issue Oct 9, 2018 · 8 comments


None yet
9 participants

youknowriad commented Oct 9, 2018

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.


This comment has been minimized.

mor10 commented 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 code and html blocks show plain unformatted text.


This comment has been minimized.


chrisvanpatten commented 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!


This comment has been minimized.


youknowriad commented Oct 12, 2018

@mor10 yes, that's true. The html block 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.


This comment has been minimized.

Clorith commented 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.


This comment has been minimized.

xy0 commented 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.


This comment has been minimized.

PeterBooker commented Nov 17, 2018

The Monaco editor is not supported in mobile browsers or mobile web frameworks.

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.


This comment has been minimized.

willdelphia commented Nov 21, 2018

any chance this will be fixed by the 5.0 release?


This comment has been minimized.


noisysocks commented Nov 21, 2018

@willdelphia: No, this will not be in the 5.0 release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment