Quick 文档 0.2.3

Hello VitePress

VitePress 全局配置

.vitepress>config.js

{
  base: '/',
  lang: 'en-US',
  title: 'VitePress',
  description: 'Vite & Vue powered static site generator.',
  head: [],
  locales: {},
  themeConfig:{}
}
1
2
3
4
5
6
7
8
9

显示行号 Line Numbers



 



module.exports = {
  markdown: {
    lineNumbers: true,
  },
};
1
2
3
4
5

配置 markdown 

module.exports = {
  markdown: {
    // 描点 options for markdown-it-anchor
    anchor: { permalink: false },

    // 目录 options for markdown-it-toc
    toc: { includeLevel: [1, 2] },

    config: (md) => {
      // 自定义外挂 use more markdown-it plugins!
      md.use(require('markdown-it-xxx'));
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注册组件 vue

Using Vue in Markdown

// 默认主题
import DefaultTheme from 'vitepress/theme';

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // 注册全局组件
    app.component('VueExample', VueExample);
  },
};
1
2
3
4
5
6
7
8
9
10
  • markdown 全局使用组件
# Vue Click Away

<VueClickAwayExample />
1
2
3

插件 markdown-it 

module.exports = {
  markdown: {
    config: (md) => {
      // 第三方语言处理插件
      md.use(require('quick-plugin-md/language/'));
    },
  },
};
1
2
3
4
5
6
7
8

插件 markdown-it 使用 Vue 

module.exports = {
  markdown: {
    config: (md) => {
      // 第三方语言处理插件
      md.use(require('quick-plugin-md/language/'), {
        // 插件配置参数
        // 无需标签根据第一行代码自动转为图形组件
        tags: ['gitGraph', 'classDiagram', 'sequenceDiagram', 'gantt'],
        //默认标签
        default: 'mermaid',
        // 输出日志
        log: true,
        // 自定义markdown标签对应转换的模板组件名
        template: {
          // mermaid 标签转为 组件定义并传参，需要注意传入内容转码
          // mermaid: '<mermaid code="{code}"></mermaid>',
          mermaid: '<mermaid>{code}</mermaid>',
          // Vue 组件名对应 标签语言名，code 为内容
          VueExample: '<VueExample>{code}</VueExample>',
        },
      });
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

主题 themeConfig 


{
  locales: {},
  repo: 'vuejs/vitepress',
  docsDir: 'docs',
  editLinks: true,
  editLinkText: 'Edit this page on GitHub',
  lastUpdated: 'Last Updated',
  nav: [...],
  sidebar: { ... }
}
1
2
3
4
5
6
7
8
9
10
11
12

Last Updated: