ag-grid is proud to partner with webpack

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
Name Type Default Description `remarkOptions` `{Object}`	`{Object}`	`{}`	Remark options
Name Type Default Description `removeFrontMatter` `{Boolean}`	`{Boolean}`	`true`	Remove removeFrontMatter

remarkOptions

Name	Type	Default	Description
Name Type Default Description `plugins` `Array<String\\|Array>`	`Array<String\\|Array>`	`[]`	Allows to connect `remark` plugins
Name Type Default Description `settings` `{Object}`	`{Object}`	`undefined`	Remark settings
Name Type Default Description `data` `{Object}`	`{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:

Examples

Markdown to HTML

To get html, need to add remark-html to the remark plugins and add [html-loader](/loaders/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

« Previous

raw-loader

sass-loader