1、首先从这里下载其浏览器版:
https://github.com/evilstreak/markdown-js/releases
2、解压缩后在其js文件同目录下新建一个index.html网页进行测试,代码如下:
<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="markdown.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>
3、打开地址进行预览,这样就轻松的实现了实时解析转换:
4、转换后得到的只是最基础的HTML,可以用CSS美化一下。
于是我将Bootstarp的CSS引用到index.html页面再来看看效果,index.html代码如下:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding:30px">
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="markdown.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>
5、打开地址再次预览,效果如下:
推荐文章:
markdown基本语法: https://www.fujieace.com/markdown/basic-grammar-2.html