Load markdown through remark.
Simply add the loader to your configuration, and pass options.
import md from "markdown-file.md";
console.log(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],
},
},
},
],
},
],
},
};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.
Remark options
Type:
interface remarkOptions {
plugins: (string | any[])[];
settings: object;
data: object;
}Allows to connect remark plugins
Type:
type plugins = (string | any[])[];Default: []
Allows to connect remark plugins
webpack.config.js
import RemarkFrontmatter from "remark-frontmatter";
module.exports = {
// ...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: "remark-loader",
options: {
remarkOptions: {
plugins: [RemarkFrontmatter],
},
},
},
],
},
],
},
};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
import RemarkBookmarks from "remark-bookmarks";
import RemarkFrontmatter from "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",
},
},
],
],
},
},
},
],
},
],
},
};Remark settings
Type:
type settings = 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",
},
},
},
},
],
},
],
},
};Information available to all plugins
Type:
type data = 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
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",
},
},
},
},
],
},
],
},
};Remove removeFrontMatter
Type:
type removeFrontMatter = 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],
},
},
},
],
},
],
},
};This project was inspired the following open source work:
To get HTML, you need to add remark-html to the remark plugins and add html-loader to your webpack.config.js
import md from "markdown-file.md";
console.log(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],
},
},
},
],
},
],
},
};index.js
import md from "markdown-file.md";
console.log(md);webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: "remark-loader",
},
],
},
],
},
};We welcome all contributions! If you're new here, please take a moment to review our contributing guidelines before submitting issues or pull requests.
