動機
基本的にNotionにメモをとっているが、このブログにまとめたものを見返すことがある
そのときに見返すと要点がわかりにくいな...と思ったから
やりたいこと
目次を見るだけで、その記事がどのような構造なのか理解できて、すぐに読みたい場所へ飛べるようにしたい
→ ツリー構造で表現したらわかりやすいのでは？
理想はこんな感じ
怖いからバージョンをあげよう
└─ ReactとNext.jsのversionを確認する
└─ Reactのversionを上げる
└─ Next.jsのversionを上げる
実行結果
余談
└─ 結果
やったこと
目次用に見出しタグ(h1,h2,h3)のついたテキストを抽出するときに、見出しの種類によってスタイルを変更する
例）
h2の場合
「ReactとNext.jsのversionを確認する」というテキストに「└─ 」を追加する
h3の場合
「Reactのversionを上げる」というテキストに「└─ 」を追加、cssで右にずらす
結果
見やすくはなった
が、h1が存在しない場合や、h2,h3から文章が始まる場合、見た目が崩れてしまう
一応解決策として、h1から始まらない場合は、└─ をつけない方法などもあるが、
そもそも記事が長いものが今は少ないので、元のままでもいい気がしてきた...
一旦はこのままで、いい方法思いついたら修正する予定
