前言
前端html不支持直接显示md格式代码，所以我们需要进行转换。
转换方式有好几种，以下展示两种
方式一
通过editormd.markdownToHTML渲染
主要是通过editor的渲染功能将md格式转为html并展示出来。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>editormd</title>
<!-- 页面解析markdown为HTML显示需要的css -->
<link rel="stylesheet" href="editormd/css/editormd.css"/>
<link rel="stylesheet" href="highlight/styles/default.css"/>
</head>
<body>
<div id="myEditor" style="width: max-content;">
<textarea style="display:none;" th:text="${md}"></textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<!-- 页面markdown解析成HTML需要的js -->
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script src="editormd/lib/raphael.min.js"></script>
<script src="editormd/lib/underscore.min.js"></script>
<script src="editormd/lib/sequence-diagram.min.js"></script>
<script src="editormd/lib/flowchart.min.js"></script>
<script src="editormd/lib/jquery.flowchart.min.js"></script>
<!--通过editor.md渲染-->
<script type="text/javascript">
editormd.markdownToHTML("myEditor", {
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true // 默认不解析
});
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
以上用到了代码高亮插件：highlight.js 插件，官网地址：https://highlightjs.org/
代码高亮渲染
1.html hljs.initHighlightingOnLoad(); 将高亮显示绑定到页面加载完成触发的事件上。
2.highlightBlock(block)对包含代码的 DOM 节点添加高亮标记。默认使用语言检测，但是你也可以在节点上添加 class 属性来指定语言。
参数：
- block : DOM 节点
3.initHighlighting()
为页面中所有 <pre><code>..</code></pre> 块添加高亮标记。配合 styles 中的 css 使用即可实现着色。
未完待续......
