記事の中のソースコードを綺麗にハイライト表示するWordpressプラグイン「SyntaxHighlighter Evolved」の使い方と設定方法です。
以前まではソースコードの表示といえば「Crayon Syntax Highlighter」が定番でしたが、新ブロックエディターの「Gutenberg」が登場してからほとんど使えなくなってしまい、更新も途絶えてしまいました。
今回紹介するプラグインはショートコードでコードを囲むだけでハイライト表示ができ、Gutenbergでも使えますのでオススメです。
コードを囲むショートコードにパラメーターを追記することで、コードごとにタイトルを指定したり、行数を変更したり出来るので融通が利きます。
この記事の目次
SyntaxHighlighter Evolvedの使い方
テキストエディターで使用する場合は、
[php]～表示したいソースコード～[/php]
[css]～表示したいソースコード～[/css]
などと記述したプログラム言語名のショートコードで囲むだけで簡単にハイライト表示ができます。
Gutenbergではソースコード用のブロックがプラグインによって追加されますので、こちらを使用してコードを記事内に挿入してハイライト表示することが出来ます。
プラグインのインストール
プラグインは公開されておりますので、
プラグイン ＞ 新規追加からインストールすることが出来ます。
管理画面左メニュー＞プラグイン＞新規追加
新規追加で検索窓に「SyntaxHighlighter Evolved」と入力。
今すぐインストールを押して有効化しましょう。
有効インストール数が4万を超えており、バッチリ更新もされていますね！
有効化したら簡単に設定をしておきましょう。
SyntaxHighlighter Evolvedの設定方法
設定＞SyntaxHighlighter
プラグインの設定画面はサイドバーの「設定 ＞ SyntaxHighlighter」から行えます。
SyntaxHighlighterの設定
設定画面はシンプルで項目も少ないので簡単です。
以下の説明を参考に好みで設定してください。
SyntaxHighlighterのバージョン
- バージョン3：ダブルクリックでコードの全選択が可能。横にはみ出したコードはスクロール表示。
- バージョン2：横にはみ出したコードが折り返し（改行）されて表示される。
テーマ
ハイライト表示した時の色合いを選べる。ページ下部に画像付きでまとめているのでそちらを参考にどうぞ。
既定の設定
日本語なのでそのままです。
基本デフォルトでOKですが、自動リンクが入っているとややこしくなると思うのでこのチェックは外しました。
追加のCSSのclass名
コードを囲むタグに任意のクラス名を付けることが可能。
更にスタイルをカスタマイズしたい場合に使用する。
行番号の開始・余白・サイズ
行番号は1から始まりますが、変更したい場合はショートコードで対応できますのでそのままでOK！
余白とタブのサイズはサイトに合わせてお好みで調整してみてください。
タイトル
コード上に表示するタイトルを指定できますが、ショートコードで個別に指定した方が分かりやすいので基本的に使わない。
SyntaxHighlighter Evolvedの使い方
まずはショートコードを使って使用する方法です。
記事ごとに臨機応変に表示を変更できるのでこの使い方がオススメ！
コードをプラグインのショートコードで囲む
画像のようにプログラム言語でソースコードの始めと終わりを囲むだけでOKです！
SyntaxHighlighterのコード表示例
実際に表示するとこんな感じ。良い。
ソースコードのタイトルを表示する
コード名や記述するファイル名をソースコードの上に表示しておくと閲覧者が分かりやすくなります。
のように開始ショートコードの後ろにtitle="○○"を追記するとOKです。
ソースコードのタイトル（functions.php）の表示例
するとこんな感じにソースコードの上部にタイトルが表示されます。
ソースコードの行番号を変更する
100行目を編集してください！といった時にソースコードの行数も合わせて表示するようにすると、更に分かりやすくなります。
[php firstline="100"]～表示したいソースコード～[/php]
とショートコードの後ろに追記すればOK！
コードの1行目が100行目からスタートする
1行目の行数が100からスタートします。
ポイント
その他ソースコードを閉じておいたり、行番号を非表示にするパラメータもあります。詳しくはプラグインの設定画面の下部に記載されています。
新エディター「Gutenberg」での使い方
ブロックエディターでも「SyntaxHighlighter Evolved」を使うことが出来ます。
ソースコードの挿入
- ＋ボタンを押す。
- SyntaxHighlighter コードを押す。
コードの選択
- ソースコードを記述する。
- コードのプログラム言語を選ぶ。
これだけでOKです！
先ほどのショートコードのパラメーターを使用したい場合は「コードエディター」にて対応しましょう。
SyntaxHighlighter Evolved_テーマ一覧
このプラグインで使用できるテーマの早見表です。
画像を参考に一番自分のサイトにピッタリなものに合わせてください！
-
- デフォルト
-
- Django
-
- Eclipse
-
- Emacs
-
- Fade to Grey
-
- Midnight
-
- RDark
-
- なし
対応言語
サポートされている言語はおよそ30種類。
HTML、Java、PHPやperlなど一般的な言語は全て対応していますので特に困ることは無いかと思います。
使用したい言語をチェックしたい場合はWordpressのサポートページで確認できます。
まとめ
以上、SyntaxHighlighter Evolvedの使い方でした。
ハイライト表示系のプラグインはソースコードの挿入画面が用意されているものが圧倒的に多いですが、このプラグインはショートコードでコードを囲むだけなのでシンプルで使いやすいですね。
後は何といってもコードごとにタイトルを別々に表示できるのが良い。
当サイトでも使いたかったのですが、phpコードの&&を記述した際に&&とエスケープ処理されてしまいました。
特殊文字で入力するかプログラムの自動整形コードを編集すればいいだけなのですが、コードミスを極力無くすために他のプラグインに変更しました。
現在使用しているのは「Enlighter – Customizable Syntax Highlighter」というプラグインです。↓
