WordPressでソースコードを表示するプラグインの使い勝手を比較～設定や導入のしやすさよりも入力のしやすさを優先したい～

WordPressでソースコードを入力することが多くプラグインを使っているがもっと使いやすいものが無いか少し調べてみた。調べ始めたらどれも微妙で選びきれない。特に困ったのが半角空白のトリム。ソースコードにはインデントと呼ばれる半角空白で整形されている。WordPessの記事はHTMLなので普通に入力すると貼りつけたときに半角空白が除去されてしまう。これを防ぐのがpreタグである。preタグで囲った場所であれば半角空白がトリムされない。いくつかプラグインを調べたがインデントを崩さずにソースコードを貼り付けられるものはほとんどなかった。結論を言うと非日本語対応で設定がわかりにくいが入力の手間が少ない「Enlighter – Customizable Syntax Highlighter」が候補となった。個人的な見解でこれがベストチョイスとは限らないが気になる方は参考にしていただきたい。

ソースコード入力プラグイン

プラグインをインストールするだけでソース高度の見栄えがかなり良くなる。いくつか種類はあるがどれでもいいのでおすすめしたい。

機能概要

WordPressのアウトプットはブラウザなのでソースコードなど記号が入った文字列は文字化けなどが発生し正しく表示できない。そこでソースコードを文字化けせず見やすく参照できるようなプラグインがいくつか存在する。Webサイトでソースコードを紹介するときは必須と言っていいだろう。見た目も良くなるのでソースコードを取り扱う記事なら準備しておきたい。

比較対象のプラグイン

ソースコードを表示できるプラグインをいくつか挙げてみた。インストール数が多い3つのプラグインの使い勝手について検証する。

比較検証

エディターはClassic Editorを使用する。

SyntaxHighlighter Evolved

ソースコード入力にはショートコードを使用する。ショートコードは手打ちだがそこまで手間はない。

入力方法

ショートコードを使ってソースコード表示。ショートコードの名前はプログラム言語名。以下のサンプルでは「cpp」としている。

ショートコードの仕様

このショートコードを入力するとタグが入る。

ビジュアルモードでショートコードとソースコードを入力。この段階では「段落」になっている。

一度テキストモードに戻す。

ビジュアルモードにすると先ほどのコードが「整形済みテキスト」に切り替わる。

ショートコードなので違和感なく使えるが自動で整形済みテキストに切り替わるのがちょっと使いづらい。ショートコードの手打ちもやや微妙。

デフォルトでの見た目

スクロールバーの表示は調整可能である。そのままでも見た目は悪くない。

Enlighter – Customizable Syntax Highlighter

初回に表示されるコードエディターは使いやすいがその後使えないのが謎。日本語サポートがないのもイマイチか。

入力方法

プラグインを入れると「Code Insert」ボタンが表示される。入力したい場所でこのボタンをクリック。

ボタンを押すとコード編集画面が表示される。このエディターであればインデントそのままでソースコードを貼り付けることができる。入力したら「OK」ボタンをクリック。

ビジュアルエディターに戻るとソースコードが表示される。コードはこの状態で編集できるが貼り付けたタイミングで半角空白が削除されてしまう。

編集時にエディターを開けないのがネック。WordPressのビジュアルエディタから編集すると半角空白の貼り付けができない。入力したコードはpreタグで囲まれている。

デフォルトでの見た目

ちょっと文字は小さいが問題なさそう。

Highlighting Code Block

シンプルで使いやすいが編集はテキストエディタがメインとなる。

入力方法

ソースコードを入力したい位置でドロップダウンから言語を選択。

タグが挿入される。

テキストエディタに切り替え。preとcodeタグが入力される。

preタグがあるので半角空白も貼り付け可能。

ビジュアルエディタに切り替え。preタグ内に貼り付けたので半角空白ありで整形されている。

デフォルトでの見た目

シンプルでよい。

使い勝手検証

結論を言うとソースコードが入力しやすい「Enlighter – Customizable Syntax Highlighter」がおすすめ。

半角空白の貼り付け問題

WordPressのクラシックエディタにテキストを貼り付けると半角空白が削除されてしまう。

preタグ

半角空白をWordPressに貼り付けるには「テキストエディタ」を使いpreタグで囲む必要がある。preタグで囲んでいれば貼り付けたときに半角空白が削除されないのでインデントそのままで整形される。

貼り付けの対応比較

基本はテキストエディタでソースコードを貼り付ける。編集もテキストエディタが必要。それ以外だと半角空白が削除されてしまう。「Enlighter – Customizable Syntax Highlighter」だけは専用エディタで半角空白の貼り付けが可能。この専用エディタだけが少ない手順でソースコードの貼り付けできる。コード入力のしやすさを考えればこれ。

設定の使いやすさ

日本語対応でシンプルな「Highlighting Code Block」が圧倒的に使いやすい。手間をかけずに導入したいならこれ。

結局どれがいいのか

自身が使いたいプラグインを真剣に考えてみた。導入の手間を考えると「Highlighting Code Block」が有利。入力のしやすさでは「Enlighter – Customizable Syntax Highlighter」が抜きん出ている。「入力のしやすさ」か「導入のしやすさ」どちらを選ぶかである。ソースコードを記載した記事を何度か書いたがやはり「入力のしやすさ」を優先したい。入力の手数が少ない「Enlighter – Customizable Syntax Highlighter」が筆者の最終的な結論となる。

まとめ

気になったのでソースコード入力プラグインを調べたらすこし沼ってしまった。他にあった比較サイトも参考にしたが最終的には使ってみないと何がいいかわからなかった。

やはり入力の手間が少ないツールが使いやすいです。