markdownit-loader

Convert Markdown file to HTML using markdown-it.

Installation

npm i markdownit-loader --save-dev

Features

• Hot reload
• Code highlighting using highlight.js

Usage

Documentation: Using loaders

webpack.config.js file (webpack 2.x):

module.exports = {
  module: {
    rules: [{
      test: /\.md/,
      loader: 'markdownit-loader'
    }]
  }
};

Passing options to markdown-it

See markdown-it for a complete list of possible options.

module.exports = {
  module: {
    rules: [
      {
        test: /\.md/,
        use: [
          { loader: 'raw-loader' },
          {
            loader: 'markdownit-loader',
            options: {
              // markdown-it config
              preset: 'default',
              breaks: true,
 
              preprocess: function(markdownIt, source) {
                // do any thing
 
                return source
              },
 
              use: [
                /* markdown-it plugin */
                'markdown-it-xxx',
 
                /* or */
                ['markdown-it-xxx', 'this is options']
              ]
            }
          }
        ]
      }
    ]
  }
};

Or you can customize markdown-it

var markdown = require('markdown-it')({
  html: true,
  breaks: true
})
 
markdown
  .use(plugin1)
  .use(plugin2, opts, ...)
  .use(plugin3);
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.md/,
        use: [
          { loader: 'raw-loader' },
          {
            loader: 'markdownit-loader',
            options: markdown
          }
        ]
      }
    ]
  }
};

Note

Resource references can only use absolute path

e.g.

webpack config

resolve: {
  alias: {
    src: __dirname + '/src'
  }
}

It'is work

<img src="~src/images/abc.png">
 
<script>
  import Image from 'src/images/logo.png'
  import Hello from 'src/components/hello.vue'
 
  module.exports = {
  }
</script>

Incorrect

<img src="../images/abc.png">
 
<script>
  import Image from '../images/logo.png'
  import Hello from './hello.vue'
  module.exports = {
  }
</script>

Changelog

• 2.0.0: Changed how plugins are passed to markdown-it (breaking API change) to fix an issue with vue-loader (THANKS Pooya Parsa)

License

MIT