Enlighter – Customizable Syntax Highlighterを導入する

プログラミング学習の備忘録を残すにあたり、貼り付けるコードの見た目をカッコよくしたいな、あとHTMLとCSSはタブ切り替えで見られるようにしたいな、と思ったので、そのためのプラグインを導入しました。

参考にした記事は以下です。

インストール手順

WordPress管理画面にログインし、「プラグイン」→「プラグインを追加」でプラグインの追加画面に移動します。

移動した先にある検索窓に「Enlighter – Customizable Syntax Highlighter」と入力します。（「Enlighter」でも出てきます。）

出てきた検索結果の中で以下画像のプラグインを見つけたら、「今すぐインストール」をクリックします。

インストールが完了したら「有効化」ボタンを押して有効化しましょう。

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

設定について

「Appearance」の設定

WordPress管理画面左側メニューから、「Enlighter」→「Appearance」をクリックします。

表示される画面の「Appearance」タブにて、以下のように設定して「変更を保存」ボタンを押します。

• Theme：Monokai
• Line-hovereffect：ボタンを操作して無効化

「Theme」は、コードの見た目を設定する項目です。「Monokai」にすると以下のような見た目になります。

「Line-hovereffect」は、コード上にカーソルを持っていった時、今どの行の上にカーソルがあるのか？ を可視化させる設定です。有効のままなら、コードにカーソルを合わせると以下のようになります。

光っている（？）ところがカーソルを合わせている行です。この設定がいらない場合に、「Appearance」の「Line-hovereffect」を無効化します。

「Toolbar」の設定

「Appearance」タブの横に「Toolbar」タブがあるので、その設定画面から「EnlighterJS website button」を無効化し、「変更を保存」ボタンを押します。

有効にしたままだと、コードブロックにカーソルを合わせた時、右上に以下赤枠のようなボタンが表示されます。

そのボタンをクリックすると、開発元のGitHubページに飛びます。

開発者へのリスペクト（クレジット表記）と、どんなプラグインを使っているかの証明としての意味があるのだと思います。

有効化のままでもいいし、無効化しても問題ない、とのこと。

「Options」の設定

続いて、WordPress管理画面左側メニューから、「Options」をクリックします。

表示された画面の下の方に「Dynamic Resource Invocation (DRI)」という項目があるので、ボタンを操作し有効化して「変更を保存」ボタンを押します。

これはページのリソースを節約するための設定で、記事の中にコードが含まれると判断した時だけ色付け用の重たいデータ（cssやjs）を読み込むようにするのだそうです。

サイトが重くなるのを防ぐための設定ですので、有効化するのがいいかと思います。

使い方

基本の利用方法

使い方は至ってシンプルで、ブロックエディタで「Enlighter Sourcecode」ブロックを選択し、

記事の編集画面に挿入されたブロックの中にコードを貼りつけます。

そして、コードの言語設定の項目で貼り付けたコードがどの言語のものかを選択します。
初期設定は「Generic Highlighting」になっています。

ここは色付けのための設定で、貼り付けたコードをちゃんと選択しておくと、そのコードに合わせた見た目に整えてくれます。ただ、「Generic Highlighting」のままでも、数字は青、コメントはグレー、みたいにそれっぽい色分けはしてくれるようです。

ちなみに、貼り付けたコードの言語設定は、編集画面右側の「ブロック」タブからも行えます。

別々のコードを合体させてタブ分けして表示させたい場合

「HTMLとCSSは合体して表示させて、タブで切り替えたいな」と思うこともあるかと思います。

以下のような表示のさせ方をしたい時です。

この場合、編集画面では「Enlighter Sourcecode」ブロックを2つ並べて、HTMLとCSSをそれぞれ別々に貼り付けています。

そうやってそれぞれ作成したブロックを紐づけるために、編集画面右側の「ブロック」タブの中にある「Codegroup」という項目を設定していきます。

今回私が行ったHTMLの設定は以下です。

Titleは、実際に記事を表示した時のタブに入る名称です。
Group Identifierは、合体させたいブロック同士を紐づけるための識別タグです。

Group Identifierは半角英数字（ハイフン - 可）で入力してください。
例：my-code-01 など

CSSのブロックでも同じように設定していきます。

この際、Group IdentifierはHTMLのブロックで設定したものと同じ名前を設定します。
こうすることで、「HTMLのブロックとこれは同じグループだから、合体させて表示させるんだな」と判断されます。

このように設定することで、それぞれのコードを合体させ、タブ切り替えで表示させることができます。

まとめ

WordPress標準のブロックでもコードを貼り付ける用のものはあるのですが、合体させてタブ切り替えで表示、といった見せ方はできません。

よって導入したプラグインでしたが、それ以外でも見た目がプロっぽくなって気分が上がるので、入れてよかったなあと思います。

プログラミング学習の備忘録記事の作成が捗りそうです。