No syntax highlighting in WYSIWYG mode

[nhn]

No syntax highlighting in WYSIWYG mode

[kyuwoo-choi]

highlighting code in wysiwyg is easy.
hard part is managing highlighting tags while contenteditable manipulate that.
for now I have no option to make it pretty.

leave what you think if someone has an option.

[joye-wang]

Same question, why the preview area can highlight the code? Does it re-render markdown?

[brettz9]

It would also be nice to have the syntax coloring in the editable part of the Markdown mode (as in https://laobubu.net/HyperMD/#README.md or https://stackedit.io/app# ) ...

@kyuwoo-choi : Is it possible you could mix the modes in the case of code blocks, so that a WYSIWYG code block is actually just the same mode as in the above?

[seonim-ryu]

First, I explain the editor implementation. The Markdown editor, the WYSIWYG editor, and the Preview use the different dependency modules to input data highlighting. It also provides different highlighting methods depending on the usability.

1. Preview (or with Markdown editor)

This is using the renderer of markdown-it and highlight.js. This works as expected of everyone. After editing in the editor, import the markdown data and highlight it.

2. Markdown editor

This is using CodeMirror. I checked that CodeMirror is highlighting the code block. So I think it's a bug and I'll check if it can be solved. This seems to be related to the question below.

It would also be nice to have the syntax coloring in the editable part of the Markdown mode (as in https://laobubu.net/HyperMD/#README.md or https://stackedit.io/app# ) ...

3. WYSIWYG editor

This is using Squire. First of all, the WYSIWYG editor cannot check the code language with syntax like Markdown. That's why the WYSIWYG editor uses the UI to select code languages ​​and provide highlighting previews. Different languages ​​have different highlighting methods, and there is no way to handle this in the editor.

I know why you think this is like a bug. Perhaps you can edit the code block in the editor, so it's as if highlighting should be automatic. And it's strange that highlighting doesn't work after editing through the editing layer. I think it should be handled considering usability and the code block in the editor seems to be in read mode. That way all the issues will be resolved. 🤔

[brettz9]

Yes, no. 2 in your list was my issue. I see per CodeMirror's GFM demo that it:

Optionally depends on other modes for properly highlighted code blocks.

And since on https://codemirror.net/doc/manual.html#config , it says:

This will initialize the editor with a piece of code already in it, and explicitly tell it to use the JavaScript mode (which is useful when multiple modes are loaded).

...I think (and seem to recall it working this way) that it will make them available as long as you:

1. Include the other mode scripts (e.g., JavaScript, HTML, JSON, and CSS) (and maybe stylesheets, though the CodeMirror demo doesn't seem to need these); the source of the gfm demo includes modes for xml, javascript, css, htmlmixed, clike (in addition to gfm and markdown) ; it also includes addon/mode/overlay.js and meta.js which appear may be needed for such mixed languages.
2. Ensure you have defined mode: {name: "gfm"} or mode: "gtm" (so that if you load other sources in the above step, CodeMirror will know which one to use as the main)
3. Do not set fencedCodeBlockHighlighting to false (the default is true) mentioned on the Markdown page. (This is not mentioned on the GFM page but since GFM inherits the options from Markdown ("Gfm mode supports these options (apart those from base Markdown mode)"), it may apply if you are using it.)

[brettz9]

As far as no. 3 in your list, I'm not sure I understood you fully, but to try to reply:

First of all, the WYSIWYG editor cannot check the code language with syntax like Markdown. That's why the WYSIWYG editor uses the UI to select code languages ​​and provide highlighting previews. Different languages ​​have different highlighting methods, and there is no way to handle this in the editor.

Since the editor even shows it is aware of what language is in use (by hovering on the block, it shows on the top right), it should be possible to change the language mode here. It is definitely technically possible, as the demo links I gave earlier can do it, and these are partly WYSIWYG.

I think it should be handled considering usability and the code block in the editor seems to be in read mode.

If you mean that you think that reading mode should be distinct from the preview mode, and therefore not have highlighting, I can kind of understand this logic, but I don't really have the same personal preference, because:

1. As per my comment at #171 (comment) , it would be useful to be able to have the Markdown part of the Editor with the Preview turned off, either by toggle and/or optionally as the default.
2. I would hope the syntax highlighting could be made optional for those who prefer to be able to see clearly what they are typing, esp. in a log code block, without needing to look back and forth with the preview.

[stale]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale]

This issue will be closed due to inactivity. Thanks for your contribution!