@mistark/md-loader-vue v0.0.5

@mistark/md-loader-vue

Loads a markdown file and compiles it to Vue component.

Getting Started

To begin, you'll need to install @mistark/md-loader-vue:

npm install @mistark/md-loader-vue --save-dev

Chain the @mistark/md-loader-vue with the vue-loader to compile into a vue component.

Then add the loader to your Webpack configuration. For example:

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.md$/i,
                use: [
                    // Compiles from Vue source strings
                    "vue-loader",
                    // Compiles Markdown to Vue Component Source
                    "@mistark/md-loader-vue"
                ],
            },
        ],
    },
};

The last step needs to disable the eslint check of markdown files

.eslintignore

**/*.md

Finally run webpack via your preferred method.

Options

mdItOpts

Type: Object Default:

{
    html: true,
    xhtmlOut: true,
    typographer: true,
    breaks: true,
    linkify: true
}

You can refer to the official website of markdown-it to personalize your own initial configuration.

vueMatcher

Type: Function｜ RegExp Default: null
Specify a function or regular expression to tell @mistark/md-loader-vue whether a code block needs to be compiled into a vue component.If no value is given, the code block starting with "vue" will be taken by default For example: After copying the following code, you need to delete the # sign in front of ` before testing

#```[vue]
<template>
 <div>{{testStr}}</div>
</template>
<script>
export default {
 data(){
  return {testStr: 'this is a test!'};
 }
}
</script>
#```

Define a matching function or regular according to your own preferences

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/i,
        use: [
          // Compiles from Vue source strings
          "vue-loader",
          // Compiles Markdown to Vue Component Source
          {
            loader: "@mistark/md-loader-vue",
            options: {
             vueMatcher: function(token){
              return token.info.trim() === 'vue';
             }
             // vueMatcher: /^\s*vue\s*$/
            }
          }
        ],
      },
    ],
  },
};

vueRender

Type: Function Default: null
You can modify the output result of the template after compiling the vue code block by defining a function.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/i,
        use: [
          // Compiles from Vue source strings
          "vue-loader",
          // Compiles Markdown to Vue Component Source
          {
            loader: "@mistark/md-loader-vue",
            options: {
             vueMatcher: /^\s*vue\s*$/,
             vueRender: function(opts){
             	// console.log('>>>>source code')
                // console.log(opts.code)
             	return `<div>this is a live demo</div><div>${opts.templete}</div>`
             }
            }
          }
        ],
      },
    ],
  },
};

codeRender

Type: Function Default: null
If you want to modify the default code block rendering function, you may need to define your own processing function webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/i,
        use: [
          // Compiles from Vue source strings
          "vue-loader",
          // Compiles Markdown to Vue Component Source
          {
            loader: "@mistark/md-loader-vue",
            options: {
            	codeRender: function(tokens, idx){
                 const token = tokens[idx];
                 const codeHtml = this.utils.escapeHtml(token.content);
                 return `<div>this is a code block</div><pre><code class="${token.info}">${codeHtml}</code></pre>`
                }
            }
          }
        ],
      },
    ],
  },
};

customizeMarkdownIt

Type: Function Default: null
Add the features you need to the markdown-it instance

webpack.config.js

const container = require('markdown-it-container');
module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/i,
        use: [
          // Compiles from Vue source strings
          "vue-loader",
          // Compiles Markdown to Vue Component Source
          {
            loader: "@mistark/md-loader-vue",
            options: {
            	customizeMarkdownIt: function(md){
                 md.use(container, 'tip');
                 md.use(container, 'warning')
                }
            }
          }
        ],
      },
    ],
  },
};

formatter

Type: Function Default:

function vueFormatter(opts){
    const declares = opts.components.map((cfg)=> `${cfg.name}: ${cfg.ctor}`).join();
    const className = opts.className.map(s => `'${s}'`).join();
    return `<template>
  <section :class="className">${opts.template}</section>
</template>

<script>
export default {
  name: '${opts.fileName}',
  components: {${declares}},
  data(){
    return {
      className: [${className}]
    }
  }
}
</script>
${opts.styles.join('\n')}`
}

License

MIT