[Web] 簡易Markdown可預覽編輯器 —— Codemirror+Marked+Prism
阿新 • • 發佈：2019-02-19
程式碼很簡單，都是在用別人寫好的東西，覺得這個還是有點用，所以簡單記錄一下。
外掛
效果預覽
程式碼
除了外掛那些的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 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;
}