quick-plugin-md

quick-plugin-md

Usage no npm install needed!

<script type="module">
  import quickPluginMd from 'https://cdn.skypack.dev/quick-plugin-md';
</script>

README

VitPress Plugin for mermaid.js

vitpress 首次编译需要重启。

alias esm 动态编译组件

如需动态编译执行 vue 组件代码,需修改源码

  • vitepress 版本 0.21.4 需修改以下路径代码 node_modeules>vitepress>dist>node>serve-3fdbda2c.js
// 第12309行注释,替换为编译
//const vueRuntimePath = "vue/dist/vue.runtime.esm-bundler.js";
const vueRuntimePath = 'vue/dist/vue.esm-bundler.js';
  • vitepress 版本 0.13.0 alias配置失效,。 需修改以下路径代码 node_modeules>vitepress>dist>node>serve-3fdbda2c.js
// 第12333行注释,替换为编译
    {
      find: /^vue$/,
    // replacement: require.resolve("vue/dist/vue.runtime.esm-bundler.js")
       replacement: require.resolve("vue/dist/vue.esm-bundler.js")
    }

Installation

You can install it with

# 安装
yarn add -D quick-plugin-md
# npm i -D quick-plugin-md

# 调试测试文档
yarn docs:dev

# 打包测试文档
yarn docs:build

# 打包 组件库
yarn lib
# 打包 语言插件
yarn lang
# 打包 搜索插件
yarn search
# 打包输出全部组件与插件
yarn build

更新

  • 0.2.6 2022/1/15

    • quick-svg 独立样式引入
  • 0.2.5 2022/1/15

    • quick-svg 0.0.6 更新 init data
  • 0.2.4 2022/1/15

    • 修正脑图样式重名
    • quick-svg 0.0.5 修正浏览器兼容性
  • 0.2.3 2022/1/15

    • 新增样式解析 less
    • quick-svg新增集成脑图插件
  • 0.2.2 2022/1/11

    • rollup 升级 2.63.0
    • quick.lib 升级 0.4.4
    • CodeRun 新增参数 unsee hide
  • 0.2.1 2021/12/2

    • quick.lib 升级 0.4.3 解决 base64 编码兼容 c#
  • 0.2.0 2021/11/24

    • CodeRun 修正样式加载 bug
  • 0.1.9 2021/11/21

    • quick.lib : 0.4.0 升级组件代码压缩 bug
  • 0.1.8 [里程碑] 2021/11/17 修正搜索组件 bug

  • 0.1.6 2021/11/17

    • 修正搜索源生成的 bug
    • 加入以下插件 "escape-html": "^1.0.3", "diacritics": "^1.3.0", "markdown-it-container": "^2.0.0", "markdown-it-emoji": "^1.4.0", "markdown-it-anchor": "^5.2.7", "markdown-it-table-of-contents": "^0.4.4"
  • 0.1.5 2021/11/6

    • 分离 mermaidjs 单独由 config.head 中引用,请参阅文档
  • 0.1.5 2021/11/6

    • 分离 mermaidjs 单独由 config.head 中引用,请参阅文档
  • 0.1.4 2021/11/6

    • vitepress 升级到 0.20.1
  • 0.1.3 2021/11/1

    • quick.lib : 0.3.8
    • mermaid : 8.13.3
    • vitepress 升级到 0.14.1
  • 0.1.2 2021/6/2

    • search 新增搜索支持多级路径 children
  • 0.1.0 里程碑 2021/4/20

    • Picture 新增图片组件,支持缩放
  • 0.0.8
    2021/4/19

    • mermaid 随机 ID 修正 bug
  • 0.0.7 2021/4/19

    • language markdown 语言标签外挂更名
    • mermaid 自动标签识别,改为配置 tags
  • 0.0.6 2021/4/18

    • 修正 build bug
  • 0.0.5

    • 采用异步加载,修正图表显示组件打包 bug
  • 0.0.4

    • 修正图表显示组件 bug

vuepress

Then you just need to register the plugin in your .vuepress/config.js:

module.exports = {
  alias: {
    '@': resolve('../../'),
  },
  title: 'Hello VitePress',
  description: 'Just playing around.',
  base,
  themeConfig: {
    docsDir: 'docs',
    logo: 'img/logo.png',
    lastUpdated: 'Last Updated',
    editLinkText: 'Edit this page on Gitee',
    // 编辑连接
    editLink: true,
    nextLinks: true,
    prevLinks: true,
    // 导航栏
    sidebar: true, // 'auto',
    // 层次
    // sidebarDepth: 2,
    // 顶部导航
    nav,
    // 侧边栏
    sidebar,
  },
  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! quick-plugin-md/dist/plugin/mermaid.js
       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>',
    //   pie: '<PieCode>{code}</PieCode>',
    // },
       });
    },
  },
};

Usage

The recommended usage is to place your mermaidjs diagrams inside a fenced code block with the language 'mermaid':

```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
loop every minute
    John-->Alice: Great!
end
```