【Vue3+Vite+TS+v-md-editor】Markdown 转 HTML 预览插件

安装 Markdown 插件 v-md-editor

npm i @kangc/v-md-editor@next -S

安装数学公式插件 KaTeX

npm i katex

注册 v-md-editor

若嫌麻烦可以直接在 main 中注册。

1. 新建文件 src/plugins/v-md-preview/index.ts：

   import VMdPreview from '@kangc/v-md-editor/lib/preview'
   import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
   import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index'
   import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index'
   import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index'
   import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/npm'
   
   import '@kangc/v-md-editor/lib/style/preview.css'
   import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
   import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css'
   import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css'
   
   import Prism from 'prismjs'
   import 'prismjs/components/prism-json'
   
   import 'katex/dist/katex.min.css'
   
   // 代码高亮
   VMdPreview.use(vuepressTheme, {
   	Prism
   })
   // 代码行数
   VMdPreview.use(createLineNumbertPlugin())
   // 代码快速复制
   VMdPreview.use(createCopyCodePlugin())
   // emoji
   VMdPreview.use(createEmojiPlugin())
   // KaTex
   VMdPreview.use(createKatexPlugin())
   
   export default VMdPreview
   
   

2. 新建文件 scr/plughins/index.ts：

   import type { App } from 'vue'
   
   import VMdPreview from './v-md-preview'
   
   const pluginList = [
   	VMdPreview,
   ]
   const plugins = {
   	install(app: App<Element>) {
   		Object.entries(pluginList).forEach(([, v]) => {
               app.use(v)
   		})
   	}
   }
   
   export default plugins
   

3. 在 main.ts 中注册：

   import plugins from '@/plugins'
   
   const app = createApp(App)
   
   app.use(plugins)
   
   app.mount('#app')
   

解决 TS 导入插件时，模块找不到报红

1. 确保 TS 检测中包含 *.d.ts 文件，可以在 tsconfig.app.json 中查看修改：

   {
   	"extends": "@vue/tsconfig/tsconfig.dom.json",
   	"include": ["*.d.ts", "src/**/*", "src/**/*.vue"],
   	"exclude": ["src/**/__tests__/*"],
   	"compilerOptions": {
   		"composite": true,
   		"baseUrl": ".",
   		"paths": {
   			"@/*": ["./src/*"]
   		}
   	}
   }
   

2. 新建 plugins.d.ts 文件，定义模块：

   declare module '@kangc/v-md-editor/lib/preview'
   declare module '@kangc/v-md-editor/lib/theme/vuepress.js'
   declare module '@kangc/v-md-editor/lib/plugins/mermaid/cdn'
   declare module '@kangc/v-md-editor/lib/plugins/line-number/index'
   declare module '@kangc/v-md-editor/lib/plugins/copy-code/index'
   declare module '@kangc/v-md-editor/lib/plugins/emoji/index'
   declare module '@kangc/v-md-editor/lib/plugins/katex/npm'
   declare module 'prismjs'
   

测试示例

<template>
	<input v-model="inputValue" />
	<v-md-preview :text="inputValue"></v-md-preview>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const inputValue = ref(`
### 标题1
$$Z_5$$
文字 $Z_3$
`)
</script>

参考资料

[1] v-md-editor. 基于 Vue 开发的 markdown 编辑器组件[EB/OL]. https://ckang1229.gitee.io/vue-markdown-editor/zh/. 2023.

[2] 抹上一抹凉. Vue3展示Markdown内容[EB/OL]. https://juejin.cn/post/6975485076918239239. 2021.

[3] zhfy啊. vue3项目中使用markdown编辑器(v-md-editor)[EB/OL]. https://juejin.cn/post/7107475048532803597. 2022.