nuxt-community/markdownit-loader

Name: markdownit-loader

Owner: Nuxt Community

Description: Webpack loader to translate markdown to HTML using markdownit

Forked from: BlueOakJS/markdownit-loader

Created: 2017-07-14 09:19:45.0

Updated: 2018-03-22 03:07:37.0

Pushed: 2017-10-27 16:23:54.0

Homepage: null

Size: 77

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

markdownit-loader

Convert Markdown file to HTML using markdown-it.

See Markdownit Module for easy integration with Nuxt.js.

Installation

i @nuxtjs/markdownit-loader --save-dev

Features

• Hot reload
• Code highlighting using highlight.js

Usage

Documentation: Using loaders

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

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

Passing options to markdown-it

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

le.exports = {
dule: {
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

markdown = require('markdown-it')({
ml: true,
eaks: true


down
se(plugin1)
se(plugin2, opts, ...)
se(plugin3);

le.exports = {
dule: {
rules: [
  {
    test: /\.md/,
    use: [
      { loader: 'raw-loader' },
      {
        loader: 'markdownit-loader',
        options: markdown
      }
    ]
  }
]

Note

Resource references can only use absolute path

e.g.

webpack config

lve: {
ias: {
src: __dirname + '/src'

It'is work

 src="~src/images/abc.png">

ipt>
port Image from 'src/images/logo.png'
port Hello from 'src/components/hello.vue'

dule.exports = {

ript>

Incorrect

 src="../images/abc.png">

ipt>
port Image from '../images/logo.png'
port Hello from './hello.vue'
dule.exports = {

ript>

License

MIT