建个人博客需要实现markdown功能。我最终在github上找到了相关方法。
Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。
github:https://github.com/pandao/editor.md
官网:https://pandao.github.io/editor.md/
安装
用法
Markdown编辑器
官方写法
<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>
实现效果