752文字
4分
編集

Markdown レンダリングデモ

#Meta

このページは astro.config の markdown パイプライン で有効になっている機能を一通り載せています（remark-math・remark-infographic-ssr・Shiki・rehype-katex・注記ディレクティブ・rehype-image-zoom・GitHub カード用スクリプト等）。用途は開発・検証向けです。

#インラインと強調

太字、斜体、_アンダースコア斜体_、インラインコード、取り消し。リンク と自動リンク（例: https://example.com/）。

#リスト

順序なし:

  • 項目 A
  • 項目 B
    • ネスト

順序あり:

  1. 最初
  2. 次に

#引用ブロック

単純な > 引用です。

#GitHub 形式の注記（> [!…]）

remark-github-admonitions-to-directives が containerDirective に変換し、rehypeComponents の注記スタイルで表示されます。

NOTE

NOTE — 補足・メモ向け。

TIP

TIP — ヒント向け。

IMPORTANT

IMPORTANT — 重要。マッピングで important ディレクティブに寄せています。

WARNING

WARNING — 警告。

CAUTION

CAUTION — 注意。マッピングで caution ディレクティブに寄せています。

#remark-directive 形式の注記（:::…）

:::note / :::tip / :::important / :::caution / :::warning も利用できます（rehypeComponents）。

NOTE

:::note の本文です。

TIP

:::tip の本文です。

IMPORTANT

:::important の本文です。

CAUTION

:::caution の本文です。

WARNING

:::warning の本文です。

カスタムタイトル

:::tip[ラベル] で先頭をラベルに変える例です。

#テーブル

左寄せ右寄せ
A42
B100

#コード（Shiki・言語ラベル・コピー・diff）

rehypeCodeBlockWrapper と Shiki のトランスフォーマ（transformerDiff・transformerCopyButton）の動作確認。コードブロックのツールバーからコピーできます。

ts
function greet(name: string): string {
  return `Hello, ${name}`;
}
diff
-const old = 1;
+const next = 2;
bash
echo "hello"

#数式（remark-math + rehype-katex）

インライン E=mc2E = mc^2 とディスプレイ:

∫01x2 dx=13\int_0^1 x^2 \, dx = \frac{1}{3}

#ローカル画像（rehype-image-zoom）

本文内の画像はクリックで拡大（Popover）できます。contents/posts/ 直下の assets/ を参照する例です。

#AntV Infographic（ ```infographic ・SSR）

remark-infographic-ssr が lang が infographic のフェンスを @antv/infographic/ssr の SVG に置き換えます（normalizeInfographicSvg で埋め込み用に整形）。

StartStep 10102Step 2In ProgressCompleteStep 303

#GitHub リポジトリカード（::github リーフディレクティブ）

::github{repo="owner/repo"} — クライアントスクリプトが GitHub API でメタデータを取得してカードを埋めます。

withastro
/
astro
Waiting for api.github.com...
00K
0K
0K
Waiting...

#YouTube 埋め込み（remark-youtube）

同じ段落に URL のみ のときに iframe になります。youtube.com と youtu.be の両方。

リスト項目内（参考文献の列挙など）は埋め込みません（リンクのまま）。

#横線

#見出し・目次・スクロール（remark-sectionize / rehype-slug / rehype-autolink-headings / rehype-scroll-timeline）

この節のような ## がセクション化され、スラッグ・アンカーリンク（見出し左の #）・目次連動のスクロール用 view-timeline が付きます（対応ブラウザでは目次のハイライトに利用）。

#このページに載せていない（または別経路）のもの

  • OG 画像（image フロントマター）や RSS は記事メタとして別処理です。
  • リモート URL の ![alt](https://...) はビルド時の画像最適化パイプラインと相性が悪い場合があるため、本文デモではローカル画像のみにしています。
  • アイコン（astro-icon） はコンポーネントから利用する想定で、本文 Markdown からは直接は使っていません。
編集