remark-parse 插件負責解析 Markdown 內容並生成抽象語法樹（AST），這個過程不涉及前置資料的處理。前置資料的解析需要其他專門的插件，如 remark-frontmatter。

remark-gfm 插件不處理前置資料，但它支持在 Markdown 中使用 GitHub 標準的擴展功能，如表格和任務清單。這些功能可以在 Markdown 內容中添加更多的結構和互動性，但不涉及前置資料的解析。

remark-mdx 插件不專注於前置資料處理，但它允許在 Markdown 中嵌入 JSX，這意味著您可以在 Markdown 文件中使用 React 組件。這為前置資料提供了更大的靈活性，但插件本身不處理前置資料。

remark-frontmatter 插件專注於解析 Markdown 文件中的前置資料區塊（frontmatter），這些區塊通常位於文件的開頭，使用 YAML、JSON 或 TOML 格式定義。這個插件可以提取這些資料並將其轉換為結構化的 JavaScript 對象，方便後續使用。

remark-html 插件不處理前置資料，它專注於將 Markdown 內容轉換為 HTML。這個過程不涉及任何前置資料的解析或處理。

remark-parse 插件負責解析 Markdown 內容，但它不提供 GFM 支持。要在解析過程中使用 GFM 特性，需要與 remark-gfm 插件結合使用。

remark-gfm 插件專門設計用於添加對 GitHub Flavored Markdown 的支持，包括表格、任務清單和自定義 HTML。這個插件使您的 Markdown 內容能夠使用 GFM 的所有擴展功能，增加了內容的可視化和互動性。

remark-mdx 插件不專注於 GFM 支持，但它允許在 Markdown 中使用 JSX，這意味著您可以在 GFM 內容中嵌入 React 組件。這為 GFM 內容提供了更多的靈活性，但插件本身不處理 GFM 特性。

remark-frontmatter 插件不提供 GitHub Flavored Markdown（GFM）的支持。它專注於解析前置資料，不涉及任何 GFM 特性。

remark-html 插件本身不提供 GFM 支持，但它可以與 remark-gfm 插件一起使用，以便在將 Markdown 轉換為 HTML 時保留 GFM 的所有特性。

remark-parse 插件負責解析 Markdown 內容並生成抽象語法樹（AST），但它不處理 HTML 轉換。要將 AST 轉換為 HTML，需要使用其他插件，如 remark-html。

remark-gfm 插件不負責 HTML 轉換，但它可以與其他轉換插件（如 remark-html）一起使用，以便在轉換過程中保留 GFM 的所有特性。

remark-mdx 插件不專注於 HTML 轉換，但它允許在 Markdown 中嵌入 JSX，這意味著您可以在轉換過程中生成 HTML 和 React 組件的混合內容。

remark-frontmatter 插件不提供 HTML 轉換功能。它專注於解析前置資料，並不處理 Markdown 到 HTML 的轉換。

remark-html 插件專注於將 Markdown 內容轉換為 HTML。它處理標準的 Markdown 語法，並將其轉換為相應的 HTML 標籤。

remark-parse 插件不提供 MDX 支持。它負責解析 Markdown 內容並生成 AST，但不處理 MDX 中的 JSX。要在解析過程中支持 MDX，需要使用 remark-mdx 插件。

remark-gfm 插件不提供 MDX 支持。它專注於添加 GitHub Flavored Markdown 的特性，與 MDX 的 JSX 嵌入無關。

remark-mdx 插件專門設計用於支持 MDX（Markdown + JSX）。它允許在 Markdown 文件中嵌入 JSX，這意味著您可以在內容中使用 React 組件，從而實現更高的靈活性和可重用性。

remark-frontmatter 插件不提供 MDX 支持。它專注於解析前置資料，與 MDX 的 JSX 嵌入特性無關。

remark-html 插件不提供 MDX 支持。它專注於將 Markdown 轉換為 HTML，並不處理 MDX 中的 JSX。

remark-parse 插件負責解析 Markdown 內容並生成抽象語法樹（AST）。這是它的主要功能，為後續的處理和轉換提供基礎。

remark-gfm 插件不解析 AST。它添加 GFM 特性，但不處理 AST 的生成或操作。

remark-mdx 插件不直接解析 AST。它允許在 Markdown 中嵌入 JSX，但 AST 的生成和解析依賴於其他插件。

remark-frontmatter 插件不直接解析 AST，但它依賴於其他插件（如 remark-parse）生成 AST，然後從中提取前置資料。

remark-html 插件不解析 AST。它將 AST 轉換為 HTML，但不處理 AST 的生成。

AST 解析示例

import { unified } from 'unified';
import remarkParse from 'remark-parse';

const markdown = `# Hello World\n\nThis is a sample Markdown file.`;

unified()
  .use(remarkParse)
  .process(markdown)
  .then((file) => {
    console.log(file.contents);
    console.log(file.data); // 包含 AST
  });

GFM 支持示例

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm';
import remarkHtml from 'remark-html';

const markdown = `# Task List\n\n- [ ] Task 1\n- [x] Task 2\n\n| Header 1 | Header 2 |\n|----------|----------|\n| Row 1   | Row 1    |\n| Row 2   | Row 2    |`;

unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkHtml)
  .process(markdown)
  .then((file) => {
    console.log(String(file));
  });

MDX 支持示例

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkMdx from 'remark-mdx';
import remarkHtml from 'remark-html';

const markdown = `# Hello MDX\n\nimport MyComponent from './MyComponent';\n\n<MyComponent />`;

unified()
  .use(remarkParse)
  .use(remarkMdx)
  .use(remarkHtml)
  .process(markdown)
  .then((file) => {
    console.log(String(file));
  });

前置資料處理示例

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import frontmatter from 'remark-frontmatter';

const markdown = `---\ntitle: My Title\nauthor: John Doe\ndate: 2023-01-01\n---\n
# Hello World

This is a sample Markdown file.`;

unified()
  .use(remarkParse)
  .use(frontmatter)
  .process(markdown)
  .then((file) => {
    console.log(String(file));
  });

HTML 轉換示例

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkHtml from 'remark-html';

const markdown = `# Hello World\n\nThis is a sample Markdown file.`;

unified()
  .use(remarkParse)
  .use(remarkHtml)
  .process(markdown)
  .then((file) => {
    console.log(String(file));
  });