加入程式碼區塊標題，使用 rehype-code-titles - Modern Next.js Blog 系列 #15

已複製！
pnpm add rehype-code-titles

已複製！
import rehypeCodeTitles from "rehype-code-titles"; // 新增這行
import rehypePrism from "rehype-prism-plus";

import { defineDocumentType, makeSource } from "./src/lib/contentLayerAdapter";

// ...

export default makeSource({
  contentDirPath: "content",
  documentTypes: [Post],
  mdx: {
    // 新增到 rehypePlugins 列表裡
    rehypePlugins: [rehypeCodeTitles, [rehypePrism, { ignoreMissing: true }]],
  },
});

已複製！
.postBody {
  # 新增下面這兩塊
  :global(.rehype-code-title) {
    @apply -mb-3 rounded-tl rounded-tr bg-slate-600 px-4 pt-1 pb-2 font-mono text-sm text-gray-200;
  }

  div:global(.rehype-code-title) + pre {
    @apply rounded-tl-none rounded-tr-none;
  }

  # ...
}