vue-dotmd-loader 用於 markdown 轉 vue 組件的 webpack loader

vue-dotmd-loader

Docs | Github

用於把 markdown 文件轉成 Vue 組件的 webpack laoder 工具包。

import DocComponent from './doc.md'

export default {
    components: { DocComponent }
}

特性：

• [x] 支持導入 Vue 文件組件渲染成 Vue 組件實例
• [x] 代碼塊支持高亮指定行
• [x] md裏支持編寫 Vue 代碼和定義 script 渲染到當前組件
• [x] 支持定義當前組件 style 樣式
• [x] md 添加 totolist 支持
• [x] 支持代碼塊渲染組件（須要 Vue 的 esm 版本）
• [x] 支持導入文件代碼（渲染成代碼高亮）
• [x] 支持導入源碼（好比導入html片斷，注意：不會通過markdown編譯）

詳細用法：Docs

Usage

安裝

npm install -D vue-dotmd-loader

webpack配置

{
  rules: [
    {
      test: /\.md$/,
      use: [
        'vue-loader', // vue-dotmd-loader => vue-loader 必須的
        {
          loader: 'vue-dotmd-loader',
          options: options
        }
      ]
    }
  ]
}

options：

{
  wrapperName: 'DemoBlock', // 定義 demo 包裹組件（請全局註冊好組件），若是空則僅渲染 demo
  fileDemoNamePerfix: 'FileDemo', // 文件 demo 組件名前綴
  blockDemoNamePerfix: 'BlockCodeDemo',// 代碼塊 demo 組件名前綴
  fileDemoTag: 'demo:vue', // 文件 demo 標記；格式：[demo:vue](filePath)
  blockDemoTag: 'demo:vue',// 代碼塊 demo 標記；格式：````html demo:vue code ````
  includeCodeTag: 'include:code', // 導入code，渲染成代碼；格式：[include:code](filePath)
  includeRawTag: 'include:raw', // 導入html片斷；格式：[include:code](filePath)
  dest: false, // 輸出結果到文件；true/false/function
  dest (code, contextPath, resourcePath) {}, // 自定義寫文件
  markdown: { // markdown-it options see: https://github.com/markdown-it/markdown-it#init-with-presets-and-options
    options: {
      html: false
    },
    notWrapper: false,
    init (md) {
      md.use(otherPlugin) // 添加 markdown-it 插件
    }
  }
}

eslint ignore

{
  "eslintIgnore": [
    "**/*.md"
  ]
}

若是你須要與本頁面同樣的樣式，請按照以下引用 css。

import 'github-markdown-css/github-markdown.css'
import 'highlight.js/styles/color-brewer.css'
import 'vue-dotmd-loader/src/docs.css'

Vue CLI

若是你使用 Vue cli 初始化的項目，請按照以下配置。

{
  // ...
  configureWebpack: {
    resolve: {
      extensions: ['.md'],
    }
  },
  chainWebpack (config) {
    // see: https://github.com/neutrinojs/webpack-chain
    config.module
      .rule('dotmd')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .options({
        ...(config.module.rules.get('vue').uses.get('vue-loader').get('options') || null) // 與 vue-loader 配置保持一致
      })
      .end()
      .use('vue-dotmd-loader')
      .loader('vue-dotmd-loader')
      .options({
        dest: true,
        markdown: {
          options: {
            html: true
          }
        }
      })
      .end()
  }
}