将Markdown嵌入到我们的HTML页面中

在使用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>

运行结果:
在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页