Skip to content
Webpack loader to translate markdown to HTML using markdownit
Branch: master
Clone or download
Pull request Compare This branch is 4 commits ahead, 3 commits behind BlueOakJS:master.
Latest commit 58a4282 Oct 27, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Add example of using markdown from an external file Mar 6, 2017
lib fix using resolvePlugin Jul 14, 2017
.gitignore fix lib folder Sep 21, 2016
LICENSE Fix the license (should be MIT) Mar 6, 2017
README.md fix: module path Oct 27, 2017
index.js
package.json set publishConfig to public Jul 14, 2017
yarn.lock @nuxtjs/markdownit-loader Jul 14, 2017

README.md

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

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>

License

MIT

You can’t perform that action at this time.