234文字
1分
編集

Prism.jsでハイライトされない言語があった

#React #Prism.js

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

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

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

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

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

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

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

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

jsx
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 コンポーネント実装例

jsx
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>
  );
};
編集