概要

• コードブロックにハイライトを追加
• aタグ系にスタイル追加

詳細

コードブロックにハイライト追加

• next.js+microcmsでシンタックスハイライトの導入 - Qiitaを参考に、highlight.jsで実装
• びふぉー
  • 
• あふたー
  • 
• 色はデモ一覧と相談しながら『github dark dimmed』をチョイス。dimmedじゃないやつは、白背景には目に痛すぎるかな…？と思ったので。
• highlight.jsを利用しているのはコードブロックのみ。インラインのコードはhighlight.jsの出力見ながらCSSで設定。
• 元々prism.jsを利用するつもりだったが、dangerouslySetInnerHTML did not matchというエラーを消すことができなかったため断念。
  • useEffect内のprism.jsの発火オフでエラーが解消されるため、prism.jsによる変換が原因である可能性が高い。しかし、原因を究明してもuseEffectの後にHTMLを書き換えるくらいしか対処が思いつかず、他のライブラリがあるならそこまで無理して利用する必要はないと判断して、他ライブラリを利用することにした。
  • pをdivにしたりすると解消されるエラーらしいが、元々divだし…出力されるコードの親子関係も調べてみたが、怪しい点はなかった
  • 今思うと、SSR時と表示時で『同じ内容でない』というエラーの可能性もありそうな気がする。useEffectでなく、もっと前時点で変換する必要があったのかもしれない。

aタグ系にスタイル追加

• ヘッダ下のカテゴリのリスト、タイトル、文章内のリンクに追加
  • ヘッダ下のカテゴリリストはボタンごとhoverスタイルほしかったのでHTML/CSSをがっつり書き換え
  • タイトルはopacity: 0.5を追加。カテゴリより重めなのは、背景がないこともあって、0.7だと変化が見えづらいから。
  • 文章内のリンクはリンク自体が見えづらかったので、text-decoration: underlineを追加
    • こっちはhoverした時にunderline消えるので、opacity: 0.7
    • ホバー時下線でなく、ホバー時に下線が消えるのはMDNの表示を参考にした。個人的には、リンクは明確に下線ある方がわかりやすいと思う。特にブログにおいては、リンクは頻出するものではないので、下線があっても鬱陶しくはならないはず

つぶやき

• 表示がかっこよくなるとウキウキするね
• そういえば今日のアプデではないけれど、こっそりヘッダ画像もタテを少し短くしました。新しい写真、撮りたい。