关于javascript:vitevue3项目渲染markdown爬坑回顾

前言

  近期接到一个页面重构的需要，很简略就是把原先文档阐明的页面搬到新我的项目中。自身是一个 CV 工程，后果搞了一整天。
  老我的项目应该是一个 python 服务渲染 html 片段，新我的项目是 vite+vue3 的，因为想到前期如果在 HTML 上改文档切实是太麻烦了，容易出错不说，还不肯定出成果。于是想到了用 JSON 保护，然而 JSON 渲染一些层级深的嵌套列表有些麻烦。最初还是决定搞一搞相似 vuePress 的性能：齐全靠编辑 MD 文件渲染文档到 html 页面中。两头经波折请听我娓娓道来：

步骤

HTML 转 MD 文件

这个工作其实还算比较顺利，在线转就好了。

1. 复制现有的文档 html 片段
2. 拜访 http://www.jsons.cn/htmlmarkd… 把 html 片段粘贴进去，点击转 md 按钮

3. 生成后果

   这边遇到一个坑就是，有些在线转的工具不是很欠缺，可能转换当前遗留 html 标签名，或者丢文字，所以倡议大家转换实现当前甚一下 MD 内容。

读取 md 并转换为 html 片段

1. 下载安装插件：vite-plugin-markdown
   npm i vite-plugin-markdown -S

2. 在 vite.config.ts 中配置插件

   import {defineConfig} from 'vite';
   import vue from '@vitejs/plugin-vue';
   const mdPlugin = require('vite-plugin-markdown') // 须要通过 commenJs 形式援用
   
   export default defineConfig({
    plugins: [vue(),
        mdPlugin.plugin({mode: ['html'],
        })
    ]
   })

3. 在须要渲染 md 内容的 vue 组件内引入 md

   <script setup lang="ts">
    import {ref} from 'vue';
    import {html} from '@/assets/help.md';
    
    const markdownhtml = ref(html);
   </script>

4. 渲染到 dom 中

   <template>
     <article v-html="markdownhtml"></article>
   </template>

5. 增加款式，个依据理论状况本人调整，当然网上也有成套的 css 主题配色计划

   h2 {
     font-size: 18px;
     margin: 1em 0 15px;
     padding-top: 0.8em;
     padding-bottom: 0.8em;
   }
   h3 {
     font-size: 14px;
     margin: 22px 0 16px;
   }
   h4 {
     font-size: 13px;
     margin: 20px 0 16px;
   }
   h5 {
     font-size: 12px;
     margin: 16px 0 16px;
     font-weight: 700;
   }
   p {
     font-size: 12px;
     line-height: 24px;
     color: #666666;
     margin-top: 0px;
     margin: 8px 0;
     margin: 14px 0 14px;
   }
   pre {
     background-color: #eee;
     margin-bottom: 8px;
     margin-top: 8px;
     margin: 12px 0 12px;
   }
   blockquote {
     margin-bottom: 8px;
     margin-top: 8px;
     margin: 14px 0 14px;
     background-color: #eee;
     padding: 16px 16px;
   }
   tr {background-color: #f5f5f5;}
   code {background-color: #eee;}
   ul,
   ol,
   li {
     list-style: unset;
     font-size: 12px;
     line-height: 20px;
     color: #666666;
     margin-top: 0px;
     margin: 8px 0;
   }
   blockquote {border-color: #48b6e2;}
   table {
     display: table;
     width: 100%;
     max-width: 100%;
     margin-bottom: 20px;
   }

曾经实现了？

当我得意忘形的观赏成绩的时候，发现事件没有这么简略。渲染进去的页面没有解析 code 块内的语法款式，导致文档中的代码示例除了换行什么都没有。
一番科普，找到一个神奇的插件：vue-hljs

1. 在 vue 组件内，按照文档装置 vue-hljs 插件并应用

   import {ref} from 'vue';
   import {html} from '@/assets/help.md';
   import hljs from "highlight.js"; // 增加转换高亮标签插件
   import "vue-hljs/dist/style.css"; // 增加 hljs 默认款式
    
   const markdownhtml = ref(hljs.highlight(html).value);
   

2. 当看到页面后，会发现所有 html 片段都被渲染成了高亮的 code 文本。我心愿只有 code 块内的构造变为高亮，这显然不是我想要的，于是乎

3. 条件渲染 html 块内的范畴

   import {ref} from 'vue';
   import {html} from '@/assets/help.md';
   import hljs from "highlight.js"; // 增加转换高亮标签插件
   import "vue-hljs/dist/style.css"; // 增加 hljs 默认款式
   
   // 在 vue3 内，通过自定义指令来锁定高亮渲染标签的范畴
   const vHighlight = {mounted(el: any) {const blocks = el.querySelectorAll('pre code'); // 匹配 pre 标签，code 标签
    blocks.forEach((block: any) => {hljs.highlightBlock(block);
    });
     }
   };
    
   const markdownhtml = ref(html); // 先间接渲染整个 html 片段 

4. 最初找一款喜爱的代码块主题格调，例如（dark style）：

   /*************highlightjs css*******************/
   /*
    * Visual Studio 2015 dark style
    * Author: Nicolas LLOBERA <nllobera@gmail.com>
    */
   
   .hljs {
     display: block;
     overflow-x: auto;
     padding: 0.5em;
     background: #1e1e1e;
     color: #dcdcdc;
   }
   
   .hljs-keyword,
   .hljs-literal,
   .hljs-symbol,
   .hljs-name {color: #569cd6;}
   .hljs-link {
     color: #569cd6;
     text-decoration: underline;
   }
   
   .hljs-built_in,
   .hljs-type {color: #4ec9b0;}
   
   .hljs-number,
   .hljs-class {color: #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 {
     color: #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 {font-style: 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;
     display: inline-block;
     width: 100%;
   }
   
   .hljs-deletion {
     background-color: #600;
     display: inline-block;
     width: 100%;
   }

结语

小小的一个页面迁徙，扯出来了这么多的知识点。只有抽丝剥茧，一点点解决所有问题能力达到目标。最初感激在解决问题的路上给我提供帮忙和思路的同学。