MDXのシンタックスハイライト：react-syntax-highlighterからShikiへの移行

import { codeToHtml } from 'shiki';
const html = await codeToHtml(`const message: string = "Hello, Shiki!";`, {
  lang: 'typescript',
  themes: {
    light: 'github-light',
    dark: 'github-dark',
  },
  defaultColor: false,
});
console.log(html);

npm install shiki

import { codeToHtml } from 'shiki';
import type { BundledLanguage } from 'shiki';

type CodeBlockProps = {
  children: string;
  lang: BundledLanguage; // 対応言語を型で指定
};

export async function CodeBlock({ children, lang }: CodeBlockProps) { // codeToHtmlは非同期なためasync関数に
  const html = await codeToHtml(children, {
    lang,
    themes: { // デュアルテーマ設定
      light: 'github-light',
      dark: 'github-dark',
    },
    defaultColor: false, // デフォルトカラー無効化（CSS変数使用）
  });

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

import { MDXProvider } from '@mdx-js/react';
import { CodeBlock } from './CodeBlock';

const components = {
  pre: ({ children }: { children: React.ReactNode }) => {
    // preタグの中のcodeタグを取得
    const child = React.Children.only(children) as React.ReactElement;
    if (child.type === 'code') {
      return (
        <CodeBlock lang={child.props.className?.replace(/language-/, '')}>
          {child.props.children}
        </CodeBlock>
      );
    }
    return <pre>{children}</pre>;
  },
};

export function CustomMDXProvider({ children }: { children: React.ReactNode }) {
  return <MDXProvider components={components}>{children}</MDXProvider>;
}

```typescript
const message: string = "Hello, Shiki!";
console.log(message);
```

const message: string = "Hello, Shiki!";
console.log(message);

/* ライトモード時にShikiのライトテーマを表示 */
html:not(.dark) .shiki,
html:not(.dark) .shiki span {
  color: var(--shiki-light) !important;
  background-color: var(--shiki-light-bg) !important;
}

/* ダークモード時にShikiのダークテーマを表示 */
html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
}

@media (prefers-color-scheme: dark) {
  .shiki,
  .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
  }
}