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

电玩女神 2023-09-30 11:49 6阅读 0赞

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

`没渲染前`:  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2o5p-Q5Lq655qE5b-r5LmQ5a2m5Lmg5pel6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]  
方法：  
1.导入`showdown.js`,我这里采用的CDN方式

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>

3.效果:  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2o5p-Q5Lq655qE5b-r5LmQ5a2m5Lmg5pel6K6w_size_19_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2o5p-Q5Lq655qE5b-r5LmQ5a2m5Lmg5pel6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/0233220ad96e4e9f804ad4596864a1be.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p2o5p-Q5Lq655qE5b-r5LmQ5a2m5Lmg5pel6K6w,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2o5p-Q5Lq655qE5b-r5LmQ5a2m5Lmg5pel6K6w_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c0cd34855b3b476783bf610eeb19474c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p2o5p-Q5Lq655qE5b-r5LmQ5a2m5Lmg5pel6K6w,size_19,color_FFFFFF,t_70,g_se,x_16