{"id":14384697,"url":"https://github.com/webpack-contrib/remark-loader","last_synced_at":"2025-04-06T10:13:21.252Z","repository":{"id":38094214,"uuid":"99273215","full_name":"webpack-contrib/remark-loader","owner":"webpack-contrib","description":"Load markdown through remark with image resolving and some react-specific features.","archived":false,"fork":false,"pushed_at":"2025-01-21T17:26:54.000Z","size":2964,"stargazers_count":19,"open_issues_count":1,"forks_count":11,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-30T09:07:54.520Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack-contrib.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"webpack"}},"created_at":"2017-08-03T20:40:32.000Z","updated_at":"2025-01-21T17:26:59.000Z","dependencies_parsed_at":"2024-02-20T16:32:00.350Z","dependency_job_id":"6473264a-1b41-449a-b3a3-70b5ff43333c","html_url":"https://github.com/webpack-contrib/remark-loader","commit_stats":{"total_commits":210,"total_committers":21,"mean_commits":10.0,"dds":0.8142857142857143,"last_synced_commit":"2022c25a6bd64d1ef434d91f65f2714c9a47b1d3"},"previous_names":["skipjack/remark-loader"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fremark-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fremark-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fremark-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fremark-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack-contrib","download_url":"https://codeload.github.com/webpack-contrib/remark-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464222,"owners_count":20942970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-28T18:01:35.638Z","updated_at":"2025-04-06T10:13:21.228Z","avatar_url":"https://github.com/webpack-contrib.png","language":"JavaScript","funding_links":["https://opencollective.com/webpack"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![cover][cover]][cover-url]\n[![discussion][discussion]][discussion-url]\n[![size][size]][size-url]\n\n# Remark Loader\n\nLoad markdown through `remark`.\n\n## Usage\n\nSimply add the loader to your configuration, and pass options.\n\n```js\nimport md from \"markdown-file.md\";\n\nconsole.log(md);\n```\n\n**webpack.config.js**\n\n```js\nimport RemarkHTML from \"remark-html\";\n\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        use: [\n          {\n            loader: \"html-loader\",\n          },\n          {\n            loader: \"remark-loader\",\n            options: {\n              remarkOptions: {\n                plugins: [RemarkHTML],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nHere's the full list of [`remark` plugins](https://github.com/wooorm/remark/blob/master/doc/plugins.md).\n\nWe no longer support any `react` specific features.\nPlease see the wonderful [MDX](https://mdxjs.com/) project if you're interested in mixing JSX with Markdown.\n\n## Options\n\n- **[`remarkOptions`](#remarkOptions)**\n- **[`removeFrontMatter`](#removeFrontMatter)**\n\n### remarkOptions\n\nRemark options\n\nType:\n\n```ts\ntype remarkOptions = {\n  plugins: Array\u003cstring | Array\u003e;\n  settings: Object;\n  data: Object;\n};\n```\n\n- **[`plugins`](#plugins)**\n- **[`settings`](#settings)**\n- **[`data`](#data)**\n\n#### plugins\n\nAllows to connect [`remark` plugins](https://github.com/wooorm/remark/blob/master/doc/plugins.md)\nType:\n\n```ts\ntype plugins = Array\u003cstring | Array\u003e;\n```\n\nDefault: `[]`\n\nAllows to connect [`remark` plugins](https://github.com/wooorm/remark/blob/master/doc/plugins.md)\n\n##### string\n\n**webpack.config.js**\n\n```js\nimport RemarkFrontmatter from \"remark-frontmatter\";\n\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        use: [\n          {\n            loader: \"remark-loader\",\n            options: {\n              remarkOptions: {\n                plugins: [RemarkFrontmatter],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n##### array\n\nIf need to specify options for the plugin, can pass the plugin using an array, where the second argument will be options.\n\n**webpack.config.js**\n\n```js\nimport RemarkFrontmatter from \"remark-frontmatter\";\nimport RemarkBookmarks from \"remark-bookmarks\";\n\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        use: [\n          {\n            loader: \"remark-loader\",\n            options: {\n              remarkOptions: {\n                plugins: [\n                  RemarkFrontmatter,\n                  [\n                    RemarkBookmarks,\n                    {\n                      bookmarks: {\n                        npm: \"https://npmjs.com/package/remark-bookmarks\",\n                      },\n                    },\n                  ],\n                ],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### settings\n\nRemark settings  \nType:\n\n```ts\ntype settings = Object;\n```\n\nDefault: `undefined`\n\nPass [`remark-stringify` options](https://github.com/remarkjs/remark/tree/main/packages/remark-stringify#options) and [`remark-parse` options](https://github.com/remarkjs/remark/tree/main/packages/remark-parse#options) options to the `remark`.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        use: [\n          {\n            loader: \"remark-loader\",\n            options: {\n              remarkOptions: {\n                settings: {\n                  bullet: \"+\",\n                  listItemIndent: \"1\",\n                },\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### data\n\nInformation available to all plugins  \nType:\n\n```ts\ntype data = Object;\n```\n\nDefault: `undefined`\n\nConfigure the [`remark`](https://github.com/unifiedjs/unified#processordatakey-value) with information available to all plugins.\nInformation is stored in an in-memory key-value store.\n\n**webpack.config.js**\n\n```js\nfunction examplePluginUsingData() {\n  console.log(this.data);\n  // { alpha: 'bravo', charlie: 'delta' }\n}\n\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        use: [\n          {\n            loader: \"remark-loader\",\n            options: {\n              remarkOptions: {\n                plugins: [examplePluginUsingData],\n                data: {\n                  alpha: \"bravo\",\n                  charlie: \"delta\",\n                },\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### removeFrontMatter\n\nRemove removeFrontMatter\n\nType:\n\n```ts\ntype removeFrontMatter = boolean;\n```\n\nDefault: `true`\n\nBy default, the frontMatter is removed.\nTo override this behavior, set `removeFrontMatter` to `false` and add `remark-frontmatter` to plugins.\n\n**webpack.config.js**\n\n```js\nimport RemarkFrontmatter from \"remark-frontmatter\";\n\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        use: [\n          {\n            loader: \"remark-loader\",\n            options: {\n              removeFrontMatter: false,\n              remarkOptions: {\n                plugins: [RemarkFrontmatter],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Inspiration\n\nThis project was inspired the following open source work:\n\n- [`react-markdown-loader`](https://github.com/javiercf/react-markdown-loader)\n- [`marksy`](https://github.com/cerebral/marksy)\n\n## Examples\n\n### Markdown to HTML\n\nTo get html, need to add [`remark-html`](https://github.com/wooorm/remark-html) to the remark plugins and add [`html-loader`](https://github.com/webpack-contrib/html-loader) to the `webpack.config`\n\n```js\nimport md from \"markdown-file.md\";\nconsole.log(md);\n```\n\n**webpack.config.js**\n\n```js\nimport RemarkHTML from \"remark-html\";\n\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        use: [\n          {\n            loader: \"html-loader\",\n          },\n          {\n            loader: \"remark-loader\",\n            options: {\n              remarkOptions: {\n                plugins: [RemarkHTML],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Markdown to Markdown\n\n**index.js**\n\n```js\nimport md from \"markdown-file.md\";\nconsole.log(md);\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        use: [\n          {\n            loader: \"remark-loader\",\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/remark-loader.svg\n[npm-url]: https://npmjs.com/package/remark-loader\n[node]: https://img.shields.io/node/v/remark-loader.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/webpack-contrib/remark-loader/workflows/remark-loader/badge.svg\n[tests-url]: https://github.com/webpack-contrib/remark-loader/actions\n[cover]: https://codecov.io/gh/webpack-contrib/remark-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/remark-loader\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\n[size]: https://packagephobia.now.sh/badge?p=remark-loader\n[size-url]: https://packagephobia.now.sh/result?p=remark-loader\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fremark-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack-contrib%2Fremark-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fremark-loader/lists"}