概述
本文讲述如何结合开源库showdown.js和prettify.js实现web端MarkDown的效果。
效果
基本效果
代码效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Markdown.js</title>
<link rel="stylesheet" type="text/css" href="../libs/showdown/markdown.css"/>
<link rel="stylesheet" type="text/css" href="../libs/prettify/css/prettify.css"/>
<script type="text/javascript" src="../libs/showdown/showdown.js"></script>
<script type="text/javascript" src="../libs/prettify/js/prettify.js"></script>
<script type="text/javascript" src="../../libs/jquery/jquery-3.1.1.min.js"></script>
</head>
<body>
<div>
<textarea id="oriContent" style="height:400px;width:600px;" onkeyup="convert()"></textarea>
<div id="result"></div>
</div>
<script type="text/javascript">
function convert(){
var text = document.getElementById("oriContent").value;
var converter = new showdown.Converter();
var html = converter.makeHtml(text);
$("#result").html(html);
$("pre").addClass("prettyprint").addClass("linenums");
prettyPrint();
}
</script>
</body>
</html>
源代码下载(百度网盘)
技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
博客园：http://www.cnblogs.com/lzugis/
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式
| 类型 | 内容 |
|---|---|
| 1004740957 | |
| 公众号 | lzugis15 |
| niujp08@qq.com | |
| webgis群 | 452117357 |
| Android群 | 337469080 |
| GIS数据可视化群 | 458292378 |
LZUGIS
网友评论