安装

yarn add marker --dev

配置

1. 创建 vite.config.ts

// @ts-nocheck
import {md} from './plugins/md';
export default {
  plugins: [md()]
};

2. 创建 plugins/md.ts

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

引入并使用 github-markdown-css 美化

安装 github-markdown-css

yarn add github-markdown-css

<template>
  <article class="markdown-body" v-html="md">   //添加类名使用 github-markdown-css
  </article>
</template>
<script>
  import md from '../markdown/get-started.md'
  export default {
    data() {
      return { md }
    }
  }
</script>