旧サイトからいくつか記事をリストアしていたのですが、その中にソースコードを含んだものがいくつかあります。
旧サイトでは独自の Syntax Highlighterモジュールを利用していたのですが、本サイトでは特に導入していませんでした。そのため多少見づらくなっていたので Syntax Highlighter プラグインを導入することにしました。
せっかくWordPressをバージョン5に上げたのでGutenberg対応のブロックとして機能してくれるものが嬉しいのですが WordPress 公式で Syntax Highlighter プラグイン を探すと更新されてないものが多くてあまり選択肢が少ない気が致します。
最近はQiitaとかにMarkdownで書くのでそういう需要がないのでしょうか。兎も角、比較的良さげなプラグインを４つ見つけましたのでどれを導入するか比較したいとおもいます。
公式から良さげな下記４つのプラグインをピックアップして比較しました。他に良いものがあれば教えてほしいです。
項目は独自調査結果です。今後のアップデートにて違いが出てくる可能性があります。最新情報は公式をご覧ください。
| プラグイン | Code Prettify | Enlighter – Customizable Syntax Highlighter | SyntaxHighlighter Evolved | CodeMrror Blocks |
| バージョン (2020/10) | 1.5.0 | 4.4.1 | 3.5.5 | 1.2.3 |
| 有効インストール数 (2020/10) | 2,000+ | 20,000+ | 40,000+ | 2,000+ |
対応言語数 | 32 | 51 | 31 | 100+ |
| テーマ(スキン)数 | N/A (手動でCSS適用は可) | 13 | 6 | 56 |
| 行ハイライト機能 | N/A | あり | あり | あり(行指定なし) |
| 行番号オフセット | N/A | あり | あり | あり |
| RAW出力対応 / コピー機能 | N/A | あり | N/A | あり |
| タイトル設定 | N/A | 個別設定可能 | 全体設定のみ可能 | 個別設定可能 |
| Gutenbergブロック対応 | <pre>タグ（コードブロック） | 専用ブロック | 専用ブロック | 専用ブロック |
サンプルのHTML、TypeScript (JavaScript)、JSONでの各プラグインの出力結果など。基本的にデフォルト設定のまま、最低限の設定変更での評価となります。導入前の参考になれば幸いです。
100% automatic code highlighting using the Prettify library. No shortcodes, no classnames, fully automatic and pure awesome.
Googleが開発したソースコード整形をしてくれるJavaScriptのライブラリ、code-prettify-lib(Fork) をWordPressのプラグインとして利用可能にしたものになるようです。このライブラリは<pre>タグを対象に動作するのでプラグインも対象ブロックは基本的にはコードブロック（<pre>タグ）となります。しかし、Gutenbergのブロックは <pre>タグでラップされるのですべてのブロックに対して動いてしまいます。
プラグインの設定項目はありません。有効にすればすぐに使えます。こちらもシンプルな作りになっていますが、ただライブラリを読み込んでいるだけともいえます。Gutenberg を意識した作りとはなっていません。
下記が動作結果になります。
整形済みブロックにHTMLコードを貼り付けると本当にHTMLとして解釈されてしまったのでHTMLはソースコードブロック（<code>タグ）での結果となります。これはGutenbergのバグっぽいです
プラグインの動作結果は、行番号など付かずハイライトもシンプルな印象です。
SyntaxHighlighter Evolvedプラグインと同時に動かすとSyntaxHighlighter Evolvedブロックのコードの表示が崩れることがありました。これは先述したすべてのブロックに対して動いてしまうという弊害が出てしまっていると思います。
プラグインを外した際の影響は特にありません。元のコードがハイライトなしの機能オフ状態になります。お試ししやすいプラグインといえます。
対象言語は、下記となっているようです。
Apollo
Basic
Clojure
CSS
Dart
Erlang
Go
Haskell
Lasso
Lisp, Scheme
LLVM
Logtalk
Lua
MATLAB
MLs: F#, Ocaml,SML
Mumps
Nemerle
Pascal
Protocol buffers
R, S
RD
Rust
Scala
SQL
Swift
TCL
LaTeX
Visual Basic
VHDL
Wiki
XQ
YAML
All-in-one Syntax Highlighting solution. Full Gutenberg and Classic Editor integration. Graphical theme customizer. Based on EnlighterJS.
オープンソースで開発されている Syntax Highlighter のEnlighterJSのWordPressプラグインになります。こちらは本家でプラグイン対応を行っています。 Gutenberg 上のEnlighter sourcecodeというブロックを使って利用します。
評価時点では Gutenberg 対応はBETA扱いでデフォルトで有効となっていません 。プラグインの設定で Gutenberg Editor Pluginを有効にすると Enlighter sourcecodeブロックが使えます（v3.9.0よりデフォルトで有効になりました）。
ついでにEnable DRIもオンにしてみました。こちらは必要に応じて Enlighter スクリプトが最適化されて読み込まれる設定のようです。その他多数設定項目がありますがまだ理解できておりません。必要に応じて設定変更すれば良いと思います。
下記が動作結果になります。
個別のブロックにタイトルと5行目をハイライトするように設定を入れました。
HTMLのみ行番号をグローバル設定とは別に明示的に表示させるようにしました。 グローバル設定 でも行番号は表示する設定となっているのですが反映されていないようです（v3.9.0より反映されるようになりました）。この辺り、まだBETA対応といったところでしょうか。
タイトルはcode groupのIDを設定すると個別にタイトルを設定できるようになります。いちいちIDを設定するのがめんどくさいです。IDを同じにした場合の使い方がよく分かりません。code groupの機能は複数ソースコードをタブ化してまとめて表示するためのものです。ですが、現状ではタイトルを設定するにはIDも設定が必要ですので仕方ありません。通常は自動的にIDを振って、手動で設定したい場合は変更可能にしておけばよいのに、と思いますが。
その他、個別のブロック設定では対象言語や複数ある中からテーマ（スキン）を指定したり行番号のオフセット指定が可能です。
マウスを行の上に持っていくとその行がハイライトされます。またRAW出力も切り替えられるボタンが現れます。
専用ブロックとなっているので他のプラグインへの干渉は、試した限りではありませんでした。
プラグインを外した際の影響は機能が解除となるだけで見た目は変わりません。 Gutenberg 上ではそのまま維持するかカスタムHTMLに変換するか削除の3択となります。
対象言語は、下記となっているようです。
AVR-Assembly
Assembly
C
CSS
CSharp
Cpp
Cython
Diff
Generic
HTML
Ini
JSON
Java
Javascript
Kotlin
LUA
MarkDown
Matlab
NSIS
NoHighlight
PHP
Python
RAW
Ruby
Rust
SQL
Shell
Squirrel
Unit
VHDL
XML
Easily post syntax-highlighted code to your site without having to modify the code at all. As seen on WordPress.com.
メジャーなハイライターの中のひとつ、 SyntaxHighlighter をWordPressのプラグインとして利用可能にしたものになるようです。プラグインを有効にすると Gutenberg 上の SyntaxHighlighter Codeというブロックを使用できるようになります。
設定項目は全体とブロック個別の設定ができます。
全体設定では、 SyntaxHighlighter のバージョン指定、テーマ、タイトルなどになります。タイトルは個別で指定したい場合があると思いますがこの機能を使うと統一した物となってしまうので使い勝手が良くない気がします。
個別設定では対象言語の指定、行番号オフセット、指定行ハイライト、URLをクリッカブルにするかどうか等があります。
動作結果は下記となります。
全体設定でタイトルと個別設定で5行目をハイライトするように設定を入れました。
結果からわかるように 見事に1行ずれてしまいます。コピペの仕方が悪かったのかと何度も確認したのですがそういう問題ではないようです。プラグインの不具合か Gutenberg の不具合なのか分かりません。今後、修正されることを期待いたします。
専用ブロックとなっているので他のプラグインへの干渉は、試した限りではありませんでした。
Enlighter と同様にプラグインを外した際の影響は機能が解除となるだけで見た目は変わりません。 Gutenberg 上ではそのまま維持するかカスタムHTMLに変換するか削除の3択となります。
対象言語は、下記となっているようです。
actionscript3
bash
clojure
coldfusion
cpp
csharp
css
delphi
diff
erlang
fsharp
groovy
html
java
javafx
javascript
latex (you can also render LaTeX)
matlab (keywords only)
objc
perl
php
powershell
python
r
ruby
scala
sql
text
vb
xml
CodeMirror Blocks is useful for developers blog, tutorial site where display formatted (highlighted) code of any program. With support of 100+ Languag …
オープンソースで開発されているコードエディタ CodeMirror のプラグイン版になります。いくつか CodeMirror を使ったプラグインはあるようですが、こちらは比較的メンテナンスされているようです。プラグインを有効にすると Gutenberg 上の CodeMrror Block 1.1というブロックを使用できるようになります。
特徴はサポート対象言語とテーマ(スキン)の数でしょうか。これを入れておけば大抵のプログラミング言語はカバーできるのではないでしょうか。また、コードエディタらしく、編集可能にできたりHTMLなどは実行結果の出力ボタンが有るのも特徴です。
惜しむらくは指定行ハイライトが無いことです。
設定項目は全体とブロック個別の設定ができます。
全体とブロック個別の設定の違いはほぼ無いです。フルスクリーン設定をOn/Offの違いだけでしょうか。全体設定がデフォルトの動作を決めます。
Language Labelをファイル名にすると自由に文字列を入力できるのでタイトル代わりになります。ただ環境の問題なのか、全体設定のLanguage Labelをファイル名にすると不安定な動作になる気がします。一旦別の値にセットして戻すと安定しました。
専用ブロックとなっているので他のプラグインへの干渉は、試した限りではありませんでした。
Enlighter 、SyntaxHighlighter Evolved と同様にプラグインを外した際の影響は機能が解除となるだけで見た目は変わりません。 Gutenberg 上ではそのまま維持するかカスタムHTMLに変換するか削除の3択となります。
動作結果は下記となります
対象言語は、多数ありますのでこちらを参照願います。
Code Prettifyは対象言語が多く、導入が簡単で使う上でも特に細かいことは意識しないで済むので、不特定多数が利用するサイトでは便利そうです。
EnlighterはまだBETA対応ながら Gutenberg 対応しており（v3.9.0よりデフォルトで有効になりました）、機能がリッチで将来性が期待されます。
SyntaxHighlighter Evolvedも Gutenberg 対応していますがタイトルが個別設定できない等、細かい部分が気になりました。
CodeMirror は行指定ハイライトができないのが残念ですが、早く出会っていたらこちらを使っていたかもしれません。
機能や対象言語で選択肢が変わってくるとは思いますが、今後のアップデートに期待して Enlighter を使いたいと思います。
