Tag: MDX

Blog

• 2026.01.26

  タイポ統一ログ：Kou Nagai Studio の Typography v1

  Next.js(App Router) + Tailwind v4(CSS-first) + MDX のサイトで、ページ見出し・トップセクション・トークンを整理して「タイポの型」を完成させた作業ログ。

• 2026.01.26

  pnpm移行とMDX基盤の型統一ログ（approve-builds / source必須化 / pretty-code改善）

  pnpm移行で出た警告（approve-builds）対応、frontmatterのsource必須化、PostsList向けの型統一、pretty-code（rehype-pretty-code）のUI改善までをまとめた作業ログ。

• 2026.01.25

  pretty-code（rehype-pretty-code）調整ログ：ハイライト最適化〜余白詰めまで

  rehype-pretty-codeの行ハイライトを視認できる状態にし、tokens化・連続ハイライトの自然化・UI統一・行番号余白の最適化までをまとめた作業ログ。

• 2026.01.25

  pretty-code 動作確認（テスト）

  rehype-pretty-codeの title / 行番号 / ハイライト の動作確認用

• 2026.01.25

  renderMdxを追加してMDX描画呼び出しを単一化した（Blog/Works/MdxContent）

  compileMDXの呼び出しを lib/render-mdx.ts に集約し、Blog/Works/MdxContentのMDX描画を単一ソース化。mdxOptions/components は lib/mdx.ts のまま共通利用。

• 2026.01.25

  MDX描画設定（remark/rehype/components）をlibに集約して二重管理をやめた

  compileMDX と MDXRemote が別々に持っていた mdxOptions/components を lib/mdx.ts に集約。readonly型エラーと SerializeOptions 未export問題も解決。

• 2026.01.25

  見出しアンカー（#）の表示とアクセシビリティを改善した

  rehype-autolink-headings を append 方式に統一し、hover/focus で自然に表示される見出しアンカーを実装。クリック範囲とフォーカス可視化も調整。

• 2026.01.25

  MDXのコードブロックに言語ラベルを付けて、角丸を上下で自然に分離する

  Next.js(App Router) + MDX で、コードブロック上部に言語ラベルを表示し、角丸を上(ラベル)・下(コード)で自然に分ける実装メモ。

• 2026.01.19

  MDXブログ記事の書き方（備忘録）

  MDXでブログ記事を書くときの最低限の型（見出し・リンク・画像・コード・引用など）をまとめた備忘録。

• 2026.01.18

  はじめてのMDXブログ

  MDXでブログを運用する最小構成のサンプルです。