remark-loader-2

Remark Loader 2

Load markdown through remark with built-in image resolution. Exports frontmatter attributes as well.

You might prefer webpack-contrib/remark-loader if you're looking for a well-maintained, simple Webpack loader. However, as of this writing the latter version does not allow you to access frontmatter attributes, hence this fork.

Usage

Simply add the loader to your configuration, and pass options.

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'remark-loader-2',
            options: {
              plugins: [
                require('remark-kbd')
              ]
            }
          }
        ]
      }
    ]
  }
}

Here's the full list of remark plugins. Note that remark-html is always included as the last plugin and should not be included in the plugins list.

Frontmatter values are assigned to an object exported as attributes. For example, if you have this markdown file:

---
title: a clever remark
---
hello world!

You can use it like this:

import contents, { attributes } from './test.md'

console.log(contents) // logs "hello world!"
console.log(attributes) // logs "{ title: 'a clever remark' }"

This loader makes use of html-loader under the hood. You can forward options to it via htmlLoaderOptions:

{
  loader: 'remark-loader-2',
  options: {
    htmlLoaderOptions: {
      minimize: false
    }
  }
}

The esModule option will always be true to ensure frontmatter values from the markdown are correctly exported.

We no longer support any react specific features. Please see the wonderful MDX project if you're interested in mixing JSX with Markdown.

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Inspiration

This project was inspired the following open source work:

• react-markdown-loader
• marksy

License

MIT (c) 2017