引入github的Markdown样式
安装:
yarn add github-markdown-css
使用:
1、引入import'github-markdown-css'
2、需要在最外层的元素上加上class='markdown-body'
列子:getStart.vue
getStart.vue
<template>
<article class="markdown-body">
<h1>开始使用</h1>
<p>请先<a href="#/doc/install">安装</a>本组件库。</p>
<p>然后在你的代码中写入下面的代码</p>
<pre><code>import {Button, Tabs, Switch, Dialog} from "ui"</code></pre>
就可以使用我提供的组件了。
<h2>Vue 单文件组件</h2>
</article>
</template>
支持导入md文件(vue3 vite plugin)
由于我用的vite,需要自制vite插件
安装
安装 marked 【yarn add --dev marked】
自制vite插件 将md结尾的转换为js
plugins/md.ts
import * as path from 'path'
import * as fs from 'fs';
// import marked from 'marked';
const { marked } = require('marked');
const mdToJs = str => {
const content = JSON.stringify(marked(str))
return `export default ${content}`
}
export function md() {
return {
configureServer: [ // 用于开发
async ({ app }) => {
app.use(async (ctx, next) => { // koa
if (ctx.path.endsWith('.md')) {
ctx.type = 'js'
const filePath = path.join(process.cwd(), ctx.path)
ctx.body = mdToJs(fs.readFileSync(filePath).toString())
} else {
await next()
}
})
},
],
transforms: [{ // 用于 rollup // 插件
test: context => context.path.endsWith('.md'),
transform: ({ code }) => mdToJs(code)
}]
}
}
添加vite.config.ts
// @ts-nocheck
import { md } from "./plugins/md";
export default {
plugins: [md()]
};
写一个md文件(get-started.md),然后引入就可以了
<template>
<article class="markdown-body" v-html="md"></article>
</template>
<script lang="ts">
import md from '../get-started.md'
export default {
setup() {
return { md };
},
};
</script>
当多个页面都用这个模板的时候,我们就需要动态加载导入模块,代码如下:异步导入,当导入成功之后再将值赋给变量
<template>
<article class="markdown-body" v-html="md"></article>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
props: {
path: {
type: String,
required: true,
},
},
setup(props) {
const md = ref(null);
import(props.path).then((result) => {
md.value = result.default;
});
return { md };
},
};
</script>