remark-loader

免責聲明： remark-loader 是由社群成員維護的第三方套件，它可能沒有與 webpack 相同的支援、安全政策或授權，且並非由 webpack 維護。

透過 remark 載入標記語言。

用法

只需將載入器新增至您的設定檔，並傳遞選項。

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.com/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

授權

« 上一頁