ワードプレスでコードをそのまま表示させる方法 SyntaxHighlighter

通常、ワードプレス（ WordPress 5 ）のビジュアルエディターで各ブロックに記載したテキスト（コード）は実行されてしまい、そのコード自身を表示することはできません。それを表示させたいこともありますよね。それには「 SyntaxHighlighter Evolved（シンタックスハイライター エボルブ）」のプラグインを利用するのが手っ取り早くてまた非常に便利です。

シンタックスハイライターをインストールするには、ワードプレスダッシュボードの「プラグイン」＞「新規追加」から「SyntaxHighlighter Evolved」と入力して下記を検索してください。

「今すぐインストール」をクリックしてインストールし、インストールされたら「有効化」をクリックして有効化します。

私は上記の設定で利用しています。デフォルトの設定ですが特に問題ありません。

シンタックスハイライターを使うには、プラグインをインストールすると自動で、ワードプレスのブロック追加のフォーマットの項目に「Syntaxhighlighter Code」が追加されているので、それを利用します。

上記をクリックするとコードの入力枠ができるので、そちらに表示させたいコードを入力します。

画面の右ペインのブロックの設定で「Code Language」を選びます。その設定に合わせたハイライトが入ってコードが表示されます。

基本は以上です。

細かい設定として、ライン番号の連番を変更したい場合は、「First Line」を入力すると設定されます。

ハイライト表示するラインを設定できます。「Highlight Lines」にライン番号を入力します。複数設定したい場合は「1,5」や「10-20」のように入力します。

ショートコード[○○○][/○○○]を表示させたいときは、「[[○○○][/○○○]]」のように、さらに先頭と最後にカッコを追加しくくります。