建个人博客需要实现markdown功能。我最终在github上找到了相关方法。
Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
github：https://github.com/pandao/editor.md
官网：https://pandao.github.io/editor.md/
Editor.md
官方写法
<link rel="stylesheet" href="/editor.md-master/css/editormd.css" /> <div id="editor"> <!-- Tips: Editor.md can auto append a `<textarea>` tag --> <textarea style="display:none;">### Hello Editor.md !</textarea> </div> <script src="/editor.md-master/examples/js/jquery.min.js"></script> <script src="/editor.md-master/editormd.js"></script> <script type="text/javascript"> $(function() { var editor = editormd("editor", { // width: "100%", // height: "100%", // markdown: "xxxx", // dynamic set Markdown text path : "/editor.md-master/lib/" // Autoload modules mode, codemirror, marked... dependents libs path }); }); </script>
个人写法
<head> <meta charset="utf-8" /> <title>markdown编辑器</title> <link rel="stylesheet" href="/editor.md-master/css/editormd.css" /> </head> <body> <div id="editor"> <!-- Tips: Editor.md can auto append a `<textarea>` tag --> <textarea style="display:none;">### Hello Editor.md !</textarea> </div> <script src="/editor.md-master/examples/js/jquery.min.js"></script> <script src="/editor.md-master/editormd.js"></script> <script type="text/javascript"> $(function() { var editor = editormd("editor", { // width: "100%", // height: "100%", // markdown: "xxxx", // dynamic set Markdown text path : "/editor.md-master/lib/" // Autoload modules mode, codemirror, marked... dependents libs path }); }); </script> </body>
实现效果
