使いやすいシンタックスハイライトプラグイン「Enlighter」

ただただソースコードを掲載するのではなく、コードに色を付けて見やすくしたコードを載せたいですよね？

もし、ちゃんとしたシンタックスハイライトプラグインを使うとこんな風に見やすいボックスを作成できます。

今回は、シンタックスハイライトプラグインの中でも特に使いやすかった「Enlighter」について紹介します。

目次から探す

Enlighterの利点

対応言語が多い

Enlighter 対応言語

HTML	CSS	JavaScript	PHP
Python	Ruby	JSON	Markdown
C	C++	C#	Shell Script
Batch	XML	SQL	Batch
Java	RUST	LUA	Matlab
NSIS	Diff	VHDL	Assembly
Kotlin	Squirrel	ini	RAW

このように、使われることの多いメジャーなプログラミング言語に対応しているため、言語ごとにシンタックスハイライトプラグインを入れ替える必要もありません。

ほかの本文と分けて挿入できる

Enlighterで挿入したソースコードは、エディタ上でもブロック化されます。

そのため、どこがソースコードでどこが本文なのかといったことが一発で分かるようになっています。

もちろんそのまま再編集できますし、ソースコードブロック単位で削除することも可能です。

コピー時に行番号が一緒にコピーされない

使用するシンタックスハイライトプラグインによっては、ソースコードをコピーすると行番号も一緒にコピーされてしまうことがあります。

わざわざ無駄な行番号を削除しないといけないので、それではユーザーフレンドリーとは言えないでしょう。

ですが、Enlighterならその心配はありません。Enlighterは行番号がコピーされないように対策されており、どうやっても行番号をコピーできません。

試しに以下のコードをコピーしてテキストエディタに貼り付けてみてください。

<html>
<head>
    <title>Acceliv</title>
</head>
<body>
    <p>こんにちわ</p>
</body>
</html>

行番号を巻き込むように範囲選択しても、コピーされなかったはずです。

Gutenberg対応

EnlighterはGutenberg・クラシックエディタ(ビジュアルエディタ)の両方に対応しています。

Gutenbergに対応していないから使えない
ビジュアルエディタに対応していないから使えない

このような心配はありません。

このように、ほかのプラグインにはないメリットがEnlighterにはあるため、WordPressで使えるシンタックスハイライトプラグインを探しているのであればかなりおすすめです。

Enlighterのインストール

まずはプラグイン新規追加ページで「Enlighter」を検索してインストールしてください。

プラグインをFTPなどでアップロードする場合は公式プラグインディレクトリからダウンロードしてください。

インストールして有効化したら、簡単な案内が表示されます。

この状態で記事の編集ページを開いてみてください。

Gutenbergならブロックの追加に「Enlighter Sourcecode」があれば有効化に成功しています。

クラシックエディタの場合は、ビジュアルエディタにこのようなアイコンが追加されています

Enlighterの使い方

Gutenberg・クラシックエディタそれぞれ紹介します。

Gutenberg

ソースコードの追加

GutenbergではフォーマットカテゴリーにEnlighterブロックが用意されています。

ソースコードを追加する場合はこのブロックを選択しましょう。

「Insert Sourcecode..」と表示されているところに、記述したいプログラムを書き込みます。

こんな感じですね。

プログラムを書き終えたらシンタックスハイライトを適用する言語ルールを指定します。画像にあるアイコンをクリックして、言語を選択してください。

言語の選択が完了すると、記述したソースコードの上に選択したプログラミング言語が表示されます。

追加が終わったらプレビュー表示してみてください。このように関数名やタグ名などに自動的に色がついているはずです。

追加済みソースコード編集

追加済みソースコードの編集は簡単です。

ソースコードを記述するボックスのテキストを編集するだけでソースコードブロックの中身を書き換えられます。わざわざ新規作成する必要はありません。

この画像のように、既存のソースコードを編集するだけで十分です。

クラシックエディタ

ソースコードの追加

クラシックエディタではビジュアルエディタにEnlighterボタンが追加されています。

まずはこのボタンを押してください。

ボタンを押すとソースコード追加画面が立ち上がります。

項目	概要
言語	挿入するプログラムで利用しているプログラミング言語(タグの色分けなどに使われます)
Mode	ブロック要素・インライン要素どちらで購入するかどうか。
Left-Align Indentation	インデント設定(デフォルトのままでOK)
Surround with spaces	タブの扱いをどうするか(デフォルトのままでOK
テキストエリア	ソースコードの記述する

基本的な使い方はこんな感じです。

最後に[OK]ボタンを押すとソースコードが追加されます。