# Implementing WYSIWYG Markdown editor in CodeMirror **URL:** \ **Category:** Uncategorized\ **Created:** [May 2, 2020, 9:37am UTC](https://discuss.codemirror.net/t/implementing-wysiwyg-markdown-editor-in-codemirror/2403 "2020-05-02T09:37:35Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![ericaxu](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/e/a9adbd/32.png) [@ericaxu](https://discuss.codemirror.net/u/ericaxu)\ **Post date:** [May 2, 2020, 9:37am UTC](https://discuss.codemirror.net/t/implementing-wysiwyg-markdown-editor-in-codemirror/2403/1 "2020-05-02T09:37:35Z")
First of all, CodeMirror is awesome! We’ve developing a Markdown note-taking app and we’re using CodeMirror for our Markdown source code editor. We’re still in private beta, so haven’t made any money yet, nonetheless we just donated a small amount on PayPal to thank @marijn for your work. It was very to work with CodeMirror. Onto the crazy-sounding title… I know CodeMirror is supposed to work with highlighting and editing source code, but recently we came across something called HyperMD ([GitHub](https://github.com/laobubu/HyperMD), [online demo](https://laobubu.net/HyperMD/#README.md)). It’s basically a WYSIWYG editor in CodeMirror. Inline elements like bold and italics would display their markup upon being edited, and inline HTML will expand to its raw form when interacted. I looked at the code and it looks like it was done through inner modes and attaching lots of DOM event handlers… For our project, we’re planning to build a WYSIWYG Markdown editor. HyperMD’s approach looks interesting, and if implemented in CodeMirror, we can get some otherwise tricky features for free (multiple carets and vim mode, for example). Our other alternative is to use ProseMirror and extend it ourselves. My question is, is there some fundamental problem with HyperMD’s approach? For example, I know weird things might happen when the lines have different heights in CodeMirror, and that’s one of our concerns. Is there anything else we should look out for? Is CodeMirror designed with this kind of (crazy) use case in mind at all? ---
**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\ **Post date:** [May 2, 2020, 1:36pm UTC](https://discuss.codemirror.net/t/implementing-wysiwyg-markdown-editor-in-codemirror/2403/2 "2020-05-02T13:36:39Z")
> [@ericaxu](#): > > For example, I know weird things might happen when the lines have different heights in CodeMirror, Different line heights should not be a problem. You’ll have to do a lot of custom scripting to apply styles to your elements and expand/collapse them at the right moment, and something like tables is probably not going to work, but other than that I don’t see any serious problems. ---
**Author:** ![ericaxu](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/e/a9adbd/32.png) [@ericaxu](https://discuss.codemirror.net/u/ericaxu)\ **Post date:** [May 2, 2020, 2:18pm UTC](https://discuss.codemirror.net/t/implementing-wysiwyg-markdown-editor-in-codemirror/2403/3 "2020-05-02T14:18:45Z")
Thanks so much for you answer! That’s reassuring to know. > [@marijn](#): > > and something like tables is probably not going to work Tables will not be expanded back to Markdown when edited, but rather created after the header has been entered. Is that realistic to do? ---
**Author:** ![ericaxu](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/e/a9adbd/32.png) [@ericaxu](https://discuss.codemirror.net/u/ericaxu)\ **Post date:** [May 3, 2020, 6:59pm UTC](https://discuss.codemirror.net/t/implementing-wysiwyg-markdown-editor-in-codemirror/2403/4 "2020-05-03T18:59:28Z")
@marijn I dug into ProseMirror some more and felt like ProseMirror is a better choice for something like this, especially with NodeView for editing math and code blocks. By storing the markup in Marks expanding/folding should also be doable. Do you think using ProseMirror would be better than hacking CodeMirror to accomplish the same thing? I hate to bother you, but being the author of both libraries, I think you’re the world’s most qualified person to give me some pointers… ---
**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\ **Post date:** [May 3, 2020, 7:41pm UTC](https://discuss.codemirror.net/t/implementing-wysiwyg-markdown-editor-in-codemirror/2403/5 "2020-05-03T19:41:28Z")
> [@ericaxu](#): > > Do you think using ProseMirror would be better than hacking CodeMirror to accomplish the same thing? Probably. It’ll definitely involve less fighting against the library. ---
**Author:** ![ericaxu](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/e/a9adbd/32.png) [@ericaxu](https://discuss.codemirror.net/u/ericaxu)\ **Post date:** [May 3, 2020, 7:45pm UTC](https://discuss.codemirror.net/t/implementing-wysiwyg-markdown-editor-in-codemirror/2403/6 "2020-05-03T19:45:50Z")
Thank you so much! \<3 ---
**Author:** ![linonetwo](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/linonetwo/32/904_2.png) [@linonetwo](https://discuss.codemirror.net/u/linonetwo)\ **Post date:** [October 25, 2020, 5:35am UTC](https://discuss.codemirror.net/t/implementing-wysiwyg-markdown-editor-in-codemirror/2403/7 "2020-10-25T05:35:17Z")
@ericaxu Can you make prosemirror be like HyperMD to “click a line to show raw md source or raw html source”?