使用插件:npm install @kangc/v-md-editor
主题:npm install highlight.js
效果预览
1、main.ts引入插件@kangc/v-md-editor
import { createApp } from "vue";
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import hljs from 'highlight.js';
VMdPreview.use(githubTheme, { Hljs: hljs});
const app = createApp(App);
app.use(VMdPreview).mount("#app");
2、使用
<template>
<v-md-preview :text="sensor" />
</template>
<script setup lang="ts">
import sensor '/sensor.md';
</script>
3、设置vue.config.js
configureWebpack: {
module: {
rules: [
{test: /\.md$/, use: 'raw-loader'}
]
}
}
4、 shims-vue.d.ts
declare module '@kangc/v-md-editor/lib/theme/github.js';
declare module '@kangc/v-md-editor/lib/preview';