首先從這里下載其瀏覽器版：
https://github.com/evilstreak/markdown-js/releases
解壓縮后在其js文件同目錄下新建一個網頁進行測試，代碼如下：
<!DOCTYPE html> <html> <body> <textarea id="text-input" oninput="this.editor.update()" rows="6" cols="60">Type **Markdown** here.</textarea> <div id="preview"> </div> <script src="markdown.js"></script> <script> function Editor(input, preview) { this.update = function () { preview.innerHTML = markdown.toHTML(input.value); }; input.editor = this; this.update(); } var $ = function (id) { return document.getElementById(id); }; new Editor($("text-input"), $("preview")); </script> </body> </html>
這樣就輕松的實現了實時解析轉換：
轉換后得到的只是最基礎的HTML，可以用CSS美化一下，隨手將Bootstarp的CSS引用過來看看：
<!DOCTYPE html> <html> <head> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body style="padding:30px"> <textarea id="text-input" oninput="this.editor.update()" rows="6" cols="60">Type **Markdown** here.</textarea> <div id="preview"> </div> <script src="markdown.js"></script> <script> function Editor(input, preview) { this.update = function () { preview.innerHTML = markdown.toHTML(input.value); }; input.editor = this; this.update(); } var $ = function (id) { return document.getElementById(id); }; new Editor($("text-input"), $("preview")); </script> </body> </html>
效果如下：
在線體驗地址： http://www.richerdyoung.cn/markdown/
markdown 基於語法： http://www.cnblogs.com/richerdyoung/p/7084055.html