元々prism-react-rendererを利用していた

prism-react-rendererは保守されていない

2022年時点で2,3年前から保守されておらず、Rustなどの新しめの言語などはほとんどハイライトされない。

Prism.jsはデフォルトではハイライトされない言語がある

いくつかの言語はprismjs/components以下から別途追加する仕組みになっている。

Autoloaderで利用している言語を自動で追加する仕組みもあるが設定が必要。

https://prismjs.com/plugins/autoloader/

いくつか方法があるが例。

import Prism from "prismjs";
import "prismjs/plugins/autoloader/prism-autoloader";
import pkg from "../../package.json";

if (Prism.plugins.autoloader) {
  Prism.plugins.autoloader.languages_path = `https://unpkg.com/prismjs@${pkg.dependencies.prismjs}/components/`;
}

CodeHighlightコンポーネント実装例

import "prismjs/themes/prism-tomorrow.css";
import { useEffect, useRef } from "react";
import Prism from "prismjs";
import "prismjs/plugins/autoloader/prism-autoloader";
import pkg from "../../package.json";

if (Prism.plugins.autoloader) {
  Prism.plugins.autoloader.languages_path = `https://unpkg.com/prismjs@${pkg.dependencies.prismjs}/components/`;
}

export const CodeHighlight = ({
  children,
  language,
}: {
  children?: string;
  language: string;
}) => {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      Prism.highlightElement(ref.current);
    }
  }, [children]);

  return (
    <code ref={ref} className={`language-${language}`}>
      {children}
    </code>
  );
};