【2021年】WordPressで記事中にEnlighterプラグインでソースコードを美しく表示する

プログラミング系の記事などWordPressでブログ中にプログラムコードを記述したいことがあります。Word Pressの記事でコードを表示するにはプラグインを用いるのが一般的ですが、プラグインには多くの種類があり、選ぶのが大変です。また、おすすめはEnlighterプラグインですが、このプラグインはAffinger 5のテーマを使用している場合、フォントが上書きされ期待通りに表示されない場合があります。一部本記事では、おすすめであるEnlighterプラグインの導入と設定方法を紹介し、Affinger 5のテーマを使用していても、フォントが期待通りに表示されるためのカスタマイズ方法を紹介します。

Enlighterプラグインをおすすめする理由

Classic EditorとGutenberg両方で利用できる

プラグインの説明ページに、以下のようにGutenbertとClassic Editor両方のサポートが明記されています。一部のWord Pressプラグインは、いずれかのEditorにしか対応していないことがあります。Word Pressは2021年12月までにClassic Editorのサポートを停止するとアナウンスしていますので、Gutenbergに対応していることは必須要件になります。

• Full Gutenberg Editor Integration
• Full Classic Editor Integration (TinyMCE)

対応している文法と、コードハイライト機能をサポートする機能が充実

Enlighterは、以下の点が魅力的です。

• 代表的なプログラミング言語や文法に対応している
• 装飾のパターンが複数種類用意されている
• エディタ上のツールバー表示の機能が充実している

継続的にアップデートされている

長く続けていくブログですので、開発の継続性は重要です。Enlighterプラグインは、2021年1月17日時点で、バージョンは4.4.2、最終更新日は1週間前と、頻繁な更新がされています。

Word Pressでの記事編集中にコードのパートがブロックとして表示される

以下は、WordPressのエディタでの表示です。エディタの中でソースコードの記述部分が独立することで、記述時の視認性が高まると共に、編集中の意図しない操作でコードの中に不要なタグが挿入されることを予防出来ます。これは記事執筆の生産性の点でとても重要な点です。

インラインでのコード表示にも対応

多くのコードハイライトプラグインはブロック表記でのハイライトにしか対応していません。Enlighterプラグインは、ブロックでのコード表記だけでなく、インラインでのコード表記に対応していることも地味ですが嬉しいポイントです。

Affinger 5とも相性が良い

コードハイライトのプラグインは、テーマとの相性によって表記が崩れたり、エディタ上でメニューが表示されないなど活用に問題が生じる場合があります。WordPressの代表的なテーマであるAffinger 5との相性がよく、CSSの一部のカスタマイズは必要ですが、少ない労力でセットアップできることも魅力の一つです。

インストール方法

プラグイン > 新規追加で、Enlighterで検索します。

設定方法

Appearance

表示に関する設定です。ほとんどの設定は挿入するコードブロック単位で上書き可能です。ここで設定した内容が、コードブロックを挿入した際のデフォルト設定になります。

• Theme - ハイライトのテーマです。14種類から選択出来ます。
• Code indentation - タブの幅です。1-7で選択出来ます。
• Text overflow - テキストの幅が溢れた場合の表示の設定です。Break lineからScrollから選択出来ます。
• Line-numbering - 行数の表示可否を選択出来ます。
• Line-hovereffect - マウスカーソルの箇所にある行のハイライト可否を選択出来ます。
• RAW-Code on doubleclick - ダブルクリックした際にハイライトされていないテキストの表示可否を選択出来ます。

Toolbar

Toolbarでは、記事上に表示されたコードブロックに表示するツールバーのボタン表示を設定できます。

• Visibility - コードブロック上のツールバーの表示可否を選択出来ます。
• Raw code button - ハイライトしないコードの表示ボタンの表示可否を選択出来ます。
• New window button - コードを新規ウィンドウで開くボタンの表示可否を選択出来ます。
• Copy-toclipboard button - コードをクリップボードにコピーするボタンの表示可否を選択出来ます。
• EnlighterJS website button - EnligherJSのWebsiteへの誘導ボタンの表示可否を選択出来ます。

Affinger 5でコードを等幅フォントに変更する方法

Affinger 5ではEnlighterをインストール直後だと、Affinger 5の設定によってはAffinger 5のフォント設定が優先されてしまいます。

Affinger 5の設定が優先されてしまっている状態で、Enligheterのコードを等幅フォントで表示するためには、WordPressの外観で追加のCSS以下のコードを挿入してください。

追加CSSはプラグインで管理するのがメンテナンス性が高くおすすめです。以下のCSSをどのように追加すればよくわからない方は、WordPressプラグインのSimple Custom CSS を使ってみてください。

/* Enlighter 用のフォントの指定 */
/*
.enlighter-default * {
    font-family: Inconsolata,Consolas,"Source Code Pro","Liberation Mono","Courier New",Courier,monospace;
}
*/

Simple Custom CSS

Enlighterによるコードハイライトの表示サンプル

実際にEnlighterによってどのようにコードが表示されるかいくつかサンプルを記載するのでご覧ください。

Enlighterテーマ

// Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

Classicテーマ

// Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

Atomicテーマ

// Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

行番号の表示

// Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

タブ形式で複数のコードを表示

// Hello.java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

function factorial(n) {
    if (n == 0) {
        return 1;
    }
    return n * factorial(n - 1);
}

まとめ

WordPressで美しくプログラムのコードを表示させるためのEnlighterプラグインを紹介しました。Affinger5だとフォントの設定が上書きされてしまいますが、等幅フォントに変更するためのCSSのカスタマイズ方法についても紹介しました。WordPressのコードハイライトプラグインは種類も多いですが、どれも一長一短です。Enlighterは大きな欠点もなく、使いやすく現時点では個人的には最も使いやすいコードハイライトプラグインだと感じています。是非本記事で紹介した方法で、みなさんもブログでのコードハイライトを活用してください。