WordPressでソースコードを貼付・表示するHighlighter一覧

2018年11月24日2018年12月1日

プログラミング系の記事を書いていてソースコードを紹介する際コードを見やすく表示できる機能、Highlighterが欲しくなります。実際どれを使えばいいか迷うほど多く開発されています。本記事ではWordPressでソースコードをハイライト表示させるツールとそれぞれの特徴についてライブラリ型、プラグイン型、ウェブサービスの分けて紹介します。

1. ライブラリ型
2. プラグイン型
3. Webサービス型
- 3.1. Gist(GitHubのサービス)
- 3.2. srctohtml
4. どれを選べばいいか

ライブラリ型

取得したライブラリファイルを子テーマフォルダへアップロードして使用するタイプのHighlighter。プラグインと比べて軽いが、少々導入に手間がかかる。

Highlight.js

Highlight.jsというJavaScriptライブラリ。189コのプログラミング言語をサポートし、89種の表示styleがある（2018年11月時点）。機能はコードをハイライト表示するのみとシンプル。非常に軽い。人気。

https://highlightjs.org/

Prism.js

こちらも軽量のJavaScriptライブラリ。対応言語は153コで、表示styleは8種（2018年11月時点）。拡張機能として手軽に、行番号や指定した行の強調表示、使用言語表示、コピーボタン設置などが追加できる。こちらも人気。

https://prismjs.com/

Google code-prettify

名前の通りgoogle開発のJavaScript ライブラリ。 C , Python, HTML, CSS, JavaScript, Makefile等主要なプログラミング言語に対応しているが、マイナーな言語は拡張機能で対応する必要がある。表示styleは5種（2018年11月時点）。上記2種のようなWordPressのフォルダにアップロードして使用する方法のほかに、オートローダーを使って簡単に設置する方法がある。使用者があまりいないのか日本語情報は少なめ。

https://github.com/google/code-prettify

プラグイン型

WordPressの無料プラグインとして配布されているタイプ。導入が非常に容易で扱いやすいですが、ほかのタイプと比べてサイトがやや重くなる可能性があります。ライブラリ型では必要な言語のみに対応するよう選択出来ますが、プラグイン版では全言語・全機能が備わっているイメージです。

WP Code Highlight.js

ライブラリ型で紹介したHighlight.jsのプラグイン版です。SyntaxHighlighter、Prettify、CrayonSyntaxHighlighterと互換性があるため、他のハイライターからも移行可能。

https://ja.wordpress.org/plugins/wp-code-highlightjs/

Prism Syntax Highlighter

Prism.jsのプラグイン版。

https://ja.wordpress.org/plugins/ank-prism-for-wp/

Code Prettify

同様。

https://ja.wordpress.org/plugins/code-prettify/

Crayon Syntax Highlighter

使用者が多く日本語の開設情報も豊富な印象。初心者でも簡単にフォントサイズやデザインの変更したり、行番号の付与や強調表示等を指定でき、カスタマイズ性が非常に高い。重いとの口コミが多く、最終更新が2015年以降止まっているのが懸念点。

https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

Mivhak Syntax Highlighter

130語以上のプログラミング言語対応、テーマも36種類と申し分ない。軽量化されたCSSとJSから、言語スクリプトとテーマが要求に応じてロードされるらしいがCrayon Syntax Highlighterと同じくらい重そうな感じ。コードの部分だけフォントサイズ指定できる。

https://ja.wordpress.org/plugins/mivhak/

それぞれプラグインのサイト表示速度への影響を比較してみましたので、こちらもご参考頂ければ

Syntax Highlighter系プラグインのサイト表示速度比較

Webサービス型

Web上でソースコードを埋め込み用タグに変換し、そのタグをWordpressのテキストエディタに貼り付けることでハイライト表示できるようになるタイプのHighlighterです。

Gist(GitHubのサービス)

GistはGitHubのコード共有サービスです。Gistにコードをuploadすると表示用のタグが出力される。GitHubに登録する必要がありますが、逆にGitHub側でコードを編集・管理できるのが利点(テキストエディタで編集すると、<pre></pre>や<br></br>等のタグをいじるのがややこしい)。

https://gist.github.com/discover

srctohtml

登録不要で簡単にコードを埋め込み用HTMLタグに変換できる。対応言語がJavaScript, C++, PHPとやや少なめ。

http://marginalsoft.com/tools/srctohtml/

どれを選べばいいか

何を重視したいかによってどのツールを使うかが決まるともいます。簡単にそれぞれの向き不向きをまとめましたので参考にして頂ければ。あとはハイライト時のデザインは気になるかどうかも大事ですね。

ライブラリ型	とにかく動作の軽さ・表示速度を重視
プラグイン型	導入の手軽さ重視（プラグインによってはそこまで重くもならない）
Webサービス型	コードの管理機能に魅力を感じる人、GitHub登録済（Gist）あまり埋め込む機会が少ない人（srctohtml）