thymeleaf模板获取markdown数据后，渲染到页面上（showdown.js）

最新推荐文章于 2025-04-04 09:48:14 发布

杨某人的快乐学习日记

最新推荐文章于 2025-04-04 09:48:14 发布

阅读量2.3k

点赞数

文章标签： java markdown

本文链接：https://blog.youkuaiyun.com/qq_45979629/article/details/123832606

版权

本文介绍了一种使用showdown.js插件解决Markdown数据在前端页面渲染问题的方法。通过具体步骤展示了如何将存储在数据库中的Markdown文本转换为HTML格式，并成功显示在前端界面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我今天遇到一个问题，通过markdown输入数据保存到数据库中，然后前端无法渲染markdown数据，一直困惑了我几个小时，终于找到showdown.js插件。

没渲染前:
在这里插入图片描述
方法：
1.导入showdown.js,我这里采用的CDN方式

	<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>

2.通过jquery获取页面上还未渲染的数据:

<div id="contents" class="typo m-content-padding  m-padd-index-large" th:text="${blog.content}"></div>
		<script type="text/javascript">
		//页面一加载完毕就执行这个函数
		window.onload=function () {//onload:在页面加载完毕后就自动指定该函数
			var val = $("#contents").text();//得到还未转换md的数据
			var converter = new showdown.Converter(); //创建实例
			var html = converter.makeHtml(val);// 进行转换
			$('#contents').html(html);//重新渲染到页面上
		}
	</script>