全要素サンプル記事

2026-01-25T00:00:00.000Z

この記事は、ブログで使用可能な全ての要素を含むサンプル記事です。

見出しの例

H3見出し

このテーマではH4以降の見出しは定義されていませんが、必要に応じて src/styles/post.css で定義できます。

テキスト装飾

通常のテキストに加えて、太字、イタリック、~~取り消し線~~、そしてインラインコードを使用できます。

複数の装飾を組み合わせることも可能です：太字かつイタリック、コード内の**太字**は表示されません。

引用

優れたコードは、それが何をするのかを明確に示すべきです。

— Martin Fowler[^1]

[^1]: この引用はMartin Fowlerの著書「リファクタリング」からのものです。

テーブル

機能	説明	対応状況
Markdown	基本的なMarkdown記法	✅ 対応
MDX	Reactコンポーネントの使用	✅ 対応
コードハイライト	シンタックスハイライト	✅ 対応
埋め込みコンテンツ	YouTube、Spotifyなど	✅ 対応

テーブル内でもイタリック、太字、コードを使用できます。

HTML要素

下付き文字と上付き文字

化学式: H₂O（水）

数学式: Xⁿ + Yⁿ = Zⁿ（フェルマーの最終定理）

略語

HTML と CSS はウェブ開発の基礎です。

キーボード入力

ショートカットキー: CTRL + C でコピー、CTRL + V で貼り付け。

ハイライト

重要な部分をハイライト表示できます。

コードブロック

TypeScript（タイトル付き + 行ハイライト）

interface User {
  id: number
  name: string
  email?: string
}

const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com'
}

function greet(user: User): string {
  return `Hello, ${user.name}!`
}

JavaScript（タイトル付き）

export function debounce(func, wait) {
  let timeout
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout)
      func(...args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}

Python（複数行ハイライト）

def fibonacci(n: int) -> list[int]:
    """フィボナッチ数列を生成"""
    if n <= 0:
        return []
    elif n == 1:
        return [0]
    elif n == 2:
        return [0, 1]

    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    return fib

print(fibonacci(10))

Rust

fn main() {
    let numbers = vec![1, 2, 3, 4, 5];
    let doubled: Vec = numbers
        .iter()
        .map(|x| x * 2)
        .collect();

    println!("{:?}", doubled);
}

CSS（行ハイライト）

.button {
  padding: 12px 24px;
  background-color: var(--color-primary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.button:hover {
  background-color: var(--color-primary-hover);
}