ReactSyntaxHighlighterが本番環境でうまく動作しない・色が付かない時の解決方法

この記事の最終更新日: 2023年5月29日

本番環境で色が付かない！
react-syntax-highlighterを本番環境でも動作させるコード

本番環境で色が付かない！

コードを色付けしてくれる、react-syntax-highlighterですが、本番環境で色が付かないという報告が多数上がっています。

コードを少し修正すればすぐに改善するので、安心してください。ここでは公式のissue(英語)で上がっている改善方法を紹介します。

react-syntax-highlighterを本番環境でも動作させるコード

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import { a11yLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';

SyntaxHighlighter.registerLanguage('json', json);
...
                <SyntaxHighlighter language="JSON" style={a11yLight}>
                  {formattedElasticQuery}
                </SyntaxHighlighter>

import json from ‘react-syntax-highlighter/dist/cjs/languages/hljs/json’;と、

SyntaxHighlighter.registerLanguage(‘json’, json);が重要です。

上記のようにコードを書いていなくても、開発環境では動いてしまうのがハマるポイントです。

他の言語(SQLやJavaScript)で利用したい場合は、jsonの箇所を書き換えましょう。