Rehype Pretty Code を使って、自分好みのシンタックスハイライトを手に入れる

const add = (a, b) => a + b;
 
console.log('removed') 
console.log('added') 
 
add(2, 3); // 5

npm install rehype-pretty-code shiki

import remarkGfm from "remark-gfm";
import type { MDXRemoteOptions } from "next-mdx-remote-client/rsc";
import rehypePrettyCode from "rehype-pretty-code"; 
import { prettyCodeOptions } from "@/libs/prettyCodeOptions"; 
import type { PluggableList } from "unified"; 
 
export const mdxOptions: MDXRemoteOptions = {
  mdxOptions: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [[rehypePrettyCode, prettyCodeOptions]] as PluggableList, 
    format: "mdx",
  },
  parseFrontmatter: true,
};

import type { Options } from "rehype-pretty-code";
 
export const prettyCodeOptions: Options = {
  theme: "plastic",
  keepBackground: true,
  defaultLang: "plaintext",
  bypassInlineCode: true,
};

import React from "react";
import { getAllBlogSlugs, getBlogBySlug } from "@/libs/microcms";
import { notFound } from "next/navigation";
import { fetchOgpDataFromMdx } from "@/libs/fetchOgpDataFromMdx";
import { MdxComponents } from "@/components/PortfolioAndBlog/ContentPage/MdxComponents";
import { MDXRemote } from "next-mdx-remote-client/rsc";
import { mdxOptions } from "@/libs/mdxOptions";
import BlogClientWrapper from "@/components/PortfolioAndBlog/ContentPage/BlogClientWrapper";
 
 
type PageProps = {
  params: Promise<{ slug: string }>;
};
 
export async function generateStaticParams() {
  const slugs = await getAllBlogSlugs();
  return (slugs ?? []).map(({ articleSlug }) => ({ slug: articleSlug }));
}
 
export default async function BlogContentPage({ params }: PageProps) {
  const { slug } = await params;
  const blogContentData = await getBlogBySlug(slug);
 
  if (!blogContentData) return notFound();
 
  const { ogpDataList } = await fetchOgpDataFromMdx(blogContentData.body);
  const components = MdxComponents(ogpDataList);
 
  return (
    <BlogClientWrapper blogContent={blogContentData}>
      <MDXRemote
        source={blogContentData.body}
        options={mdxOptions} 
        components={components}
      />
    </BlogClientWrapper>
  );
}

\```js title="app.js"
const add = (a, b) => a + b
add(2, 3) // 5
\```

<figcaption data-rehype-pretty-code-title="" data-language="js" data-theme="plastic">
  app.js
</figcaption>

const add = (a, b) => a + b
add(2, 3) // 5

npm i -D @shikijs/transformers

import type { Options } from "rehype-pretty-code";
import { 
  transformerNotationHighlight, 
  transformerNotationDiff, 
} from "@shikijs/transformers"; 
 
export const prettyCodeOptions: Options = {
  theme: "plastic",
  keepBackground: true,
  defaultLang: "plaintext",
  bypassInlineCode: true,
  transformers: [transformerNotationDiff(), transformerNotationHighlight()], 
};

\```ts
console.log('highlight') // [!code highlight]
console.log('unchanged')
\```

console.log('highlight') 
console.log('unchanged')

\```ts
console.log('removed') // [!code --]
console.log('added') // [!code ++]
console.log('unchanged')
\```

console.log('removed') 
console.log('added') 
console.log('unchanged')