Vuepress-plugin-pad-markdown NPM

vuepress-plugin-pad-markdown

用于markdown增强的vuepress1.x插件

功能

markdown主题支持
代码高亮支持
主题和高亮均支持静态/动态切换配置
代码复制按钮与成功提示
katex支持
回车换行

安装

使用npm安装插件：

npm i vuepress-plugin-pad-markdown

或者使用yarn安装插件：

yarn add vuepress-plugin-pad-markdown

快速使用

在VuePress配置文件中启用插件：

//.vuepress/config.js
module.exports = {
    plugins: [
      [
        "pad-markdown",
        {
          useAllPlugins:true // 是否启用所有插件
        }
      ]
    ],
  }

现在已经开始使用啦!

其他配置如下

//.vuepress/config.js
module.exports = {
    plugins: [
      [
        "pad-markdown",
        {
          useAllPlugins:false, // 是否启用所有插件
          katex:true, // 是否启用katex
          footnote:true, // 是否启用footnote
          copy:true, // 是否启用复制按钮
          mark:true, // 是否启用高亮
          marmaid:true, // 是否启用marmaid
        }
      ]
    ],
  }

更多配置

完整配置示例:

//.vuepress/config.js
module.exports = {
    plugins: [
      [
        "pad-markdown",
        {
          useAllPlugins:false, // 是否启用所有插件
          katex:true, // 是否启用katex
          footnote:true, // 是否启用footnote
          copy:true, // 是否启用复制按钮
          mark:true, // 是否启用高亮
          marmaid:true, // 是否启用marmaid
        }
      ]
    ],
    themeConfig: {
        mdUseEventBus: true, // 是否启用主题事件总线(支持动态配置) 默认为true
        mdDefaultTheme: "light", // 默认主题 light/dark/auto
        mdCodeTheme: ["atom-one-dark", "atom-one-light"] // 默认代码高亮主题
    }
  }

事件总线为Vue.prototype.$MdEventBus
代码复制成功触发Vue.prototype.$MdEventBus.$emit('clipboard-success')
切换代码块高亮请使用Vue.prototype.$MdEventBus.$on('loadCodeTheme', (data)),传入字符串数组,高亮选项请参考hightlight.js/css
切换主题请使用Vue.prototype.$MdEventBus.$on('loadTheme', (data)),传入字符串"light"或"dark"或"auto"