フロントマター処理
- remark-parse:
remark-parseはフロントマター処理を行いません。 - remark-gfm:
remark-gfmはフロントマター処理を行いません。 - remark-mdx:
remark-mdxはフロントマター処理を行いません。 - remark-frontmatter:
remark-frontmatterは、Markdown内のフロントマターを解析し、ASTに追加します。これにより、フロントマターに含まれるメタデータ（タイトル、日付、タグなど）を簡単に取得できます。 - remark-html:
remark-htmlはフロントマター処理を行いません。
GFMサポート
- remark-parse:
remark-parseは、GFMをサポートするためには他のプラグイン（例：remark-gfm）が必要です。 - remark-gfm:
remark-gfmは、GFMを完全にサポートします。テーブル、チェックボックス、ストライクスルーなど、GFMのすべての機能を解析し、HTMLに変換します。 - remark-mdx:
remark-mdxは、GFMをサポートしますが、主にMDXコンテンツに焦点を当てています。 - remark-frontmatter:
remark-frontmatterは、GFM（GitHub Flavored Markdown）をサポートしていません。 - remark-html:
remark-htmlは、GFMをサポートするためには他のプラグイン（例：remark-gfm）が必要です。
HTML変換
- remark-parse:
remark-parseは、HTML変換を行いません。 - remark-gfm:
remark-gfmは、HTML変換を行いません。 - remark-mdx:
remark-mdxは、MarkdownをHTMLに変換しますが、MDXコンテンツを処理するための追加機能があります。 - remark-frontmatter:
remark-frontmatterは、HTML変換を行いません。 - remark-html:
remark-htmlは、MarkdownをHTMLに変換します。
MDXサポート
- remark-parse:
remark-parseは、MDXをサポートしていません。 - remark-gfm:
remark-gfmは、MDXをサポートしていません。 - remark-mdx:
remark-mdxは、MDXをサポートします。Markdown内にReactコンポーネントを埋め込むことができます。 - remark-frontmatter:
remark-frontmatterは、MDXをサポートしていません。 - remark-html:
remark-htmlは、MDXをサポートしていません。
コード例
- remark-parse:
Markdown解析の例
import { remark } from 'remark'; import remarkParse from 'remark-parse'; const markdown = '# Hello World'; const ast = await remark() .use(remarkParse) .process(markdown); console.log(ast); - remark-gfm:
GFMの例
| Header 1 | Header 2 | | -------- | -------- | | Row 1 | Cell 1 | | Row 2 | Cell 2 | - [ ] Task 1 - [x] Task 2 - remark-mdx:
MDXの例
# Hello MDX <MyComponent /> - remark-frontmatter:
フロントマターの例
--- title: My Post author: John Doe date: 2023-01-01 --- # Hello World This is a Markdown post with front matter. - remark-html:
HTML変換の例
import { remark } from 'remark'; import remarkHtml from 'remark-html'; const markdown = '# Hello World'; const html = await remark() .use(remarkHtml) .process(markdown); console.log(html.toString());