前言最近接到一个页面重构的请求，很简单的将原文档中描述的页面移动到新项目中。本身就是一个CV项目，结果搞了整整一天。老项目应该是渲染html片段的python服务，新项目是vite+vue3，因为后面改HTML里面的文档太麻烦，容易出错，而且不一定能出结果。于是想到用JSON来维护，但是JSON渲染一些深度嵌套的列表有点麻烦。最后决定搞一个类似vuePress的功能：完全通过编辑MD文件的方式将文档渲染成html页面。中间的波折过后，请听我说：按部就班的HTML转MD文件的转换工作其实还是比较顺利的，在线转换就好了。复制已有文档的html片段，访问http://www.jsons.cn/htmlmarkd...将html片段粘贴进去，点击md按钮生成结果。这里有一个陷阱。有些在线转换工具并不完善，转换后可能会留下html标签名，或者文字丢失，建议转换完成后查看MD内容。读取md并将其转换为html片段下载并安装插件：vite-plugin-markdownnpmivite-plugin-markdown-S在vi??te.config.ts中配置插件import{defineConfig}from'vite';importvuefrom'@vitejs/插件-vue'；constmdPlugin=require('vite-plugin-markdown')//需要引用exportdefaultdefineConfig({plugins:[vue(),mdPlugin.plugin({mode:['html'],})]})引入md进入需要渲染md内容的vue组件rendertodom添加样式，根据实际情况调整，当然有网上都是成套的css主题配色方案h2{font-size:18px;边距：1em015px；填充顶部：0.8em；填充底部：0.8em；}h3{字体大小：14px；边距：22px016px;}h4{字体大小：13px;边距：20px016px;}h5{字体大小：12px;边距：16px016px；字体粗细：700；}p{字体大小：12px；行高：24px；：#666666；玛格顶部：0px；边距：8px0；边距：14px014px;}pre{背景色：#eee;底部边距：8px；顶部边距：8px；底部：8px；顶部边距：8px；边距：14px014px；背景色：#eee；填充：16px16px；,ol,li{列表样式：未设置；字体大小：12px；行高：20px；颜色：#666666；顶部边距：0px；margin:8px0;}blockquote{border-color:#48b6e2;}table{display:table;宽度：100%；最大宽度：100%；margin-bottom:20px;}完成了吗？当我得意洋洋地欣赏着成果时，我发现事情并没有那么简单。渲染页面没有解析代码块中的语法风格，导致文档中的代码示例只有换行符。经过一番科普，发现了一个神奇的插件：vue-hljs在vue组件中，根据文档安装vue-hljs插件，使用import{ref}from'vue';从'@/assets/help.md'导入{html};从“highlight.js”导入hljs;//添加转换高亮标签插件import"vue-hljs/dist/style.css";//添加hljs默认样式constmarkdownhtml=ref(hljs.highlight(html).value);当你看到页面时，你会发现所有的html片段都呈现为高亮的代码文本。我只想突出显示代码块中的结构，这显然不是我想要的，所以我有条件地渲染html块中的范围import{ref}from'vue';import{html}from'@/assets/help.md';从"highlight.js"导入hljs;//添加转换高亮标签插件import"vue-hljs/dist/style.css";//添加hljs默认样式//在vue3中，通过自定义指令来锁定高亮渲染标签的范围constvHighlight={mounted(el:any){constblocks=el.querySelectorAll('precode');//匹配前置标签，代码标签blocks.forEach((block:any)=>{hljs.highlightBlock(block);});}};constmarkdownhtml=ref(html);//先直接渲染整个html片段，最后找一个自己喜欢的代码块主题风格，例如（深色风格）：/**************highlightjscss********************//**VisualStudio2015深色风格*作者：NicolasLLOBERA*/.hljs{display:block;溢出-x：自动；填充：0.5em；背景：#1e1e1e；颜色：#dcdcdc;}.hljs-keyword,.hljs-literal,.hljs-symbol,.hljs-name{颜色：#569cd6;}.hljs-link{颜色：#569cd6;文本装饰：下划线；}.hljs-built_in，.hljs-type{颜色：#4ec9b0；}.hljs-number，hljs-class{颜色r:#b8d7a3;}.hljs-string,.hljs-meta-string{color:#d69d85;}.hljs-regexp,.hljs-template-tag{color:#9a5334;}.hljs-subst,.hljs-function,.hljs-title,.hljs-params,.hljs-formula{color:#dcdcdc;}.hljs-comment,.hljs-quote{颜色:#57a64a;font-style:italic;}.hljs-doctag{color:#608b4e;}.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:#9b9b9b;}.hljs-variable,.hljs-template-variable{color:#bd63c5;}.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:#9cdcfe;}.hljs-section{color:gold;}.hljs-emphasis{字体样式:italic;}.hljs-strong{font-weight:bold;}/*.hljs-code{font-family:'Monospace';}*/.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:#d7ba7d;}.hljs-addition{background-color:#144212;显示：内联块；宽度：100%；}.hljs-deletion{背景色：#600；显示：内联块；width:100%;}结语小小的一个页面迁移，伸出来了这么多的知识点只要我们抽丝剥茧，一点一点地解决所有问题，就可以达到我们的目的。最后感谢在解决问题的过程中给我提供帮助和思路的同学们。
