remark-loader

免责声明： remark-loader 是由社区成员维护的第三方包，它可能没有与 webpack 相同的支持、安全策略或许可证，并且不受 webpack 维护。

通过 remark 加载 markdown。

用法

只需将加载器添加到配置中，并传递选项即可。

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],
              },
            },
          },
        ],
      },
    ],
  },
};

以下是 remark 插件的完整列表。

我们不再支持任何特定的 react 功能。如果您有兴趣将 JSX 与 Markdown 混合使用，请参阅精彩的 MDX 项目。

选项

remarkOptions
removeFrontMatter

remarkOptions

Remark 选项

类型

type remarkOptions = {
  plugins: Array<string | Array>;
  settings: Object;
  data: Object;
};

插件
设置
数据

插件

允许连接 remark 插件类型

type plugins = Array<string | Array>;

默认值：[]

允许连接 remark 插件

字符串

webpack.config.js

import RemarkFrontmatter from "remark-frontmatter";

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

数组

如果需要为插件指定选项，可以使用数组传递插件，其中第二个参数将是选项。

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.net.cn/package/remark-bookmarks",
                      },
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

设置

Remark 设置
类型

type settings = Object;

默认值：undefined

将 remark-stringify 选项和 remark-parse 选项选项传递给 remark。

webpack.config.js

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

数据

所有插件可用的信息
类型

type data = Object;

默认值：undefined

使用所有插件可用的信息配置 remark。信息存储在内存中的键值存储中。

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

删除 removeFrontMatter

类型

type removeFrontMatter = boolean;

默认值：true

默认情况下，将删除 frontMatter。要覆盖此行为，请将 removeFrontMatter 设置为 false，并将 remark-frontmatter 添加到插件中。

webpack.config.js

import RemarkFrontmatter from "remark-frontmatter";

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

灵感

本项目受到以下开源作品的启发

示例

Markdown 转 HTML

要获取 html，需要将 remark-html 添加到 remark 插件中，并将 html-loader 添加到 webpack.config 中

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],
              },
            },
          },
        ],
      },
    ],
  },
};

Markdown 转 Markdown

index.js

import md from "markdown-file.md";
console.log(md);

webpack.config.js

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

贡献

如果您尚未阅读我们的贡献指南，请花点时间阅读。

CONTRIBUTING

许可

« 上一页