个人博客开发之markdown格式页面展示

最新推荐文章于 2024-08-19 02:19:49 发布

software_Manito

最新推荐文章于 2024-08-19 02:19:49 发布

阅读量1.1k

点赞数

分类专栏：个人博客开发

本文链接：https://blog.csdn.net/software_Manito/article/details/104835384

版权

个人博客开发专栏收录该内容

11 篇文章 1 订阅

订阅专栏

	上一篇写了页面集成editormd编译器，这篇介绍一下如何展示md格式的文本到我们的页面，后台给我们的文档我们要展示成转换后的样子不能一大堆符号摆在页面上是吧，也不好看呀，所以下面放上展示代码需要的代码。

也是同理我们在官方文档里面找一个实例，跟着抄一抄
在这里插入图片描述
1、引入js

<link rel="stylesheet" href="${pageContext.request.contextPath}/static/editormd/css/editormd.css"/>
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
<script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editormd/lib/marked.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editormd/lib/prettify.min.js"></script>

<script src="${pageContext.request.contextPath}/static/editormd/lib/raphael.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editormd/lib/underscore.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editormd/lib/sequence-diagram.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editormd/lib/flowchart.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editormd/lib/jquery.flowchart.min.js"></script>

<script src="${pageContext.request.contextPath}/static/editormd/editormd.min.js"></script>

2、页面div

<div id="test-editormd-view2" >
           <textarea id="append-test" style="display:none;">${article.content}</textarea>
 </div>

3、加入js

<script type="text/javascript">
    var testEditormdView2;
    testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });

这样我们的页面就行解析md格式的文本了