2026年1月19日の進捗記録

これが↓

 

こうなった、というかうまくデプロイされてたらこうなる予定↓

 

段落区切りに空のブロック入れてた部分をちゃんと改行するようにして、

改行自体のmarginを変えて、コードブロックがいい感じになるようにした。

コードブロックがいい感じに色ついてるだけでなんかそれっぽいね。

Hello, worldのページもしれっとコードブロックきれいに表示されるんじゃないかな。

 

今後も気が向いたらきれいに改修しながら、変更内容はこっちのブログで更新ということでやってみる。

 

フロントエンドなんもわからんからアホな質問をAIにしているせいで、AIがアホになっている雰囲気を感じながら。フロントエンドちょっとわかるマンになるんや。

 

コードブロックきれいに見せるのかなりぐちゃぐちゃやって、ちゃんと差分を解説してもらったけど、

今面接官にここのコードブロック何やったの?って聞かれたら

うーんわからないけど、rehypeってやつ入れてごにょごにょやったらこうなりました。としか言えない…

 

自分の理解を言葉にすると?

 

notionからブロック(Notionのページがたぶんブロック単位に切り刻まれてる。)を取ってくる時にコードブロックを見つけた場合、```typescriptというスタートでキャプションがhoge.tsだったら```typescript::hoge.tsという感じになるように成形するcustom transformerを設定。

 

最初のpre>codeとなっている部分(コードブロックのRoot)を探して、成形した言語名とキャプションを抽出する。
見つけたpreをdivにして、言語とキャプションを持つheaderと新しいpre>codeを作ったdivに入れるみたいな変換をする関数を作成。

作成した関数をrehypeのpluginsとして注入?したらこんな感じになったらしい。

 

うん、何言ってるか俺はわかるけど、伝わる気がしない。

そして、自分の理解があってるのかもわからん。まあ、こういうことの積立ジャロ

 

2026年1月19日 kouki