Markdown JS库
jopen
9年前
Markdown作为一门书写语言，比HTML简单很多。GitHub使用它做项目显示，StackOverflow也使用的是Markdown编辑器，还可以做博客。Markdown能通过一些方法转换为HTML，进而增加样式。可以通过编译生成，也可以在WEB上通过JS来做显示。本文涉及三个开源的JS库来编辑、显示Markdown。
Markdown-js
项目地址：https://github.com/evilstreak/markdown-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="lib/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> 评价：使用比较简单，但显示的样式使用的是默认样式。需要自己添加样式。
Strapdown.js
项目地址：http://strapdownjs.com/
使用方法：
<!DOCTYPE html> <html> <title>Hello Strapdown</title> <xmp theme="united" style="display:none;"> # Markdown text goes in here ## Chapter 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ## Chapter 2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </xmp> <script src="http://strapdownjs.com/v/0.2/strapdown.js"></script> </html>
评价：Strapdown.js帮你定义好了页面显示的样式，不能直接嵌入到自己的页面。比较适合用Mardown记录内容。
Editer.md
项目地址：https://pandao.github.io/editor.md/examples/index.html
使用方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Simple example - Editor.md examples</title> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="../css/editormd.css" /> <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> </head> <body> <div id="layout"> <header> <h1>Simple example</h1> </header> <div id="test-editormd"> <textarea style="display:none;">[TOC] #### Disabled options - TeX (Based on KaTeX); - Emoji; - Task lists; - HTML tags decode; - Flowchart and Sequence Diagram; #### Editor.md directory editor.md/ lib/ css/ scss/ tests/ fonts/ images/ plugins/ examples/ languages/ editormd.js ... ```html <!-- English --> <script src="../dist/js/languages/en.js"></script> <!-- ???? --> <script src="../dist/js/languages/zh-tw.js"></script> ``` </textarea> </div> </div> <script src="js/jquery.min.js"></script> <script src="../editormd.min.js"></script> <script type="text/javascript"> var testEditor; $(function() { testEditor = editormd("test-editormd", { width : "90%", height : 640, syncScrolling : "single", path : "../lib/" }); /* // or testEditor = editormd({ id : "test-editormd", width : "90%", height : 640, path : "../lib/" }); */ }); </script> </body> </html> 评价：Editer.md能够完成几乎所有你能想到是事情，甚至能够帮助你生成流程图。Editer.md自带的显示样式也不错。但是项目文件很多，依赖也很多。不像前面两个只有一个JS文件。