NotroTail がサポートする Notion ブロックタイプの一覧です。各ブロックは Astro コンポーネントにマッピングされ、TailwindCSS でスタイリングされます。
このページ自体が Notion で書かれた動的ページです。NotroTail の loader() がビルド時に取得し、NotionMarkdownRenderer でレンダリングしています。
テキスト系ブロック
| ブロックタイプ | 対応 | コンポーネント | 備考 |
| 段落 (Paragraph) | ✅ | <p> | 基本テキスト |
| 見出し 1 | ✅ | H1.astro | |
| 見出し 2 | ✅ | H2.astro | |
| 見出し 3 | ✅ | H3.astro | |
| 見出し 4 | ✅ | H4.astro | 拡張対応 |
| 箇条書き | ✅ | <ul> / <li> | ネスト対応 |
| 番号付きリスト | ✅ | <ol> / <li> | ネスト対応 |
| 引用 (Quote) | ✅ | Quote.astro | 左ボーダー付き |
| 区切り線 | ✅ | <hr> | |
| コードブロック | ✅ | <pre><code> | |
リッチテキストアノテーション
| アノテーション | 対応 | 実装 |
| 太字 (Bold) | ✅ | <strong> |
| 斜体 (Italic) | ✅ | <em> |
取り消し線 | ✅ | <del> |
インラインコード | ✅ | <code> |
| 下線 (Underline) | ✅ | StyledSpan.astro |
| カラー | ✅ | StyledSpan.astro • .nt-color-* |
| リンク | ✅ | <a> |
特殊ブロック
| ブロックタイプ | 対応 | コンポーネント | 備考 |
| コールアウト | ✅ | Callout.astro | 絵文字・カラー対応 |
| トグル | ✅ | Toggle.astro | <details> / <summary> |
| 目次 | ✅ | TableOfContents.astro | |
| 数式 (KaTeX) | ✅ | KaTeX | remark-math • rehype-katex |
| カラムレイアウト | ✅ | Columns.astro | CSS Grid |
| 同期ブロック | ✅ | SyncedBlock.astro | ラッパー透過 |
| 空ブロック | ✅ | EmptyBlock.astro | |
テーブル
| ブロックタイプ | 対応 | コンポーネント |
| テーブル | ✅ | TableBlock.astro |
| テーブル行 | ✅ | TableRow.astro |
| テーブルセル | ✅ | TableCell.astro |
メディア・ファイル
| ブロックタイプ | 対応 | コンポーネント | 備考 |
| 画像 (Image) | ✅ | ImageBlock.astro | S3 URL 最適化対応 |
| 動画 (Video) | ✅ | Video.astro | YouTube 埋め込み等 |
| 音声 (Audio) | ✅ | Audio.astro | |
| PDF | ✅ | PdfBlock.astro | iframe 埋め込み |
| ファイル | ✅ | FileBlock.astro | ダウンロードリンク |
ページ参照・メンション
| ブロックタイプ | 対応 | コンポーネント | 備考 |
| ページリンク | ✅ | PageRef.astro | linkToPages で解決 |
| データベース参照 | ✅ | DatabaseRef.astro | |
| メンション | ✅ | Mention.astro | |
| 日付メンション | ✅ | MentionDate.astro | |
未対応ブロック
| ブロックタイプ | 状況 | 理由 |
| データベースビュー埋め込み | ❌ 未対応 | API で Markdown として取得不可 |
| ブックマーク | ❌ 未対応 | リンクのみ提供 |
| コードシンタックスハイライト | 🔧 部分対応 | <pre> として出力、ハイライトなし |
Notion の Markdown エクスポートには構造的な問題があります。remark-nfm パッケージが自動修正します。
| Fix | 問題 |
| Fix 1 | --- の前に空行がなく setext H2 として誤認識 |
| Fix 2 | コールアウトディレクティブ構文の正規化 |
| Fix 3 | ブロックレベルカラーアノテーションを raw HTML に変換 |
| Fix 4 | <table_of_contents/> を <div> でラップ |
| Fix 5 | インライン数式のバッククォート記法を正規化 |
| Fix 6 | <synced_block> ラッパーを除去 |
| Fix 7 | <empty-block/> を空行で囲む |
| Fix 8 | 閉じタグの後に空行を追加 |
| Fix 9 | <td> 内の Markdown リンクを <a> に変換 |
カラーサポート
| Notion カラー | CSS クラス | 対応 |
| gray / gray_background | .nt-color-gray | ✅ |
| brown / brown_background | .nt-color-brown | ✅ |
| orange / orange_background | .nt-color-orange | ✅ |
| yellow / yellow_background | .nt-color-yellow | ✅ |
| green / green_background | .nt-color-green | ✅ |
| blue / blue_background | .nt-color-blue | ✅ |
| purple / purple_background | .nt-color-purple | ✅ |
| pink / pink_background | .nt-color-pink | ✅ |
| red / red_background | .nt-color-red | ✅ |