/vue-markdown-loader-1

A webpack loader that transform markdown to vue component. Extracted from Vuepress.

Primary LanguageTypeScript

vue-markdown-loader

简体中文

This is a webpack laoder that can load markdown file. With proper configuration, the loader can convert markdown file content into vue sfc component object or into html string, so it can be chained with vue-loader or html-loader.

The project is inspired by vuepress, we reused most of its source code and made some improvements to allow it being used in non-vuepress project.

If you are interested in Vuepress, please visit vuepress and star it. 😄

screenshot

Install

npm i @tianyong90/vue-markdown-loader -S

Useage

sue along with vue-loader

Generally, it is recommended to be used with vue-loader

  1. configuration

add rule for .md file in webpack.config.js

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
      test: /\.md$/,
      use: [
        {
          loader: 'vue-loader',
          options: {
            compilerOptions: {
              preserveWhiteSpace: false
            }
          }
        },
        {
          loader: '@tianyong90/vue-markdown-loader',
          options: {
            contentCssClass: 'markdown-body',
            markdown: {
              lineNumbers: true, // enable linenumber
            }
          }
        }
      ]
    }
  ]
},
// other options
  1. load .md as a vue sfc object
<template>
  <Hello />
</template>

<script scoped>
import Hello from 'hello.md'

export default {
  components: { Hello }
}
</script>

<style>
// add styles for parsed html element
</style>

along with html-loader

vue-markdown-loader can parse markdown and return html string which can be loaded by html-loader

  1. configuration

add rule for .md file in webpack.config.js

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
      test: /\.md$/,
      use: [
        {
          loader: 'html-loader',
        },
        {
          `loader: '@tianyong90/vue-markdown-loader',
          options: {
            mode: 'html', // IMPORTANT
          }
        }
      ]
    }
  ]
},
// other options
  1. load .md as html string
import Hello from 'hello.md'

console.log(Hello)

Hello:

加载后的 html

use it alone

vue-markdown-loader can parse markdown file and return an object whick contains hteml and frontmattter data of the file.

  1. configuration

add rule for .md file in webpack.config.js

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
      test: /\.md$/,
      use: [
        {
          loader: '@tianyong90/vue-markdown-loader',
          options: {
            mode: 'raw', // IMPORTANT
            contentCssClass: 'markdown-body',
          }
        }
      ]
    }
  ]
},
// other options
  1. load .md file as an object
import Hello from 'hello.md'

console.log(Hello)

the variable Html contains 2 property, attributes(frontmatter data) and html(html content), looks lick below:

加载后的对象

License

MIT