前端页面如何实现 markdown 编辑
目前发现有两个库可以实现翻译 markdown ，直接上例子：
-
marked
npm 安装方式：npm install marked --save -
showdown
github地址： https://github.com/showdownjs/showdown/releases
cdn地址：https://www.bootcdn.cn/showdown/
更多配置请查看使用手册：https://github.com/showdownjs/showdown/wiki
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 两个库都可以实现 markdown ，分别是：showdown.js 和 marked.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
blockquote {
border-left: #eee solid 5px;
padding-left: 20px;
}
ul li {
line-height: 20px;
/* 实心圆 */
list-style-type: disc;
}
ul li>ul li {
/* 空心圆 */
list-style-type: circle;
}
ul li>ul li>ul li {
/* 实心方块 */
list-style-type: square;
}
pre {
height: 24px;
line-height: 24px;
}
code {
color: #D34B62;
background: #F6F6F6;
padding: 5px;
}
</style>
</head>
<body>
<div style="height:100vh; width:100%; display: flex;">
<textarea style="flex: 1; resize:none; padding: 20px;" id="md_area" onkeyup="mdSwitch()" autofocus></textarea>
<div style="flex: 1; border: 1px solid #333; padding: 20px;" id="result"></div>
</div>
<!-- <script>
// use showdown.js
function mdSwitch() {
var mdValue = document.getElementById("md_area").value;
var converter = new showdown.Converter();
var html = converter.makeHtml(mdValue);
document.getElementById("result").innerHTML = html;
}
</script> -->
<script>
// use marked.js
function mdSwitch() {
var text = document.getElementById("md_area").value;
var html = marked.parse(text);
document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>
