Skip to content

wxsms/vue-md-loader

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](json5/json5@v1.0.1...v1.0.2)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
18bc67b

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vue-md-loader

CI NPM Downloads NPM Version License

loader version webpack version
2.x 5
1.x 4 and lower

Introduction

Webpack loader for converting Markdown files to ALIVE Vue components.

  • Configurable Markdown-It parser.
  • Built-in syntax highlighter with highlightjs.
  • Live demo support. Extremely useful for document examples.
  • Vue 3 & vue-cli usage support.
  • Hot reload.

Example

This page (vue-md-loader.wxsm.space) is generated by a markdown file. Source: /example.

There is also a Vue 3 & Vue-cli example: /example-vue3.

Install

NPM:

npm install vue-md-loader --save-dev

Yarn:

yarn add vue-md-loader --dev

Usage

Basic

Simply use vue-md-loader to load .md files and chain it with your vue-loader.

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.md$/,
        loader: 'vue-loader!vue-md-loader'
      }
    ]
  }
}

Note that to get code highlighting to work, you need to:

  • include one of the highlight.js css files into your project, for example: highlight.js/styles/github-gist.css.
  • specify a lang in code block. ref: creating and highlighting code blocks.

With Options

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.md$/,
        loaders: [
          'vue-loader',
          {
            loader: 'vue-md-loader',
            options: {
              // your preferred options
            }
          }
        ]
      }
    ]
  }
}

Markdown Alive!

A live demo is:

<template>
  <div class="cls">{{msg}}</div>
</template>
<script>
  export default {
    data () {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>
<style>
  .cls {
    color: red;
    background: green;
  }
</style>
<!-- some-live-demo.vue -->

becomes something like:

<some-live-demo/>
<pre><code>...</code></pre>

A Vue component with all it's <template>, <script> and <style> settled will be inserted before it's source code block.

Multiple lives inside a single markdown file is supported by:

  • All <script> from different code blocks:
    • code inside export default will be extract into it's own Vue component with no conflicts.
    • code before export default will be extract into the same top-level component.
  • All <style> from different code blocks will be extract into the same top-level component.

Note:

  • Loader will treat the entire block as template if no <template> found in live block.
  • You will need runtime + compiler build of Vue.js for this feature. For example:
module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

Options

wrapper

String. Default: section

The wrapper of entire markdown content, can be HTML tag name or Vue component name.

markdown

Object.

Markdown-It options. Default:

{
  html: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value
      } catch (__) {}
    }
    return ''
  }
}

plugins

Array.

Markdown-It plugins list. For example:

// ...
plugins: [
  // Without option
  require('markdown-it-plugin-1'),
  // With options
  [
    require('markdown-it-plugin-2'),
    {
      // ...
    }
  ]
]
// ...

rules

Object.

Markdown-It renderer rules. For example:

rules: {
  'table_open': () => '<div class="table-responsive"><table class="table">',
  'table_close': () => '</table></div>'
}

preProcess

Function. For example:

preProcess: function(source) {
  // do anything
  return source
}

process

Function. For example:

// This is useful when used with front-matter-loader to set the page title in nuxt projects
process: function(source){
  let attrs = (source && source.attributes) || {}
  attrs.title = attrs.title || ""
  return {
    template: source.body,
    style: "",
    script: `export default {
      head(){
        return {
          title: '${attrs.title}'
        }
      }
    }`
  }
}

afterProcess

Function. For example:

afterProcess: function(result) {
  // do anything
  return result
}

live

Boolean. Default: true

Enable / Disable live detecting and assembling.

livePattern

Regex. Default: /<!--[\s]*?([-\w]+?).vue[\s]*?-->/i

A code block with livePattern inside itself becomes a live block. The matched body will become the live Vue component's name and reference (note that they must be unique to each other within the same page).

afterProcessLiveTemplate

Function. Default: null

Use this if you wish to change the live template manually after process (e.g. add wrappers). For example:

afterProcessLiveTemplate: function(template) {
  return `<div class="live-wrapper">${template}</div>`
}

Build Setup

# install dependencies
npm install

# serve example with hot reload at localhost:8888
npm run dev

# run all tests
npm test

License

MIT