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

2023-01-02

Tech

React

/

Prism.js

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

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

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

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

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

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

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

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

1
import Prism from "prismjs";
2
import "prismjs/plugins/autoloader/prism-autoloader";
3
import pkg from "../../package.json";
4

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

CodeHighlight コンポーネント実装例#

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

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

11
export const CodeHighlight = ({
12
  children,
13
  language,
14
}: {
15
  children?: string,
16
  language: string,
17
}) => {
18
  const ref = useRef < HTMLDivElement > null;
19

20
  useEffect(() => {
21
    if (ref.current) {
22
      Prism.highlightElement(ref.current);
23
    }
24
  }, [children]);
25

26
  return (
27
    <code ref={ref} className={`language-${language}`}>
28
      {children}
29
    </code>
30
  );
31
};