[Web] 简易Markdown可预览编辑器 —— Codemirror+Marked+Prism

来源：互联网发布：a5淘宝客助手v1.8 编辑：程序博客网时间：2024/04/28 10:57

代码很简单，都是在用别人写好的东西，觉得这个还是有点用，所以简单记录一下。

在线预览: http://118.89.16.142:8000/csdndemo/markdown

插件

文本编辑: Codemirror
Markdown解析: Marked
Markdown Css: Github-markdown-css
代码高亮: prismjs

效果预览

codemirror-markdown preview

代码

除了插件那些的js和css文件，就只有三个自己要写的。主页index.html，样式style.css，还有一个初始化 codemirror 和 marked 配置的 main.js。

index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Markdown</title>  <link rel="stylesheet" href="codemirror/lib/codemirror.css">  <link rel="stylesheet" href="codemirror/theme/material.css">  <link rel="stylesheet" href="codemirror/addon/dialog/dialog.css">  <link rel="stylesheet" href="stylesheets/style.css">  <link rel="stylesheet" href="stylesheets/github-markdown.css">  <link rel="stylesheet" href="stylesheets/prism.css"></head><body>  <div class="editor-wrap">    <textarea name="editor" id="editor" cols="30" rows="10"></textarea>  </div>  <div class="preview-wrap">    <div class="markdown-body"></div>  </div>  <script src="javascripts/jquery.min.js"></script>  <script src="javascripts/marked.min.js"></script>  <script src="codemirror/lib/codemirror.js"></script>  <script src="codemirror/addon/edit/continuelist.js"></script>  <script src="codemirror/addon/edit/matchbrackets.js"></script>  <script src="codemirror/addon/edit/closebrackets.js"></script>  <script src="codemirror/mode/markdown/markdown.js"></script>  <script src="codemirror/keymap/sublime.js"></script>  <script src="codemirror/addon/search/search.js"></script>  <script src="codemirror/addon/search/searchcursor.js"></script>  <script src="codemirror/addon/dialog/dialog.js"></script>  <script src="codemirror/addon/comment/comment.js"></script>  <script src="codemirror/addon/wrap/hardwrap.js"></script>  <script src="javascripts/prism.js"></script>  <script src="javascripts/main.js"></script></body></html>

main.js

(function() {  $(function() {    // marked    var markedRender = new marked.Renderer();    marked.setOptions({      renderer: markedRender,      gfm: true,      tables: true,      breaks: true,  // '>' 换行，回车换成 <br>      pedantic: false,      sanitize: true,      smartLists: true,      smartypants: false    });    // codemirror editor    var editor = CodeMirror.fromTextArea($('#editor').get(0), {      mode: 'markdown',      lineNumbers: true,      autoCloseBrackets: true,      matchBrackets: true,      showCursorWhenSelecting: true,      lineWrapping: true,  // 长句子折行      theme: "material",      keyMap: 'sublime',      extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}    });    editor.on('change', editorOnHandler);  });  function editorOnHandler(cm, co) {    $('.markdown-body').html(marked(cm.getValue()));    $('.markdown-body pre code').each(function(i, block) {      Prism.highlightElement(block);    });  }})();

style.css

html,body {  margin: 0px;  padding: 0px;  height: 100%;}.editor-wrap {  float: left;  width: 50%;  height: 100%;  overflow: auto;}.editor-wrap .CodeMirror {  font-size: 18px;  height: 100%;}.preview-wrap {  float: left;  width: 50%;  height: 100%;  overflow: auto;}.preview-wrap .markdown-body {  box-sizing: border-box;  width: 100%;  max-width: 980px;  padding: 45px;  font-size: 18px;}.preview-wrap .markdown-body ul > li {  list-style-type: disc;}.preview-wrap .markdown-body ol > li {  list-style-type: lower-roman;}

附件

完整代码: codemirror-markdown - Github

0 0