Deprecated, please see - https://github.com/webpack/webpack/tree/main/examples/markdown

Remark Loader

Load markdown through remark.

Usage

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

importmdfrom"markdown-file.md";console.log(md);

webpack.config.js

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

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

• remarkOptions
• removeFrontMatter

remarkOptions

Remark options

Type:

interfaceremarkOptions{plugins: (string|any[])[];settings: object;data: object;}

• plugins
• settings
• data

plugins

Allows to connect remark plugins

Type:

typeplugins=(string|any[])[];

Default: []

Allows to connect remark plugins

string

webpack.config.js

importRemarkFrontmatterfrom"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, you can pass the plugin using an array, where the second argument will be the options.

webpack.config.js

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

settings

Remark settings

Type:

typesettings=object;

Default: undefined

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

webpack.config.js

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

data

Information available to all plugins

Type:

typedata=object;

Default: undefined

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

webpack.config.js

functionexamplePluginUsingData(){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

Remove removeFrontMatter

Type:

typeremoveFrontMatter=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

importRemarkFrontmatterfrom"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, you need to add remark-html to the remark plugins and add html-loader to your webpack.config.js

importmdfrom"markdown-file.md";console.log(md);

webpack.config.js

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

Markdown to Markdown

index.js

importmdfrom"markdown-file.md";console.log(md);

webpack.config.js

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

Contributing

We welcome all contributions! If you're new here, please take a moment to review our contributing guidelines before submitting issues or pull requests.

CONTRIBUTING

License

MIT