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

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

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

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

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

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

在 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'],
     })
 ]
})

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

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

渲染到 dom 中

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

增加款式，个依据理论状况本人调整，当然网上也有成套的 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

在 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);

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

条件渲染 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 片段

最初找一款喜爱的代码块主题格调，例如（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%;
}

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

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

前言

步骤

HTML 转 MD 文件

读取 md 并转换为 html 片段

曾经实现了？

结语