效果
我们可以看到只需要在左边绿色区域输入，右边蓝色区域就会实时输入内容。
这样一个简单的MarkDown就实现了
实现
代码也很简单：
一、 使用到的js
markdown.js
<script src="https://cdn.bootcss.com/markdown.js/0.5.0/markdown.min.js"></script>
二、使用到的css,主要是为了样式好看一点
bootstrap.min.css
<script src="http://cdn.bootcss.com/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="http://admin.zrstt.cn/group1/M00/00/00/rB_YCFsQ_OmAP6VFAAAQvtuENdk882.ico">
<!--使用bootstrap的样式，比较好看-->
<link href="http://cdn.bootcss.com/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="https://cdn.bootcss.com/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>
扩展
上面实现的是最简单，其实，还可以在此基础上添加一些工具，类似有道云笔记上面一样，有需要的可以自行实现
