remark-loader

Remark Loader

Load markdown through remark with built-in image resolution.

Usage

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

webpack.config.js

import RemarkFrontmatter from 'remark-frontmatter';

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'remark-loader',
            options: {
              remarkOptions: {
                plugins: [RemarkFrontmatter],
                settings: {
                  bullet: '+',
                  listItemIndent: '1',
                },
              },
            },
          },
        ],
      },
    ],
  },
};

Here's the full list of remark plugins.

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

Options

Name	Type	Default	Description
remarkOptions	{Object}	{}	Remark options
removeFrontMatter	{Boolean}	true	Remove removeFrontMatter

remarkOptions

Name	Type	Default	Description
plugins	Array<String|Array>	[]	Allows to connect remark plugins
settings	{Object}	undefined	Remark settings
data	{Object}	undefined	Information available to all plugins

plugins

Type: Array<String\|Array> Default: []

Allows to connect remark plugins

String

webpack.config.js

import RemarkFrontmatter from 'remark-frontmatter';

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'remark-loader',
            options: {
              remarkOptions: {
                plugins: [RemarkFrontmatter],
              },
            },
          },
        ],
      },
    ],
  },
};

Array

If need to specify options for the plugin, can pass the plugin using an array, where the second argument will be options.

webpack.config.js

import RemarkFrontmatter from 'remark-frontmatter';
import RemarkBookmarks from 'remark-bookmarks';

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'remark-loader',
            options: {
              remarkOptions: {
                plugins: [
                  RemarkFrontmatter,
                  [
                    RemarkBookmarks,
                    {
                      bookmarks: {
                        npm: 'https://npmjs.com/package/remark-bookmarks',
                      },
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

settings

Type: Object Default: undefined

Pass remark-stringify options and remark-parse options options to the remark.

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'remark-loader',
            options: {
              remarkOptions: {
                settings: {
                  bullet: '+',
                  listItemIndent: '1',
                },
              },
            },
          },
        ],
      },
    ],
  },
};

data

Type: Object Default: undefined

Configure the remark with information available to all plugins. Information is stored in an in-memory key-value store.

webpack.config.js

function examplePluginUsingData() {
  console.log(this.data);
  // { alpha: 'bravo', charlie: 'delta' }
}

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'remark-loader',
            options: {
              remarkOptions: {
                plugins: [examplePluginUsingData],
                data: {
                  alpha: 'bravo',
                  charlie: 'delta',
                },
              },
            },
          },
        ],
      },
    ],
  },
};

removeFrontMatter

Type: Boolean Default: true

By default, the frontMatter is removed. To override this behavior, set removeFrontMatter to false and add remark-frontmatter to plugins.

webpack.config.js

import RemarkFrontmatter from 'remark-frontmatter';

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'remark-loader',
            options: {
              removeFrontMatter: false,
              remarkOptions: {
                plugins: [RemarkFrontmatter],
              },
            },
          },
        ],
      },
    ],
  },
};

Inspiration

This project was inspired the following open source work:

• react-markdown-loader
• marksy

Examples

Markdown to HTML

To get html, need to add remark-html to the remark plugins and add html-loader to the webpack.config

import 'markdown-file.md';

webpack.config.js

import RemarkHTML from 'remark-html';

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'html-loader',
          },
          {
            loader: 'remark-loader',
            options: {
              remarkOptions: {
                plugins: [RemarkHTML],
              },
            },
          },
        ],
      },
    ],
  },
};

Markdown to Markdown

index.js

import 'markdown-file.md';

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'remark-loader',
          },
        ],
      },
    ],
  },
};

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT

Changelog

1.0.0 (2020-08-06)

⚠ BREAKING CHANGES

• minimum required Node.js version is 10.13.0
• minimum required webpack version is 4
• loader doesn't return HTML, you need to use html-loader, please look at this example
• update remark to 12.0.0 version, some plugins can be incompatible, please update them

Features

• added remarkOptions option, you can specify plugins, settings and data
• added removeFrontMatter option (#19) (3550105)
• validate options by default (c6b6ed2)

Bug Fixes

• improved performance

<a name="1.0.0-rc.0"></a>