以代码的形式形成markdown文件

安装

npm install github-markdown-css
或
yarn add github-markdown-css

引入

在main.ts中引入import 'github-markdown.css'

在你想用markdown包围的地方添加上`class="markdown-body"`

<article class="markdown-body">
	<h1>Unicorns</h1>
	<p>All the things</p>
</article>

直接引入markdown文件

创建一个`md.ts`文件，写上如下内容，因为我的webstorm的 @ts-nocheck一直无作用，所以后面还是采用@ts-ignore

// @ts-nocheck
// @ts-ignore
import path from 'path'
// @ts-ignore
import fs from 'fs'
import marked from '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)
        }]
    }
}

安装marked

yarn add --dev marked

创建vite.config.ts

import { md } from "./plugins/md";
export default {
    plugins: [md()]
    }

写完markdown文件后，需要在vue中引入这个文件,首先创建一个Markdown.vue，接受一个content

<template>
    <article class="markdown-body" v-html="content"></article>
</template>

<script lang="ts">
    export default {
        props:{
            content:{
                type:String
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

然后在router.ts中引入Markdown用h来渲染

import Markdown from './components/Markdown.vue';
import intro from './markdown/intro.md';
import install from './markdown/install.md';
import getstart from './markdown/getstart.md';
const md=(string)=>{
    return h(Markdown,{content:string,key:string})
}
export const router = createRouter({
    history: history,
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/doc',
            component: Doc
            ,children:[{
                path:'intro',
                component:md(intro)
            },
                {
                    path:'install',
                    component:md(install)
                },
                {
                    path:'get-start',
                    component:md(getstart)
                }]}

如何展示源代码

使用vue-loader的Custom Block功能，在vite官网可查看具体内容

在vite.config.ts中加入下面的代码，大概意思就是以demo标签为分界点，读取两部分，一部分是title一部分是main，所以需要在你想展示为代码的文件上加上demo标签

vueCustomBlockTransforms: {
        demo: (options) => {
            const { code, path } = options
            const file = fs.readFileSync(path).toString()
            // @ts-ignore
            const parsed = baseParse(file).children.find(n => n.tag === 'demo')
            // @ts-ignore
            const title = parsed.children[0].content
            const main = file.split(parsed.loc.source).join('').trim()
            return `export default function (Component) {
        Component.__sourceCode = ${
                JSON.stringify(main)
            }
        Component.__sourceCodeTitle = ${JSON.stringify(title)}
      }`.trim()
        }

如何高亮markdown里面的源代码

官方文档

首先下载prism

npm install prismjs
or
yarn add prismjs

引入

因为prism库太老了，所以是不支持import的，从prism的main库中可以看到有一个global.Prism= Prism，这里的global指的是window,所以我们可以在window上挂载一个Prism

import 'prismjs';
const Prism = (window as any).Prism
import 'prismjs/themes/prism-okaidia.css'

因为是基于ts开发的若不指定window的类型，会报错，注意prism的themes有很多种类型选择自己喜欢的就行，在node_modules里面

高亮代码

v-html="Prism.highlight(component.__sourceCode, Prism.languages.html, 'html')"

从Github引入markdown样式