vite-plugin-markdown-it v1.0.3

vite-plugin-markdown-it

介绍

一个集成了markdown-it的vite插件。

可以在使用vite构建的Vue项目中直接引用 *.md文件作为组件。

默认集成了了markdown-it的插件如下：

• markdown-it-anchor
• markdown-it-class
• markdown-it-container
• markdown-it-emoji
• markdown-it-toc-done-right

安装

npm i vite-plugin-markdown-it

使用

在 vite.config.[t|j]s增加如下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePluginMarkdownIt from 'vite-plugin-markdown-it'
export default defineConfig({
  plugins: [
    VitePluginMarkdownIt(),
    vue({
      include: [/\.vue$/, /\.md$/],
    }),
  ],
})

你需要注册插件所需的vue全局组件，以及样式文件，在main.[t|j]s文件中。

import { useGlobalComponents } from 'vite-plugin-markdown-it/example/src/components/index.ts';

const app = createApp(App)
useGlobalComponents(app);

TypeScript配置

如果你使用的是Typescript，你需要在项目根目录下创建一个shims.d.ts文件， 用于帮助Typescript理解Vue SFC文件和Markdown文件的结构。 对于VueJS开发者，你可能已经为你的VueJS文件做了这个，但是你可以用一个单独的文件来包装它shims.d.ts在你的项目根目录下：

declare module '*.vue' {
  import type { ComponentOptions } from 'vue'
  const Component: ComponentOptions
  export default Component
}

declare module '*.md' {
  import type { ComponentOptions } from 'vue'
  const Component: ComponentOptions
  export default Component
}

示例

查看 example 在当前的项目中。

注意事项

• vue路由模式不能使用 hash 模式，否则右边导航条会失效
• 组件的滚动事件一定要传递到window这一层，否则滚动时右边导航条不会更新