in

A webpack loader for loader markdown file transform to vue file


vue-dotmd-loader

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

Features

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

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()
  }
}




Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

BSNL Took Jio’s Throne In This Segment

Bol Kaffara Kya Hoga Lyrics — Farhan Sabri | Neha Kakkar