@nuxtjs/markdownit-loader
Webpack loader to translate markdown to HTML using markdownit.
Last updated 3 years ago by pi0 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @nuxtjs/markdownit-loader 
SYNC missed versions from official npm registry.

markdownit-loader

Convert Markdown file to HTML using markdown-it.

See markdownit Module for easy integration with Nuxt.js.

Installation

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

Features

  • Hot reload
  • Code highlighting using highlight.js

Usage

See Using loaders.

webpack.config.js file (webpack >= 2.0):

module.exports = {
  module: {
    rules: [{
      test: /\.md/,
      loader: '@nuxtjs/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: '@nuxtjs/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('@nuxtjs/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: '@nuxtjs/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>

License

MIT

Current Tags

  • 1.1.1                                ...           latest (3 years ago)

2 Versions

  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
Downloads
Today 2
This Week 14
This Month 54
Last Day 4
Last Week 19
Last Month 248
Dependencies (3)
Dev Dependencies (13)

Copyright 2014 - 2016 © taobao.org |