关于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%;
   }

结语

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