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

关注

原创最新推荐文章于 2026-01-10 20:18:48 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

Spring boot开源项目之个人博客（15）—博客详情页面展示 Spring boot开源项目之个人博客（15）—博客详情页面展示博客详情页分为两个部分，一个是博客详情信息的渲染，一个是评论功能。在这之前，做了一个全局搜索的功能。 1. 全局搜索在导航栏有一个搜索框，定义搜索的功能是输入字段查找标题和内容中包含字段的博客，然后把符合条件的博客分页展示。简单处理一下页面，粘贴之前博客列表中的div，就省去了再写theamleaf去渲染了，主要内容是根据搜索字段查找符合条件的博客。从前端开始看 <form action="#" name="search" th: 阅读详情

	上一篇写了页面集成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格式的文本了

收录于