こんにちは、世界！

私のブログへようこそ

これは最初の日本語記事です。多言語機能が設定されました：

中文 (zh) — デフォルト言語
English (en)
日本語 (ja)
Русский (ru)

このブログは Astro 6 で構築され、ダーク/ライトテーマ切り替え（Gruvbox パレット）と Giscus コメントシステムを統合しています。コードブロックはシンタックスハイライト、差分表示、ファイル名表示をサポートします。数式は KaTeX でレンダリングされ、インライン数式とブロック数式の両方に対応しています。

本記事ではすべての Markdown 構文のレンダリングをテストし、同時にフローティング目次（TOC）コンポーネントの動作を検証します。

これは TOC コンポーネントのテキスト切り詰めとツールチップ機能をテストするための非常に長い日本語タイトルの例です

TOC の幅は 192px に固定されており、14px のフォントサイズで約13文字の日本語文字が収まります。この見出しはその長さを大きく超えているため、TOC 内では ... で省略され、ホバー時に完全なタイトルが表示されるはずです。

切り詰め時のインデントの違いを検証するための、同じく非常に長い第三レベルのサブ見出し

第三レベルの見出しは TOC 内で追加の左インデントが付くため、実際の利用可能幅はさらに狭くなり、より早く切り詰めが発生します。

短い見出しは正常

以下は短い見出しであり、TOC 内でツールチップなしで完全に表示されるべきです。

短いサブ見出し

同じく完全に表示されます。

多階層見出しテスト

TOC は h2 と h3 のみを収録しますが、本記事にはより深い階層も含まれており、記事内の見出しレンダリングを検証します。

第三レベル見出し A

TOC に表示され、左インデントが付きます。

第四レベル見出しは TOC に表示されない

TOC には表示されませんが、ページ上では通常通りレンダリングされます。

第五レベル見出しも同様に表示されない

深い階層の見出しは構造テスト用です。

第三レベル見出し B

再び TOC 表示階層に戻ります。

Markdown 構文の概要

このセクションでは、基本的なテキストスタイルから複雑なコードブロックや数式まで、Markdown がサポートするさまざまな構文要素を体系的にテストします。

テキストスタイル

これは太字テキスト、これは斜体テキスト、これは太字斜体テキスト、これは~~打ち消し線~~テキスト、これはインラインコードです。

リンクと画像

Astro 公式サイトはこのブログで使用している静的サイトジェネレーターです。

引用

これは引用テキストです。多言語ブログにおいて、引用のスタイルは一貫しているべきです。

これは入れ子引用です。技術的には可能ですが、実際の執筆では可読性のために控えめに使用すべきです。

また、[!TYPE] 構文を使うと引用を警告ブロックとして表示できます：

NOTE

これはノートです——読者にとって有用な補足情報。

TIP

これはヒントです——より良く、より簡単に行うための提案。

IMPORTANT

これは重要情報です——読者が知っておくべき重要な内容。

WARNING

これは警告です——問題を避けるためにすぐに対応が必要な情報。

CAUTION

これは注意です——潜在的なリスクや悪い結果についての助言。

リストとレイアウト

リストは情報を整理するための中核的なツールです。

番号なしリスト

項目1：冒頭の内容
項目2：別のポイント
- 入れ子項目 A：詳細説明用
  - より深い入れ子もサポート
- 入れ子項目 B：別のサブ項目
項目3：トップレベルに戻る

番号付きリスト

ステップ1：プロジェクト構造の初期化
ステップ2：依存関係とビルド設定の構成
ステップ3：コア機能コードの作成
1. サブステップ 3.1 — データ層の実装
2. サブステップ 3.2 — ビジネスロジックの実装
ステップ4：テストの作成とコード品質の確保
ステップ5：本番環境へのデプロイ

タスクリスト

完了：Astro 6 プロジェクトの設定
完了：Tailwind CSS v4 の統合
未完了：フローティング TOC コンポーネントの追加
未完了：ページパフォーマンスの最適化
未完了：ユーザードキュメントの作成
未完了：CI/CD パイプラインの設定

テーブルとデータ表示

基本テーブル

言語	コード	フォント	説明
中国語	zh	Noto Sans SC	簡体字中国語向け最適化
英語	en	Noto Sans	ラテン文字のデフォルトフォント
日本語	ja	Noto Sans JP	日本語の仮名と漢字
ロシア語	ru	Noto Sans	キリル文字サポート

コード比較表

機能	JavaScript	TypeScript	Python
型システム	動的	静的	動的（オプションの型ヒント）
実行環境	ブラウザ/Node	JS にコンパイル	インタプリタ
パッケージ管理	npm/yarn/pnpm	npm/yarn/pnpm	pip/poetry
学習曲線	低	中	低

コードブロック

コードブロックは Shiki シンタックスハイライトを使用し、デフォルト行番号、デフォルトの横スクロール、wrap による自動折り返し（ハンギングインデント）、コード折りたたみ（collapse）、ファイル名ラベル（file）、行番号無効化（nolines）をサポートします。

基本注釈：行番号 + file

行番号はデフォルトで有効です。file="名前" は左上にファイル名ラベルを表示します。

1def fib(n: int) -> list[int]:
2    a, b = 0, 1
3    for _ in range(n):
4        a, b = b, a + b
5    return afibonacci.py

行番号無効化：nolines

短いコードスニペットに nolines を付けて行番号を非表示にします。

pnpm install
pnpm dev
pnpm build

折りたたみ + 横スクロール：collapse

collapse は長いコードブロックを自動的に折りたたみます。wrap を付けない場合、長い行は1行のまま横スクロールで読めます。

1from datetime import datetime
2
3
4def build_release_report(project: str, commits: list[dict[str, str]], include_review_notes: bool = False, timezone: str = "Asia/Shanghai") -> str:
5    """横スクロール確認用に、長い関数シグネチャを保ったリリースレポートを生成。"""
6    lines = [f"# {project} リリースレポート", f"生成時刻: {datetime.now().isoformat()}", ""]
7    for commit in commits:
8        scope = commit.get("scope", "misc")
9        title = commit.get("title", "無題のコミット")
10        lines.append(f"- [{scope}] {title} — {commit.get('hash', 'unknown')} — reviewer={commit.get('reviewer', 'none')} — deployment_window={commit.get('window', 'standard')}")
11    if include_review_notes:
12        lines.append("## レビュー確認")
13        lines.append("移行スクリプト、検索インデックス、静的アセットキャッシュ、ロールバック手順を確認してください。")
14    return "\n".join(lines)
15
16
17sample = [{"scope": "build", "title": "Pagefind インデックス更新", "hash": "abc123", "reviewer": "Sylvan", "window": "nightly"}]
18print(build_release_report("blog.sylvan.cafe", sample, include_review_notes=True))scroll-and-fold.py

自動折り返し + ハンギングインデント：wrap

コードブロックに wrap を付けると、長すぎる行はコンテナの境界で折り返され、折り返し行はコードの先頭行に合わせてインデントされます。

1def build_query_url(endpoint: str, filters: dict[str, str], include_archived: bool = False, sort: str = "updated_at:desc") -> str:
2    return f"{endpoint}?include_archived={include_archived}&sort={sort}&filters=" + "&".join(f"{key}={value}" for key, value in filters.items())wrap-example.py

CSS

.astro-code {
  @apply rounded-lg border border-border;
  font-family: var(--font-code);
}

.astro-code .line {
  min-height: 1.5rem;
}

Mermaid ダイアグラム

ブログは Mermaid ダイアグラムをサポートするようになりました。コードブロックと同じフェンス構文で、言語タグは mermaid です。ダイアグラムは beautiful-mermaid によってビルド時に SVG にレンダリングされ、CSS 変数でライト/ダークテーマに自動適応します。

フローチャート

シーケンス図

クラス図

状態図

セマンティック配色

classDef で CSS 変数を参照することで、ノードに意味的な強調色を付与し、ライト/ダークテーマに自動適応できます：

数式

インライン数式

質量エネルギー等価式 $E = mc^2$ はおそらく最も有名な物理公式です。ピタゴラスの定理 $a^2 + b^2 = c^2$ も同様によく知られています。

ブロック数式

ガウス積分：

\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

正規分布の確率密度関数：

f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}

オイラーの等式：

e^{i\pi} + 1 = 0

複数行数式

aligned 環境を使用：

\def\arraystretch{1.5} \begin{aligned} \nabla \times \vec{\mathbf{B}} - \frac{1}{c} \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} &= 4\pi\rho \\ \nabla \times \vec{\mathbf{E}} + \frac{1}{c} \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{aligned}

拡張機能

脚注

これは脚注付きの文です。¹ これは別の脚注付きの文です。²

HTML 折りたたみパネル

クリックして展開

これは折りたたまれた内容で、Markdown 構文をサポートしています。

リスト項目
別の項目
さらにもう一項目

折りたたみパネル内にはコードブロックやテーブルを含む完全な Markdown コンテンツを含めることができます。

区切り線

区切り線は3つ以上のハイフン、アスタリスク、またはアンダースコアを使用します。

まとめと展望

本記事では、ブログがサポートするすべての Markdown 構文を体系的にテストしました。多階層の見出し構造を通じて、フローティング TOC の以下の機能を検証しました：

見出し階層の認識（h2 と h3）
スクロールハイライト追跡（IntersectionObserver）
クリックによるスムーズスクロール（オフセット補正付き）
多言語コンテンツとの互換性

今後の改善計画には、全文検索、タグクラウド、RSS フィードの最適化が含まれます。

これは脚注の内容です。脚注は記事の末尾に集中して表示されます。 ↩
これは長い脚注で、複数行の脚注レンダリングをテストします。多言語ブログでは、脚注のアンカーリンクがルートプレフィックスを正しく処理する必要があります。 ↩