
vue3显示markdown文件
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
使用插件: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';




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 4 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)