-
Notifications
You must be signed in to change notification settings - Fork 11
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
Add syntax highlighting to code block in editor #8
Comments
18 months later, is this likely to happen, or what's the currently known biggest obstacle? |
I would also look to use this block as a syntax highlighting capable code editor to replace core HTML block, which still (approaching WP 5.6) has various annoying limitations. |
It's not a high priority for me, personally. It can still happen though. The value is diminished by not being able to have the syntax highlighting while writing, since this is not the purpose of highlight.js. I don't understand what you mean about this relates to the Custom HTML block in core. It seems like you're wanting syntax highlighting while editing the code? For that, the answer is CodeMirror which is already in core but not currently used in the editor due to its weight. |
I know that this is just minor important, but it would be damn-cool ;-) |
I just saw a brilliant way to achieve this: https://github.com/WebReflection/highlighted-code Demo: https://javascriptweekly.com/link/124430/4968b3d1fc (H/t JavaScript Weekly) It works by having the text in the |
One complication here I just realized: auto-detection of the language won't work in the editor since it is a feature of highlight.php not highlight.js. One possibility would be to create a new REST API endpoint to do the language detection, and the editor can use this for picking the language for highlighting in the editor when auto is selected. |
Can't you auto detect at post publish time? |
Not if the point is to have WYSIWYG syntax highlighting inside the editor. After entering code, you'd want to see how it would look syntax-highlighted without having to preview it on the frontend. Since there wouldn't be any code to do the detection when the block is first inserted, the detection should perhaps happen once the block is initially unfocused. Otherwise, the detection could be re-calculated after X seconds debouncing. |
Just noting I once pulled this off in a custom WordPress block essentially with this technique: I probably have a copy of it laying around if helpful. |
@chriscoyier Thanks! Looking at the Pen it does seem quite similar: text in the editable field be transparent, with that field overlaying another element that continuously updates with a mirror of the edited text with syntax-highlighting applied. What's different now in the WordPress Code block is that it's no longer using a (TIL: |
We could include support for previewing the syntax highlighting for a Code block by loading highlight.js into the editor, and using it to colorize the Code blocks.
In contrast to the Custom HTML block which has HTML and Preview tabs, we could have colorized text shown when the block is not selected, and then automatically colorize when de-selecting. Or perhaps the colorization should always be done when de-selected but then also provide a way to preview with tabs while it is selected.
The text was updated successfully, but these errors were encountered: