今のブログはnextjs-notion-starter-kitをベースに作成させていただいています。

このテンプレートを使う前にもnotionを使ったブログって自作でブログを作っていましたが、notionの各ブロックをhtmlに変換して表示するのが難しい箇所がいくつかあり、全部自作は諦め、もともとあるもので良さそうなものを調べた結果react-notion-xがレベチで再現率が高かったのでこちらを利用することにしました。それに伴いreact-notion-xの制作者が用意してくれているsterter-kitのnextjs-notion-starter-kitも使わせてもらいました。

表示の確認ページも用意してくれていました。

■notionでの表示

https://transitive-bs.notion.site/Notion-Kit-Test-Suite-067dd719a912471ea9a3ac10710e7fdf

■react-notion-x での表示

https://transitive-bs.notion.site/Notion-Kit-Test-Suite-067dd719a912471ea9a3ac10710e7fdf

こちらでも一応足りない部分など検証しようと思います。

以下各種テスト用のnotionブロックタイプになります。

見出し

見出し1

見出し2

見出し3

その他ベーシック

テーブル

テーブル1	テーブル2
テーブル3	テーブル4
テーブル5	テーブル6

トグル

[!note]+ トグルタイトルトグルの中身

引用

引用

コールアウト

[!tip] 💡 コールアウト

コードスニペット

console.log("Hello world")

リンク

urlをそのまま貼り付ける

https://www.yahoo.co.jp/

ブックマークを作成する

https://www.yahoo.co.jp/

メンションとして貼り付け

Yahoo! JAPAN

メディア

画像

動画

ツイート

google map

https://maps.app.goo.gl/25jbGXuc337Y5tBa9

https://www.google.co.jp/maps/place/%E7%9A%87%E5%B1%85/@35.7159122,139.7200229,13.85z/data=!3m1!5s0x60188d5d0a480b65:0xd8cb95e686946cd7!4m14!1m7!3m6!1s0x60188d5d9bb197e7:0x37cf8b786a38ecd4!2z5p2x5q2m55m-6LKo5bqXIOaxoOiii-W6lw!8m2!3d35.7299418!4d139.7103113!16s%2Fg%2F1260xld1q!3m5!1s0x60188c0d02d8064d:0xd11a5f0b379e6db7!8m2!3d35.685175!4d139.7527995!16zL20vMDFuZjI5?entry=ttu&g_ep=EgoyMDI0MDgyOC4wIKXMDSoASAFQAw%3D%3D

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12955.394354733471!2d139.70001071691507!3d35.72994210077617!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d5d9bb197e7%3A0x37cf8b786a38ecd4!2z5p2x5q2m55m-6LKo5bqXIOaxoOiii-W6lw!5e0!3m2!1sja!2sjp!4v1725096946847!5m2!1sja!2sjp

アドバンスド

コード: Marmaid

graph TD
  Mermaid --> Diagram

pie title NETFLIX
         "Time spent looking for movie" : 90
         "Time spent watching it" : 10

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

式ブロック

例: x^2 + 2x + 1 = 0

$$ x^2 + 2x + 1 = 0 $$

トグル見出し2

トグル見出し2タイトル

トグル見出し2の中身

２列

２列ブロック左

２列ブロック右

インライン

顔文字

😀

🙄

インライン式

$E = mc^2$

ページ

[[テストページ]]

まとめ

ほとんどnotionの表示と同じように表示されていました。すごい！

一部

コード: Marmaid
リンク(メンションとして貼り付け)

だけうまく表示されていませんでした。

notionの各種ブロックの表示テスト

見出し