remark-loader

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

配列

プラグインのオプションを指定する必要がある場合は、2番目の引数がオプションとなる配列を使用してプラグインを渡すことができます。

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

インスピレーション

このプロジェクトは、次のオープンソース作品にインスパイアされました

• react-markdown-loader
• marksy

例

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

貢献

まだ行っていない場合は、貢献ガイドラインをお読みください。

貢献

ライセンス

MIT