今回は React でシンタックスハイライトを導入する方法を記載します。
コンポーネントに組み込む
ハイライトするために使うプラグインにはreact-syntax-highlighterを使います。これはハイライターと React を繋ぐためのプラグインで、ハイライター本体にprismを使う想定です。
コンポーネントの構成としてlanguageとstyleを設定します。
languageにはハイライト対象の言語を指定します。prism側では、js, ts, jsx, tsx, css などなど、様々な言語に対応しています。
styleには、どのような style を割り当てるかを指定します。今回はprismのテーマであるtomorrowを使用します。
import React from 'react';
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import syntaxStyle from 'react-syntax-highlighter/dist/cjs/styles/prism/tomorrow';
const CodeBlock: React.FC = () => {
return (
<SyntaxHighlighter language="js" style={syntaxStyle}>
// このブロック内に記載されたコードがハイライトされます const hello =
'hello';
</SyntaxHighlighter>
);
};
export default CodeBlock;
例ではテキストをコンポーネントにハードコートしていますが、実際の利用ではpropsを利用して渡すことが多いかと思います。今回は説明のために、端折りました。