A simple markdown editor with an instant preview and HTML code view. The idea was to have a very simple webapp with two views where the Markdown is entered on the left-hand side and the HTML output is instantly rendered on the right-hand side. So everybody can easily learn Markdown!
You can use the build of this project online at
http://janpetzold.github.io/angular-markdown-editor
Features:
- simple, responsive layout
- full Markdown support
- integrated syntax help that showing the most important formatting options
- HTML code output so you can export the generated HTML
- there is a resize button to dynamically adjust the width of both views
The sourcecode is very compact, I made use of Angular directives and the fabulous showdown library to convert between Markdown and HTML. Also, zepto.js is used for the DOM manipulation.
I tested this in Chrome and Firefox. I kept the implementation very basic, basically all input is converted after every keypress. Even with bigger documents this never took more than 30ms on my machine, so I didn't notice it. Your mileage may vary.
Wishlist:
- It would be great to integrate PDF export. I looked at jsPDF, but that doesn't support hyperlinks and images. Maybe doxument would be an option.
- Integration of WebWorkers would be helpful to decouple the HTML conversion from everything else
- Integration of localStorage to add simple load/save functionality