Skip to content

nuxt-contrib/markdownit-loader

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

markdownit-loader

Convert Markdown file to HTML using markdown-it.

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

About

Webpack loader to translate markdown to HTML using markdownit

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 66.1%
  • Vue 30.6%
  • HTML 3.3%