このページは、 tsukurun-Lab のBlogで表示できるNotionブロックの一覧です。
ベースは、本家 astro-notion-blog のサンプルページ。そこから、このサイトで表示できるようにしたブロックを少しずつ足しています。
新しいブロックに対応するたびに、まずこのページで表示を確認しているので、実は私の作業用テストページでもあります。
「Notionで書いたものが、どこまでそのままBlogに出せるのか」。その記録として、のんびり眺めてもらえたら嬉しいです。内容はこれからも更新していきます。
目次ブロック (Table of contents)
目次 (Table of contents)
長い記事で迷子にならないための目次です。Blogでは、本文のこの目次に加えて、右側に追従する目次も表示されます。
見出し1 (Heading 1)
見出し2 (Heading 2)
見出し3 (Heading 3)
見出し4 (Heading 4)
トグル見出し1 (Toggle heading 1)
contents
テキスト (Text)
Paragraph
bold
italic
Underline
Strike
code
🌱 
止まっていたブログを、Codexと動かし直した話（Astro × Notion）
color
color background
colored block
colored text with colored block
箇条書きリスト (Bulleted list)
- Bulleted List
- Uni
- Tako
- AAA
- BBB
番号付きリスト (Numbered list)
- Numbered List
- Kani
- Ika
- 111
- 222
To-doリスト (To-do list)
カラム (Columns)
Column 1
Column 2
区切り線 (Divider)
コールアウト (Callout)
Line break
コード (Code)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);コード（Mermaid図）(Code with Mermaid diagram)
Mermaidは、ページ遷移のあとに図が消えてしまう問題に少し悩まされました。いまは遷移後も描き直されます。
flowchart LR; A[Hard Edge] --->|LinkText|B(Round Edge)
引用 (Quote)
Quote Block
ブロック型数式 (Block equation)
テーブル (Table)
セル結合にも対応しました。空白のセルは結合として扱われるので、結合したくないセルには - などを入れておく運用にしています。
| Simple | Table | Ika | Tako | Shake |
|---|---|---|---|---|
| 1 | 2 | 4 | 5 | |
| d | ||||
| B | C | D | - | |
ファイル (File)
トグルリスト (Toggle list)
Toggle
This is toggled details.
- 1
- 2
- 3
ページリンク (Link to page)
🌱 止まっていたブログを、Codexと動かし直した話（Astro × Notion）
同期ブロック (Synced block)
- 1
- 2
- 3
- 1
- 2
- 3
タブ (Tabs)
Notion APIだと少し変わった構造をしているブロックです。CSSだけで切り替えられるようにしています。
画像 (Image)
グラフ (Graph)
ここが今回いちばん手探りだったところ。
Notionのチャートビューの設定を読み取って、SVGでできるだけ近い見た目に寄せています。
リンクプレビューとウェブブックマーク (Link Preview & Bookmark)
ここから下は、外部サービスの埋め込みです。
Amazon link
GitHib link
X（旧Twitter）埋め込み (X / Twitter Embed)
Instagram埋め込み (Instagram Embed)
TikTok埋め込み (TikTok Embed)
Pinterest埋め込み (Pinterest Embed)
YouTube動画 (YouTube)
CodePen埋め込み (CodePen Embed)
回路シミュレーターアプレット埋め込み (Circuit Simulator Applet Embed)
このページは、新しいブロックに対応するたびに育てていく予定です。
「これもちゃんと表示できるんだ」と思ってもらえるものが、ひとつでもあれば嬉しいです・・！