Next.js制作Tips
Markdown記事のコードブロックにコピーボタンを付ける【rehype-pretty-codeの生HTMLにDOM操作で後付け】
このブログのコードブロックは、シンタックスハイライト・言語ラベル・コピーボタン付きです。Markdownから変換された生HTMLにはReactのonClickを付けられないため、マウント後にDOMを走査してボタンを差し込んでいます。その仕組みとCSS、二重追加を防ぐ工夫をコード付きで解説します。
10分で読めます🔵 実装記録
#デザイン の記事一覧
Next.js制作Tips
Next.jsのブログに、今読んでいる見出しが光る追従目次を実装する【IntersectionObserverでスクロールスパイ】
このブログのPC表示では、記事の目次が右側に追従し、今読んでいる見出しがハイライトされます。Markdownから目次を作る部分、IntersectionObserverで現在位置を判定する部分、そして実装中に踏んだ「ページ遷移後に先頭まで戻らない」「サイドバーの文字が透ける」という2つの不具合をコード付きで解説します。
16分で読めます🔵 実装記録
Next.js制作Tips
Next.jsブログにライト/ダークモード切り替えを実装する方法
端末のダークモード設定に自動追従しつつ、手動でライト/ダーク/端末追従を切り替えられるボタンをNext.jsで実装する方法を、実際のコードとあわせて解説します。
7分で読めます🔵 実装記録