使用Vite2+Vue3渲染Markdown文档代码方法

作者:袖梨 2022-06-29

本篇文章小编给大家分享一下使用Vite2+Vue3渲染Markdown文档代码方法,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

自定义 Vite 插件

如果去网上相关问题,大部分都是这种方式,就是自定义插件,使得 Vite 支持 Markdown 渲染,具体做法如下:

在项目根目录创建 md.js 文件,填充如下内容:

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) => {
          // 获取后缀为 .md 的文件,将他变为 js 文件
          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.js,引入上面创建的插件。

import {md} from './md';

export default {
  plugins: [md()]
};

这样,在使用时,会将导入的 md 文件转换成 js 文件渲染。具体使用示例:



相关文章

精彩推荐