「SyntaxHighlighter Evolved」の使い方とテーマ一覧。WordPressでソースコードを綺麗に表示するプラグイン!

SyntaxHighlighter-Evolved_Theme05_FadetoGrey

記事の中のソースコードを綺麗にハイライト表示するWordpressプラグイン「SyntaxHighlighter Evolved」の使い方と設定方法です。

以前まではソースコードの表示といえば「Crayon Syntax Highlighter」が定番でしたが、新ブロックエディターの「Gutenberg」が登場してからほとんど使えなくなってしまい、更新も途絶えてしまいました。

今回紹介するプラグインはショートコードでコードを囲むだけでハイライト表示ができ、Gutenbergでも使えますのでオススメです。

コードを囲むショートコードにパラメーターを追記することで、コードごとにタイトルを指定したり、行数を変更したり出来るので融通が利きます。

SyntaxHighlighter Evolvedの使い方

テキストエディターで使用する場合は、

[php]~表示したいソースコード~[/php]
[css]~表示したいソースコード~[/css]

などと記述したプログラム言語名のショートコードで囲むだけで簡単にハイライト表示ができます。

Gutenbergではソースコード用のブロックがプラグインによって追加されますので、こちらを使用してコードを記事内に挿入してハイライト表示することが出来ます。

プラグインのインストール

プラグインは公開されておりますので、
プラグイン > 新規追加からインストールすることが出来ます。
SyntaxHighlighter Evolvedの使い方1新規追加で検索窓に「SyntaxHighlighter Evolved」と入力。
今すぐインストールを押して有効化しましょう。
有効インストール数が4万を超えており、バッチリ更新もされていますね!

有効化したら簡単に設定をしておきましょう。

SyntaxHighlighter Evolvedの設定方法

SyntaxHighlighter Evolvedの使い方2プラグインの設定画面はサイドバーの「設定 > SyntaxHighlighter」から行えます。

SyntaxHighlighter Evolvedの使い方3設定画面はシンプルで項目も少ないので簡単です。
以下の説明を参考に好みで設定してください。

SyntaxHighlighterのバージョン

バージョン3:ダブルクリックでコードの全選択が可能。横にはみ出したコードはスクロール表示。
バージョン2:横にはみ出したコードが折り返し(改行)されて表示される。

テーマ

ハイライト表示した時の色合いを選べる。ページ下部に画像付きでまとめているのでそちらを参考にどうぞ。

既定の設定

日本語なのでそのままです。
基本デフォルトでOKですが、自動リンクが入っているとややこしくなると思うのでこのチェックは外しました。

追加のCSSのclass名

コードを囲むタグに任意のクラス名を付けることが可能。
更にスタイルをカスタマイズしたい場合に使用する。

行番号の開始・余白・サイズ

行番号は1から始まりますが、変更したい場合はショートコードで対応できますのでそのままでOK!
余白とタブのサイズはサイトに合わせてお好みで調整してみてください。

タイトル

コード上に表示するタイトルを指定できますが、ショートコードで個別に指定した方が分かりやすいので基本的に使わない。

SyntaxHighlighter Evolvedの使い方

まずはショートコードを使って使用する方法です。
記事ごとに臨機応変に表示を変更できるのでこの使い方がオススメ!
SyntaxHighlighter Evolvedの使い方4画像のようにプログラム言語でソースコードの始めと終わりを囲むだけでOKです!
SyntaxHighlighter Evolvedの使い方5実際に表示するとこんな感じ。良い。

ソースコードのタイトルを表示する

コード名や記述するファイル名をソースコードの上に表示しておくと閲覧者が分かりやすくなります。

[php title="functions.php"]~表示したいソースコード~[/php]

のように開始ショートコードの後ろにtitle="○○"を追記するとOKです。
SyntaxHighlighter Evolvedの使い方6するとこんな感じにソースコードの上部にタイトルが表示されます。

ソースコードの行番号を変更する

100行目を編集してください!といった時にソースコードの行数も合わせて表示するようにすると、更に分かりやすくなります。

[php firstline="100"]~表示したいソースコード~[/php]

とショートコードの後ろに追記すればOK!
SyntaxHighlighter Evolvedの使い方71行目の行数が100からスタートします。

その他ソースコードを閉じておいたり、行番号を非表示にするパラメータもあります。詳しくはプラグインの設定画面の下部に記載されています。

新エディター「Gutenberg」での使い方

ブロックエディターでも「SyntaxHighlighter Evolved」を使うことが出来ます。

SyntaxHighlighter Evolvedの使い方8

ソースコードの挿入

1.+ボタンを押す。
2.SyntaxHighlighter コードを押す。
SyntaxHighlighter Evolvedの使い方9

コードの選択

3.ソースコードを記述する。
4.コードのプログラム言語を選ぶ。

これだけでOKです!
先ほどのショートコードのパラメーターを使用したい場合は「コードエディター」にて対応しましょう。

SyntaxHighlighter Evolved_テーマ一覧

このプラグインで使用できるテーマの早見表です。
画像を参考に一番自分のサイトにピッタリなものに合わせてください!




対応言語

サポートされている言語はおよそ30種類。
HTML、Java、PHPやperlなど一般的な言語は全て対応していますので特に困ることは無いかと思います。
使用したい言語をチェックしたい場合はWordpressのサポートページで確認できます。

まとめ

「SyntaxHighlighter Evolved」の使い方まとめでした!
ハイライト表示系のプラグインはソースコードの挿入画面が用意されているものが圧倒的に多いですが、このプラグインはショートコードでコードを囲むだけなのでシンプルで使いやすいですね。

後は何といってもコードごとにタイトルを別々に表示できるのが良い。

当サイトでも使いたかったのですが、phpコードの&&を記述した際に&amp&ampとエスケープ処理されてしまいました。
特殊文字で入力するかプログラムの自動整形コードを編集すればいいだけなのですが、コードミスを極力無くすために他のプラグインに変更しました。

現在使用しているのは「Enlighter – Customizable Syntax Highlighter」というプラグインです。
【関連記事】[WP]記事内のソースコードを見やすくハイライト表示するプラグイン【Enlighter】の設定、使い方とテーマ一覧!

-Wordpress
-

© 2021 ソロ学