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

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

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

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

目次から探す

Enlighterの利点

対応言語が多い

Enlighter 対応言語
HTMLCSSJavaScriptPHP
PythonRubyJSONMarkdown
CC++C#Shell Script
BatchXMLSQLBatch
JavaRUSTLUAMatlab
NSISDiffVHDLAssembly
KotlinSquirreliniRAW

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

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

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

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

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

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

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

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

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

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

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

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

Gutenberg対応

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

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

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

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

Enlighterのインストール

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

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

WordPress.org 日本語
Enlighter – Customizable Syntax Highlighter All-in-one Syntax Highlighting solution. Full Gutenberg and Classic Editor integration. Graphical theme customizer. Based on EnlighterJS.

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

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

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

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

Enlighterの使い方

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

Gutenberg

ソースコードの追加

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

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

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

こんな感じですね。

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

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

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

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

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

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

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

クラシックエディタ

ソースコードの追加

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

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

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

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

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

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

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

追加済みのソースコードは直接編集することが可能です。

プログラム・ソースコードを紹介するならシンタックスハイライトは必須

何らかのプログラムを紹介する場合は、シンタックスハイライトプラグインを使用するべきです。

パッとプログラムを見せられた時に、色分けされていないと非常に見づらく、それだけでユーザーがブラウザバックしてしまう可能性があります。

シンタックスハイライトプラグインはたくさんありますが、その中でも使いやすいのがEnlighterですので、ソースコードに色付したい人は一度使ってみてくださいね

目次から探す