在使用markdown之前，需要先下载markdown的相关包文件https://pandao.github.io/editor.md/index.html
下载完毕后，引入文件
<link rel="stylesheet" href="editormd/css/editormd.css" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="editormd/editormd.min.js"></script>
引入文件后，写一个textarea标签
<textarea style="display:none;"></textarea>
下面通过JS来对textarea进行渲染，渲染成markdown的样子
<script type="text/javascript">
$(function() {
var editor = editormd("test-editor", {
width: "100%",
height: 600,
path: "editormd/lib/", //依赖lib文件夹路径
});
});
</script>
下面给出用Thymeleaf引入markdown的代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="/editormd/editormd.js"></script>
</head>
<body>
<div id="test-editor">
<textarea style="display:none;"></textarea>
</div>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("test-editor", {
width: "100%",
height: 600,
path: "/editormd/lib/", //依赖lib文件夹路径
});
});
</script>
</body>
</html>
运行结果：
