GFM 全機能レンダリング確認

2026-06-10

この記事は GitHub Flavored Markdown (GFM) の機能をひと通り並べた確認用サンプルです。remark-gfm が扱う範囲（表・打ち消し線・タスクリスト・自動リンク・脚注）と、CommonMark の各機能、そして GitHub 独自拡張（alert / 絵文字 / 数式 / mermaid）に分けて記載しています。

1. 見出し（ATX）

H1 見出し

H2 見出し

H3 見出し

H4 見出し

H5 見出し
H6 見出し

2. 見出し（Setext）

Setext レベル 1

Setext レベル 2

3. 段落・改行

これは段落です。連続した行はひとつの段落にまとめられます（ソフトブレーク）。

行末にバックスラッシュを置くと強制改行になります。
この行は改行されているはずです。

行末に半角スペース 2 つでも改行になります。
この行も改行されているはずです。

4. 強調・打ち消し

  • イタリック（アスタリスク）と イタリック（アンダースコア）
  • 太字（アスタリスク）と 太字（アンダースコア）
  • 太字イタリック
  • 打ち消し線（GFM 拡張）
  • インラインコード

5. 引用（ネスト）

これは引用です。複数行にまたがります。

ネストした引用。

さらに深いネスト。

6. リスト

6.1 箇条書き（マーカー違い）

  • ハイフン
  • アスタリスク
  • プラス

6.2 番号付き

  1. 一番目
  2. 二番目
  3. 三番目
    1. ネストした番号付き
    2. その 2

6.3 ネスト混在

  • 親
    • 子
      • 孫
    • 子その 2
      1. 番号付きの孫
      2. その 2

6.4 タスクリスト（GFM 拡張）

  • 完了したタスク
  • 未完了のタスク
  • 取り消されたタスク
    • ネストした完了タスク

7. コード

インラインの const x = 1; と、言語付きフェンスコードブロック:

type Theme = "light" | "dark";function toggle(current: Theme): Theme {  return current === "dark" ? "light" : "dark";}
pnpm installpnpm build
{
  "name": "masterbelt.github.io",
  "private": true
}

言語指定なしのフェンス:

言語指定のないコードブロック。
そのまま等幅で表示されるはず。

インデント（半角スペース 4 つ）によるコードブロック:

indented code block
second line

8. 表（GFM 拡張・桁揃え）

左寄せ中央寄せ右寄せ
apple赤100
banana黄42
code セル強調 セル取消 セル

9. リンク

10. 画像

プレースホルダ画像

11. 水平線

直下に 3 種類の水平線を置きます。

12. インライン HTML / エンティティ

  • キー操作: Ctrl + C
  • 下付き: H2O / 上付き: x2
  • ハイライト: マークされたテキスト
  • 略語: HTML
  • エンティティ: © 2026 masterbelt — 矢印 →
  • エスケープ: *これはイタリックにならない* / `バッククォート`

中身のコンテンツ。Markdown もここで効くかを確認します。

  • リスト項目 1
  • リスト項目 2

13. 脚注（GFM 拡張）

本文中の脚注参照1 と、もう一つの脚注2。

GitHub 独自拡張（remark-gfm の範囲外）

ここから下は GitHub では描画されるが remark-gfm 単体では未対応 の機能です。現状のパイプラインでは「素の Markdown / プレーンテキストのまま」になる想定で、何が足りないかの確認用です。

14. Alert / Admonitions

NOTE

TIP

IMPORTANT

WARNING

CAUTION

15. 絵文字ショートコード

🎉 🚀 👍 ✨

（remark-emoji 未導入なら、上の :tada: 等はそのまま文字列で表示されます）

16. 数式

インライン数式: E=mc2E = mc^2

ブロック数式:

∫0∞e−x2 dx=π2\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}

（remark-math + KaTeX/MathJax 未導入なら、$...$ はそのまま表示されます）

17. Mermaid 図

Yes

No

開始

ダークモード?

.dark を付与

.dark を除去

（mermaid レンダラ未導入なら、上はただのコードブロックとして表示されます）

18. コードハイライト（tree-sitter）

masterbelt（自作言語・自作 grammar）:

/// A doc comment.pub type Color = { channel: nint } impl {  pub fn make(value: nint): Color {    return Color{ channel: value } // a line comment  }}pub enum Tier {  Bronze, Silver}

TypeScript（日本語コメント/文字列でズレが出ないかも確認）:

// 日本語コメント: 設定を読み込むconst greeting: string = "こんにちは, 世界";function add(a: number, b: number): number {  return a + b; // sum}

Go:

package mainimport "fmt"func main() {	msg := "hi"	fmt.Println(msg)}

C#:

class Greeter {    public string Hello(string name) => $"Hi {name}";}

TOML:

[server]host = "localhost"port = 8080

拡張機能（行番号 / {2} 行ハイライト / タイトル / [!code ...] マーカー）:

demo.ts
const a = 1;const b = 2;function focused() {}const removed = 0;const added = 1;throw new Error("boom");console.warn("careful");const hl = true;

コードグループ（タブ）:

config.ts
export const port = 8080;

Footnotes

  1. これは脚注の本文です。 ↩

  2. 脚注は複数行も可能。

    インデントすると同じ脚注に続けられます。 ↩