# Visual markdown editor panel extension **URL:** \ **Category:** Plugins\ **Created:** [March 31, 2015, 11:08am UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655 "2015-03-31T11:08:23Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![DieserJonas](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dieserjonas/32/10873_2.png) [@DieserJonas](https://forum.getkirby.com/u/DieserJonas)\ **Post date:** [March 31, 2015, 11:08am UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/1 "2015-03-31T11:08:24Z")
While working on one of my latest projects, I stumbled across an amazing markdown editor “MirrorMark” based on CodeMirror. As I really like the style and the highlighting, I decided to port it over to Kirby and make a panel extension out of it. With this brief explanation in place, let me introduce you to: ## Visual Markdown Editor This Panel field plugin for Kirby 2 enables you to use an intuitive and visual markdown editor without any hazzle. Just drop in the plugin and you’re good to go! ![](https://dub1.discourse-cdn.com/flex017/uploads/getkirby/464/096ec6f6b6e19666.gif) ### Features - Extensive markdown syntax highlighting - Convenient toolbar including the most used markdown features - Multiple cursors / selections support - Help links to support users unfamiliar with markdown - Fully compatible with existing content & templates - Distraction-free fullscreen mode **[Check it out on GitHub!](https://github.com/JonasDoebertin/kirby-visual-markdown) You can find all further setup instructions there.** As always, let me know what you think about it. Every constructive feedback is very welcome and I’m more then happy to optimize and extend the extension based on your feedback! ---
**Author:** ![Malvese](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/malvese/32/12375_2.png) [@Malvese](https://forum.getkirby.com/u/Malvese)\ **Post date:** [March 31, 2015, 12:25pm UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/2 "2015-03-31T12:25:41Z")
Looks great! Thank you. I was looking for something like this, but hadn’t discovered MirrorMark (it seems to be a very recent project). ~~Every other alternative I’ve seen had big issues.~~ Oh well, I just reported a bunch of serious issues on MirrorMark’s Github page. The project is fresh and the owner seems to be very reactive, things should be ironed-out sooner than later. What I like is that the original Markdown is kept in the editor. Most of them use contenteditable and html and everything has to be converted to markdown before the page is saved. This is an editor than doesn’t try to hide markdown. My only gripe with CodeMirror is that it is pretty useless on a phone. That said I have yet to see a web editor that works well on mobile (some “native” ones in apps work). An easy workaround would be to disable it when the screen is very narrow. ---
**Author:** ![Malvese](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/malvese/32/12375_2.png) [@Malvese](https://forum.getkirby.com/u/Malvese)\ **Post date:** [March 31, 2015, 7:24pm UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/3 "2015-03-31T19:24:03Z")
Just thought the directory name is perhaps a bit generic? “markdown” could be anything related to Markdown… “mirrormark”? “visualmarkdown”? ---
**Author:** ![Luke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/luke/32/3083_2.png) [@Luke](https://forum.getkirby.com/u/Luke)\ **Post date:** [March 31, 2015, 7:46pm UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/4 "2015-03-31T19:46:57Z")
I spotted this in your repositories a little while ago, when it probably wasn’t even finished and started using it. Great job. ---
**Author:** ![DieserJonas](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dieserjonas/32/10873_2.png) [@DieserJonas](https://forum.getkirby.com/u/DieserJonas)\ **Post date:** [March 31, 2015, 9:07pm UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/5 "2015-03-31T21:07:19Z")
You’re right, it is a bit generic. However, `mirrormark` is not an option for me. The extension will eventually move away from using MirrorMark but use it’s own CodeMirror overlay instead. `visualmarkdown` would make the most sense. I just thought it is too long and looks odd in the blueprints (I know, I’m a bit oversensitive here 🙂 ) ---
**Author:** ![DieserJonas](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dieserjonas/32/10873_2.png) [@DieserJonas](https://forum.getkirby.com/u/DieserJonas)\ **Post date:** [March 31, 2015, 9:07pm UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/6 "2015-03-31T21:07:48Z")
Thanks a lot! 😊 ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [March 31, 2015, 9:31pm UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/7 "2015-03-31T21:31:49Z")
Looks really nice:) Maybe clients will prefer the wysiwyg version better, but I think for those who are willing to get along with markdown, it’s a great start. Only thing I find missing so far, is headers. And maybe the ability to upload an image rather than inserting a placeholder. Great job. ---
**Author:** ![DieserJonas](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dieserjonas/32/10873_2.png) [@DieserJonas](https://forum.getkirby.com/u/DieserJonas)\ **Post date:** [March 31, 2015, 9:47pm UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/8 "2015-03-31T21:47:35Z")
Thanks for your suggestions. Headers will definitely be added. I have to see what I can do about uploading images. ---
**Author:** ![Malvese](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/malvese/32/12375_2.png) [@Malvese](https://forum.getkirby.com/u/Malvese)\ **Post date:** [April 1, 2015, 9:12am UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/9 "2015-04-01T09:12:41Z")
Regarding images, I wonder if there is a way to display them in the editor instead of the markdown/Kirbytext? I also like how Ulysses 3 displays image and link info. Lots of crazy ideas here: [http://www.ulyssesapp.com/mac/](http://www.ulyssesapp.com/mac/) in the “Plain Text Enhanced” section. Very excited by this plugin. I think I’ll use it very soon in a site I’m currently building for a client. ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [April 1, 2015, 9:36am UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/10 "2015-04-01T09:36:48Z")
+1 for the image preview ---
**Author:** ![DieserJonas](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dieserjonas/32/10873_2.png) [@DieserJonas](https://forum.getkirby.com/u/DieserJonas)\ **Post date:** [April 1, 2015, 11:51am UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/11 "2015-04-01T11:51:39Z")
The way Ulysses 3 handles images and links in markdown is awesome! However I don’t think you can implement something similar with CodeMirror, which is what the Editor uses ultimately. ---
**Author:** ![DieserJonas](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dieserjonas/32/10873_2.png) [@DieserJonas](https://forum.getkirby.com/u/DieserJonas)\ **Post date:** [April 1, 2015, 11:58am UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/12 "2015-04-01T11:58:30Z")
If there was a browser based editor like Ulysses I’d be more then happy to try porting it to Kirby though! 😍 ---
**Author:** ![Malvese](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/malvese/32/12375_2.png) [@Malvese](https://forum.getkirby.com/u/Malvese)\ **Post date:** [April 1, 2015, 12:26pm UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/13 "2015-04-01T12:26:49Z")
Alas I haven’t seen any project close to that level of quality/features yet. I have notes somewhere in a Gdoc with a comparison of some visual Markdown editors. I can share it with you if you’re looking for ideas 😉 ---
**Author:** ![DieserJonas](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dieserjonas/32/10873_2.png) [@DieserJonas](https://forum.getkirby.com/u/DieserJonas)\ **Post date:** [April 1, 2015, 12:39pm UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/14 "2015-04-01T12:39:11Z")
@Malvese Of course, maybe there is an even better base for this field or some additional ideas 😊 ---
**Author:** ![Malvese](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/malvese/32/12375_2.png) [@Malvese](https://forum.getkirby.com/u/Malvese)\ **Post date:** [April 7, 2015, 1:47pm UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/15 "2015-04-07T13:47:23Z")
Just saw a post on CommonMark’s forum announcing an [upcoming parser](http://talk.commonmark.org/t/experiment-highlighting-markdown-via-source-mapping/1132). The code is not public yet, but it may be lightweight compared to CodeMirror, as it parses just one language. ---
**Author:** ![DieserJonas](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dieserjonas/32/10873_2.png) [@DieserJonas](https://forum.getkirby.com/u/DieserJonas)\ **Post date:** [April 8, 2015, 11:01am UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/16 "2015-04-08T11:01:57Z")
Looks promising! I should keep it in mind! ---
**Author:** ![DieserJonas](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dieserjonas/32/10873_2.png) [@DieserJonas](https://forum.getkirby.com/u/DieserJonas)\ **Post date:** [April 10, 2015, 2:31pm UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/17 "2015-04-10T14:31:01Z")
I just released an [update](https://github.com/JonasDoebertin/kirby-visual-markdown/releases/tag/1.1.0) to the extension. Here’s what’s new: **New Features:** - Headline toolbar icons & actions - Option to specify the headline levels - Option to hide the toolbar **Changes:** - Updated to MirrorMark 1.0.1 **Bugfixes:** - Show correct fullscreen mode editor for pages with multiple editor fields - Allow scrolling in fullscreen mode **[As always, you can find the latest version on GitHub.](https://github.com/JonasDoebertin/kirby-visual-markdown)** ---
**Author:** ![samnabi](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/samnabi/32/5535_2.png) [@samnabi](https://forum.getkirby.com/u/samnabi)\ **Post date:** [April 11, 2015, 2:35am UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/18 "2015-04-11T02:35:06Z")
This is a godsend, thank you so much! I’m going to implement it for a client that likes to create WYSIWYG “masterpieces”… ahem… A few features that might be nice to have: - Some tooltip/hovertext on the toolbar icons - A little markdown cheatsheet for the most common tags (could be turned on as an option) - Align the header #'s in the gutter [like Ulysses does](https://cdn.tutsplus.com/mac/uploads/2013/07/Ulysses.png) 😊 ---
**Author:** ![DieserJonas](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dieserjonas/32/10873_2.png) [@DieserJonas](https://forum.getkirby.com/u/DieserJonas)\ **Post date:** [April 13, 2015, 8:37am UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/19 "2015-04-13T08:37:58Z")
> [@samnabi](#): > > A few features that might be nice to have: > > Some tooltip/hovertext on the toolbar icons > A little markdown cheatsheet for the most common tags (could be turned on as an option) > Align the header #'s in the gutter like Ulysses does Thanks a lot for your suggestions! I’ll see what I can do 😉 ---
**Author:** ![DieserJonas](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/dieserjonas/32/10873_2.png) [@DieserJonas](https://forum.getkirby.com/u/DieserJonas)\ **Post date:** [April 16, 2015, 10:56am UTC](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655/20 "2015-04-16T10:56:23Z")
I just tagged a new beta release of the plugin. A large portion of the code has been rewritten, allowing for much nicer syntax styling, proper multiple cursor support and some more tweaks. I guess it needs some in-depth testing though, before being released as stable. So any help would be greatly appreciated. [Check out the beta!](https://github.com/JonasDoebertin/kirby-visual-markdown/releases/tag/1.2.0-beta.3) [Next page](https://forum.getkirby.com/t/visual-markdown-editor-panel-extension/655.md?page=2)