WordPressのコードブロックでカッコ等が文字化けする(<等の文字実態参照になってしまう)

WordPress

WordPressのコードブロックをキレイに表示する人気のプラグインに「Crayon Syntax Highlighter」がありますが、コード中の<や[といった記号が文字実態参照(<等)になって文字化けしてしまう事があります。

プラグインのバグのようですが、 「Crayon」 は長らくメンテナンスされていないようで修正は期待できそうにありません。

動作確認もWordPress4までしか行われておらず、最新のWordPressバージョン5以降では動作未検証となっています。

CrayonはWordPress5のブロックエディタにも完全には対応しておらず、言語の切り替え等もできなくなっています。

このため「Crayon Syntax Highlighter」を使い続ける事は断念し、「SyntaxHighlighter Evolved」という新しいプラグインに乗り換える事にします。

SyntaxHighlighter Evolved – WordPress プラグイン | WordPress.org 日本語

「SyntaxHighlighter Evolved」を導入する手順を説明していきます。

SyntaxHighlighter Evolvedをインストールする

WordPressのダッシュボードから、「プラグイン」→「新規追加」を選択します。

プラグインのキーワード検索で「SyntaxHighlighter Evolved」を選択し、検索結果から「今すぐインストール」ボタンを押します。(※画像はインストール済の状態です)

これでインストールは完了です。

SyntaxHighlighter Evolvedの使い方

WordPress5のブロックエディタで「フォーマット」→「SyntaxHighlighte コード」を選択してブロックを追加します。

ブロックにコード等を追記し、ブロックエディタ右側の設定で言語の種類等を選択します。

基本的な使い方は以上ですが、もともと「Crayon」を使っていた場合は不具合が発生します。

CrayonからSyntaxHighlighter Evolvedに乗り換えた場合の不具合

もともとCrayonを使っていた場合、SyntaxHighlighter Evolvedのブロックを追加すると以下のようにCrayonのコードが混ざって表示されてしまいます。


これを解消するには、WordPressの「Crayon Syntax Highlighter」プラグインを停止する必要があります。

コードがきれいに表示されるようになりました。

「<?php」やシングルクォートなども文字化けせずに表示されています。

今まで「Crayon」で書いていたコードブロックはすべてスタイルが解除されてしまうのが悩ましい所ですが、サポートが終わっているので仕方ありません…

コードブロックの文字化け対策については以上です。

コメント/ピンバック

タイトルとURLをコピーしました