Index
Page 1 / 1 ・ Tag: MDX
Next.js(App Router) + Tailwind v4(CSS-first) + MDX のサイトで、ページ見出し・トップセクション・トークンを整理して「タイポの型」を完成させた作業ログ。
pnpm移行で出た警告(approve-builds)対応、frontmatterのsource必須化、PostsList向けの型統一、pretty-code(rehype-pretty-code)のUI改善までをまとめた作業ログ。
rehype-pretty-codeの行ハイライトを視認できる状態にし、tokens化・連続ハイライトの自然化・UI統一・行番号余白の最適化までをまとめた作業ログ。
rehype-pretty-codeの title / 行番号 / ハイライト の動作確認用
compileMDXの呼び出しを lib/render-mdx.ts に集約し、Blog/Works/MdxContentのMDX描画を単一ソース化。mdxOptions/components は lib/mdx.ts のまま共通利用。
compileMDX と MDXRemote が別々に持っていた mdxOptions/components を lib/mdx.ts に集約。readonly型エラーと SerializeOptions 未export問題も解決。
rehype-autolink-headings を append 方式に統一し、hover/focus で自然に表示される見出しアンカーを実装。クリック範囲とフォーカス可視化も調整。
Next.js(App Router) + MDX で、コードブロック上部に言語ラベルを表示し、角丸を上(ラベル)・下(コード)で自然に分ける実装メモ。
MDXでブログ記事を書くときの最低限の型(見出し・リンク・画像・コード・引用など)をまとめた備忘録。
MDXでブログを運用する最小構成のサンプルです。