SyntaxHighlighter Evolved

SyntaxHighlighter Evolved

SyntaxHighlighter Evolved は、WordPressの記事にプログラム等のソースコードを綺麗に表示できるプラグインです。
特にHTMLを書く場合などにはとても重宝します。

Gutenberg の採用で記述・操作方法が変わりました

WordPress 5.0から新しいエディタのGutenbergが標準エディターとして採用されています。その新しいエディタ Gutenberg では SyntaxHighlighter Evolved の使い方が従来の旧エディター TinyMCE と変わりました。

旧エディタ TinyMCE ではショートコードを使っていました。

新エディタ Gutenberg では一口では説明できないのですが、以下の方法になります。

Gutenberg で SyntaxHighlighter Evolved を使う方法

事前に SyntaxHighlighter Evolved プラグインをインストール

もちろん事前に SyntaxHighlighter Evolved プラグインをインストールしておきます。
インストール方法はいつもの通りプラグインで SyntaxHighlighter Evolved を探しインストールするだけです。

SyntaxHighlighter Evolved プラグインをインストールして有効にすると表示されます。

Gutenberg で SyntaxHighlighter Evolved を使う操作方法

まずは記述するブロックを指定します。
下の図のように ブロック追加の「+」マークをクリックして、 SyntaxHighlighter Code を指定します。

※段落ブロックの中にインラインブロックのようにしたいと思うことも有るのですが、操作や記述が面倒なので私は簡単に使用できる SyntaxHighlighter Code ブロックを利用しています。

SyntaxHighlighter Code ブロックの追加
SyntaxHighlighter Code ブロックの追加

次に下の図のように SyntaxHighlighter Code ブロックが表示されますのでソースコード記述します。

SyntaxHighlighter Code ブロックにソースコード記述
SyntaxHighlighter Code ブロックにソースコード記述

次にブロックのメニューにある Settinngs の Code Langeage を選択します。
Code Language を指定すると予約語や関数などの言葉に色が付き綺麗に見えます。

ソースコードの種類を選択
ソースコードの種類を選択

Settings の他の項目 ハイライト表示 も好みに合わせて使ってみてください。

以上、「SyntaxHighlighter Evolved」プラグインの紹介と使用方法でした。