文章目录
效果实现扩展效果
我们可以看到只需要在左边绿色区域输入，右边蓝色区域就会实时输入内容。
这样一个简单的MarkDown就实现了
实现
代码也很简单：
一、 使用到的js
markdown.js
<script src="/markdown.js/0.5.0/markdown.min.js"></script>
二、使用到的css,主要是为了样式好看一点
bootstrap.min.css
<script src="/bootstrap/3.3.1/css/bootstrap.min.css"></script>
三、 整个页面代码:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>MarkDown</title><!--适配手机--><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="shortcut icon" href="/group1/M00/00/00/rB_YCFsQ_OmAP6VFAAAQvtuENdk882.ico"><!--使用bootstrap的样式，比较好看--><link href="/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"><style>h1 {font-family: Consolas, monaco, monospace;font-size: 23px;font-style: normal;font-variant: normal;font-weight: 500;line-height: 23px;}h3 {font-family: Consolas, monaco, monospace;font-size: 17px;font-style: normal;font-variant: normal;font-weight: 500;line-height: 23px;}p {font-family: Consolas, monaco, monospace;font-size: 14px;font-style: normal;font-variant: normal;font-weight: 400;line-height: 23px;}blockquote {font-family: Consolas, monaco, monospace;font-size: 17px;font-style: normal;font-variant: normal;font-weight: 400;line-height: 23px;}pre {font-family: Consolas, monaco, monospace;font-size: 12px;font-style: normal;font-variant: normal;font-weight: 400;line-height: 23px;}#text-input {margin-left: 4%;padding: 15px;height: 800px;width: 96%;border: none;resize: none;}#preview {padding: 15px;width: 96%;border: none;height: 800px;overflow-y:auto; overflow-x:auto;}body {overflow-x: none;}</style></head><body><center><h1>MarkDown Edit</h1></center><div class="row"><div class="col-md-6"><textarea class="bg-success" id="text-input" oninput="this.editor.update()" rows="6">Type **Markdown** here.</textarea></div><div class="col-md-6"><div id="preview" class="bg-primary" rows="6"> </div></div></div><script src="/markdown.js/0.5.0/markdown.min.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>
扩展
上面实现的是最简单，其实，还可以在此基础上添加一些工具，类似有道云笔记上面一样，有需要的可以自行实现
