vue-dotmd-loader

A webpack loader for loader markdown file transform to vue file.

中文

Features：

Support to import Vue file components and render them into Vue component instances
Code block supports highlighting specified lines
Supports writing Vue code and defining script to render to the current component
Support defining current component style
Support todolist
Support code block rendering components (requires the ESM version of Vue)
Support for importing file code (rendering to code highlight)
Support to import source code (such as importing HTML fragments, note: it will not be compiled through markdown)

Detailed usage：Docs

Usage

install

npm install -D vue-dotmd-loader

webpack.config.js

{
  rules: [
    {
      test: /\.md$/,
      use: [
        'vue-loader', // must use vue-loader
        {
          loader: 'vue-dotmd-loader',
          options: options
        }
      ]
    }
  ]
}

options：

{
  wrapperName: 'DemoBlock', // Define the demo package component (please register the component globally). If it is empty, only the demo will be rendered.
  fileDemoNamePerfix: 'FileDemo', // Name prefix of the demo component file
  blockDemoNamePerfix: 'BlockCodeDemo',// Name prefix of Code block demo component
  fileDemoTag: 'demo:vue', // File demo tag; format: [demo:vue](filePath)
  blockDemoTag: 'demo:vue', // Block code demo tag; format: ````html demo:vue code ````
  includeCodeTag: 'include:code', // Include code tag; format: [include:code](filePath)
  includeRawTag: 'include:raw', // Include raw source tag; format: [include:raw](filePath)
  dest: false, // ouput file; true/false/function
  dest (code, contextPath, resourcePath) {}, // Custom write file
  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) // Add markdown-it plug-in
    }
  }
}

eslint ignore

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

If you need the same style as this page, please refer to CSS as follows.

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

Vue CLI

If you are using a project initialized by Vue cli, configure it as follows.

{
  // ...
  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) // Consistent with Vue loader configuration
      })
      .end()
      .use('vue-dotmd-loader')
      .loader('vue-dotmd-loader')
      .options({
        dest: true,
        markdown: {
          options: {
            html: true
          }
        }
      })
      .end()
  }
}

License

dove-ui/vue-dotmd-loader

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages