Back to Blog

Markdown Test

このページは GFM (GitHub Flavored Markdown) の各種記法を片っ端から試すレンダリングテスト用の記事です。

見出し 1(基本使わない)

見出し 2

見出し 3

見出し 4

見出し 5
見出し 6

段落と改行 (Paragraphs / Line breaks)

これは段落です。文章が続きます。文章が続きます。文章が続きます。

行末にバックスラッシュを置くと
強制改行になります。

行末にスペース 2 つでも 強制改行になります。

強調 (Emphasis)

  • イタリック / イタリック
  • 太字 / 太字
  • 太字イタリック
  • 打ち消し線 (GFM strikethrough)
  • インラインコード
  • 太字の中に コード を含む

画像 (Images)

代替テキスト: プレースホルダー画像

リンク付き画像

引用 (Blockquotes)

これは引用です。 複数行にまたがることもできます。

外側の引用

ネストされた引用

さらにネスト

引用の中に 太字コードリンク も書けます。

  • 引用の中のリスト
  • 二つ目の項目

リスト (Lists)

順序なしリスト

  • 項目 1
  • 項目 2
    • ネストした項目 2-1
    • ネストした項目 2-2
      • さらにネスト 2-2-1
  • 項目 3

順序付きリスト

  1. 最初の項目
  2. 二番目の項目
    1. ネストした項目
    2. ネストした項目
  3. 三番目の項目

混在リスト

  1. 順序付きの中に
    • 順序なしをネスト
    • もう一つ
  2. 戻ってくる

タスクリスト (GFM task list)

  • 完了したタスク
  • 未完了のタスク
  • ネストもできる
    • サブタスク(完了)
    • サブタスク(未完了)

複数段落を含むリスト

  1. 最初の項目。

    同じ項目内の二つ目の段落。インデントを揃えます。

  2. 二番目の項目。

    リスト内のコードブロック

テーブル (GFM tables)

左寄せ中央寄せ右寄せ
セルセル100
長めのテキストが入ったセルcode2,500
太字イタリック打ち消し
記法対応
パイプのエスケープ | こんな感じOK
空セル

コード (Code)

インラインコード

const x = 42; のように文中に埋め込めます。バッククォートを含む場合は `backtick` と書きます。

コードブロック(言語指定あり)

// JavaScript
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet("world");
# Python
def fib(n: int) -> int:
    return n if n < 2 else fib(n - 1) + fib(n - 2)

print([fib(i) for i in range(10)])
// Rust
fn main() {
    let nums: Vec<i32> = (1..=5).collect();
    let sum: i32 = nums.iter().sum();
    println!("sum = {sum}");
}
// C++
#define PI 3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647093844609550582231725359408128481117450284102701938521105559644622948954
/* CSS */
.page {
  padding: 2.5rem 0 clamp(3rem, 8vw, 6rem);
}
{
  "name": "test",
  "version": "1.0.0",
  "private": true
}
echo "hello" | tr 'a-z' 'A-Z'
#! /bin/bash

for f in *.md; do
  echo "processing $f"
done
// ----- main.go -----
package main

import "fmt"

func main() {
	fmt.Println(Add(1, 2))
}

// ----- add.go -----
package integer

// Add adds two integers and returns the result.
func Add(a, b int) int {
	return a + b
}

// ----- add_test.go -----
package integer_test

import "testing"

func TestAdd(t *testing.T) {
	type testCase struct {
		name string
		a, b int
		want int
	}

	testCases := []testCase{
		{name: "negative + negative", a: -1, b: -2, want: -3},
		{name: "negative + zero", a: 0, b: -1, want: -1},
		{name: "negative + positive = negative", a: -1, b: 2, want: 1},
		{name: "zero + zero", a: 0, b: 0, want: 0},
		{name: "zero + positive = positive", a: 0, b: 1, want: 1},
		{name: "positive + negative = negative", a: 1, b: -2, want: -1},
		{name: "positive + positive = positive", a: 2, b: 1, want: 3},
		{name: "positive + zero = positive", a: 1, b: 0, want: 1},
		{name: "positive + positive", a: 1, b: 2, want: 3},
	}

	for _, tc := range testCases {
		t.Run(tc.name, func(t *testing.T) {
			t.Parallel()
			if got := Add(tc.a, tc.b); got != tc.want {
				t.Errorf("Add(%d, %d) = %d; want %d", tc.a, tc.b, got, tc.want)
			}
		})
	}
}
# YAML
name: chasing-the-kernel
on:
  push:
    branches: [main]
# TOML
[package]
name = "chasing-the-kernel"
version = "0.1.0"
- 削除された行
+ 追加された行
  変更なしの行
プレーンテキスト。
存在しない言語 hogehoge を指定。
指定しているが表示されない。
言語指定なしのプレーンテキスト。
存在しない言語を指定しているときと同じように言語ラベルは表示されない。

コードブロック内のコードフェンス

```js
console.log("フェンスの中にフェンス");
```

水平線 (Horizontal rules)




脚注 (Footnotes)

これは脚注付きの文章です1。複数の脚注も使えます2

エスケープ (Escaping)

*アスタリスク* や _アンダースコア_ 、# シャープ、[角括弧] をエスケープすると記号のまま表示されます。

HTML の直接記述

クリックして展開 (details / summary)

折りたたまれた中身です。Markdown も書けます。

  • リスト項目
  • コード

Cmd + Shift + P のようなキーボード表記。

上付き: X2 / 下付き: H2O

LaTeX\LaTeX の数式

インライン数式 x2+y2=z2x^2 + y^2 = z^2 もこのように書けます。

ブロック数式も独立した行に表示できます。

ex2dx=π\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi} f(x)=12πσ2e(xμ)22σ2f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}

行列計算のように長い数式も表示できます。

(a11a12a13a21a22a23a31a32a33)(b11b12b13b21b22b23b31b32b33)=(a11b11+a12b21+a13b31a11b12+a12b22+a13b32a11b13+a12b23+a13b33a21b11+a22b21+a23b31a21b12+a22b22+a23b32a21b13+a22b23+a23b33a31b11+a32b21+a33b31a31b12+a32b22+a33b32a31b13+a32b23+a33b33)\begin{pmatrix} a_{11} & a_{12} & a_{13} \\ a_{21} & a_{22} & a_{23} \\ a_{31} & a_{32} & a_{33} \end{pmatrix} \begin{pmatrix} b_{11} & b_{12} & b_{13} \\ b_{21} & b_{22} & b_{23} \\ b_{31} & b_{32} & b_{33} \end{pmatrix} = \begin{pmatrix} a_{11}b_{11}+a_{12}b_{21}+a_{13}b_{31} & a_{11}b_{12}+a_{12}b_{22}+a_{13}b_{32} & a_{11}b_{13}+a_{12}b_{23}+a_{13}b_{33} \\ a_{21}b_{11}+a_{22}b_{21}+a_{23}b_{31} & a_{21}b_{12}+a_{22}b_{22}+a_{23}b_{32} & a_{21}b_{13}+a_{22}b_{23}+a_{23}b_{33} \\ a_{31}b_{11}+a_{32}b_{21}+a_{33}b_{31} & a_{31}b_{12}+a_{32}b_{22}+a_{33}b_{32} & a_{31}b_{13}+a_{32}b_{23}+a_{33}b_{33} \end{pmatrix} (110011001)1=(111011001)\begin{pmatrix} 1 & 1 & 0 \\ 0 & 1 & 1 \\ 0 & 0 & 1 \end{pmatrix}^{-1} = \begin{pmatrix} 1 & -1 & 1 \\ 0 & 1 & -1 \\ 0 & 0 & 1 \end{pmatrix}

文字のハイライト

ハイライトされたテキスト

GitHub アラート (GFM alerts)

[!NOTE] 補足情報を伝えるノートです。

[!TIP] 便利なヒントです。

[!IMPORTANT] 重要な情報です。

[!WARNING] 注意が必要な警告です。

[!CAUTION] 危険を伝える注意書きです。

Mermaid ダイアグラム

sequenceDiagram
    participant Client
    participant Server
    participant DB

    Client->>+Server: Request:<br/>POST /products/:product_id
    Server->>+DB: Read:<br/>SELECT * FROM products<br/>WHERE id=:product_id FOR UPDATE
    DB-->>-Server: stock=10
    Server->>+DB: Write:<br/>UPDATE products<br/>SET stock=9 WHERE id=:product_id
    DB-->>-Server: OK
    Server-->>-Client: Response:<br/>{ stock: 9 }
flowchart LR
    Draft[下書き] --> Review[レビュー]
    Review --> Published[公開]
stateDiagram-v2
    [*] --> Draft: Create
    Draft --> Review: Submit
    Review --> Draft: Reject
    Review --> Published: Approve
    Published --> [*]

先の FOR UPDATE 例を題材にした、在庫管理の簡単なテーブル設計です。

erDiagram
    products ||--o{ stock_movements : tracks

    products {
        bigint id PK
        varchar name
        int stock
        timestamp created_at
        timestamp updated_at
    }

    stock_movements {
        bigint id PK
        bigint product_id FK
        int delta
        varchar reason
        timestamp created_at
    }

絵文字 (Emoji shortcodes)

GFM のショートコード記法: :smile: :rocket: :+1: :tada:

Unicode 絵文字の直書き: 😄 🚀 👍 🎉

その他

  • 温度は 25°C です(HTML エンティティ)
  • 著作権記号: © 2026
  • ダッシュ: — と ---(smartypants が有効なら en/em ダッシュになる)
  • “引用符” と ‘シングルクォート’

Footnotes

  1. これが脚注の内容です。

  2. 名前付きの脚注。装飾リンクも書けます。