こんにちは、コンポタ課長です。皆さんは、
Pythonのソースコードをきれいに載せたいから、プラグイン使おっと！
うわ…同じようなのがいっぱいあってなんのこっちゃ…泣
という悩み、お持ちではないでしょうか？
その気持ち大変わかります。何を隠そう私も過去同じように悩んでおりまして、
- 違いが分からない（説明が英語というのも分かりづらさに拍車をかけている）
- 紹介記事がない
- 全部入れて試すなんて面倒すぎる
という状況の中泣く泣く全部入れて試すという手段をとった経験があります。(Ｔ T)
ですので皆さんが同じ悩みで躓かないよう、この記事では備忘録を兼ねてプラグイン５つを簡単に紹介していこうと思います。
皆さんが気になるのは、
- 実際にどんな感じで見えるのか？
- カンタンに導入できるか？
- どんな特徴があるのか？
といった辺りだと思いますので上記を重点的に見ていきましょう。
今回使ってみる５つのプラグイン
各プラグインの「導入方法」と「特徴」
はじめに、導入方法や特徴をざっくりと表にまとめてみました。
| プラグイン名 | 導入方法 | 特徴 | インストール数 |
|---|---|---|---|
| 1. Code Prettify | インストールのみ（既存のソースコードブロックに適用される） | 導入が簡単 | 3000回以上 |
| 2. Code Syntax Block | インストール後、既存のソースコードブロックで言語の設定 | 導入が簡単 更新頻度が高い | 8000回以上 |
| 3. CodeMirror Blocks | インストール後、専用のブロックを挿入する | クリップボードへのコピー機能がついている エディタ画面でどのように色がつくか確認できる | 6000回以上 |
| 4. Enlighter – Customizable Syntax Highlighter | インストール後、専用のブロックを挿入する | クリップボードへのコピー機能など高機能 インストール数が多い | 20000回以上 |
| 5. Highlighting Code Block | インストール後、専用のブロックを挿入する | クリップボードへのコピー機能がついている 更新頻度が高い | 10000回以上 |
カンタンに結論
先に総評をカンタンにお話ししますと、
結局のところどれを使ってもある程度きれいに表示される
という無難な結論に至りました。
Pythonの構文はどのプラグインも同じ仕組みで解析しているようで、「このプラグインだと変数名が認識されない！（色がつかない！）」というような現象は見られませんでした。
ですので、基本的にはどのプラグインを選んでも問題なく使えると思います。
その上で、これら5つからプラグインを選ぶ際は以下のような点に着目すると、より自分のニーズに合ったプラグインを選べるかと思います。
- 導入が簡単か
- 欲しい機能があるか
- 更新頻度が高いか（Wordpressがバージョンアップしても問題なく使える可能性が高まる）
ちなみにこれらを考慮した私のオススメは
- 1位「5. Highlighting Code Block」
- 2位「3. CodeMirror Blocks」
- 3位「1. Code Prettify」
の３つです。
- 突出した「独自の機能」みたいなものは無いが、それぞれの要素が高い水準で一通りそろっており、他のプラグインの良い所取りのような性能をしている
- 専用のブロックを使う必要はあるが、クリップボードへのコピー機能などほしい機能がそろっている
- このプラグイン独自の機能として、エディタ画面の時点でソースコードへの色付けが行われるので記事を公開した時の想像がしやすい
- WordPressのソースコードブロックに適用されるので、専用のブロックを使わず手軽に導入できる
- そのためプラグインをインストールするだけで、すでに公開済みの記事にもソースコードへの色付けが反映される点が魅力（特に記事数が多いブロガーにオススメ）
当ブログでは「5. Highlighting Code Block」を使用しております
要望がありましたらプラグイン個別の詳しい導入記事を書きたいと思います。
ここからは、各プラグインを実際に使ってみた様子を画像で紹介していきます！
５つのプラグインそれぞれを使った様子を画像で紹介
上でオススメのプラグインを紹介はしましたが、それぞれのプラグインにしかないテーマ（色の付け方）もありますので、好みのプラグインがあればそれを使うのが一番だと思います。
ここからは5つのプラグインを実際に使った様子を画像で紹介していきますので、雰囲気をご覧いただいてぜひあなた好みのプラグインを見つけていただければと思います。
参考として、以下に普通のWordpressのソースコードブロックで書いたコードを置いておきます。
※ちなみにソースコードの内容は以下の記事からそのまま持ってきただけで、特に意味を理解する必要はありません。なんとなく「こんな感じで色つくんだ～」程度にご参考ください。
では、紹介していきます！
1. Code Prettify
- 導入方法：インストールのみ（既存のソースコードブロックに適用される）
- 特徴：導入が簡単
- インストール数：3000回以上
- 公式リンク：https://ja.wordpress.org/plugins/code-prettify/
オススメ度3位のプラグインです。
前述しましたが、Wordpressのソースコードブロックに適用され、すでに公開済みの記事にもソースコードへの色付けが反映されるため、導入がインストールのみでとても手軽です。
実際に使うとこんな感じになります。
カラフルでいいですね！まさに、Wordpressのソースコードブロック（プラグインなし）にそのまま色を付けたような状態になります。
クリップボードへのコピー機能などはついていないですが、とにかく手軽に手っ取り早くソースコードに色を付けたい人には特におすすめのプラグインです！
2. Code Syntax Block
- 導入方法：インストール後、既存のソースコードブロックで言語の設定
- 特徴：導入が簡単
更新頻度が高い - インストール数：8000回以上
- 公式リンク：https://ja.wordpress.org/plugins/code-syntax-block/
こちらのプラグインもWordpressのソースコードブロックに適用されるタイプです。
ただ、言語の設定(Python, HTMLなど)が必要になるため、「1. Code Prettify」と比べると少し導入に手間がかかります。（それでも手軽ですが）
あとこちらのプラグインは更新頻度が高く、Wordpress本体の更新があっても数日以内にそれに適したアップデートが行われるため、不具合が起きる可能性が小さい点も魅力です。
実際に使うとこんな感じになります。
こちらもクリップボードへのコピー機能などはついていないので、「手軽に導入したいし、なるべく不具合が少ないほうがいい」という人に向いているプラグインです！
3. CodeMirror Blocks
- 導入方法：インストール後、専用のブロックを挿入する
- 特徴：クリップボードへのコピー機能がついている
エディタ画面でどのように色がつくか確認できる - インストール数：6000回以上
- 公式リンク：https://ja.wordpress.org/plugins/wp-codemirror-block/
こちらはオススメ度2位のプラグインです。
クリップボードへのコピー機能がついている点も魅力ですが、こちらのプラグインの最大の特徴は「エディタ画面でどのように色がつくか確認できる」という点にあります。
筆者は、記事を作っている時に「いちいち下書き保存してプレビューを押さないとソースコードが白黒のままでイメージが掴みにくい…」というのが嫌な人なので、エディタ画面で色付けが確認できるのはとても魅力的に感じます。
実際に使うとこんな感じになります。
ちなみに上の画像で適用しているテーマは「Panda-syntax」というものになります。けっこう隈なく色付けをしてくれるので、見やすくてオススメですよ！
4. Enlighter – Customizable Syntax Highlighter
- 導入方法：インストール後、専用のブロックを挿入する
- 特徴：クリップボードへのコピー機能など高機能
インストール数が多い - インストール数：20000回以上
- 公式リンク：https://ja.wordpress.org/plugins/enlighter/
こちらのプラグインは「クリップボードへのコピー機能」や「ソースコードだけを表示するモード」などがついており、高機能な点が魅力なプラグインです。
またインストール数が多いため、コミュニティが大きく、使い方や不具合の治し方といった便利な情報が集まりやすい点も良い点ですね。
実際に使うとこんな感じになります。
ちなみに上の画像で適用しているテーマは「Dracula」というものになります。シックでかっこいいですね！
5. Highlighting Code Block
- 導入方法：インストール後、専用のブロックを挿入する
- 特徴：クリップボードへのコピー機能がついている
更新頻度が高い - インストール数：10000回以上
- 公式リンク：https://ja.wordpress.org/plugins/highlighting-code-block/
こちらはオススメ度1位のプラグインです。当ブログでもこのプラグインを使っています！
こちらのプラグインは、他のプラグインの良い所を集めたバランスのいいプラグインという表現が一番しっくりくるプラグインです。
「クリップボードへのコピー機能がついている点」や「更新頻度が高い点」が魅力で、またインストール数もそれなりに多いためコミュニティの大きさも期待できます。
実際に使うとこんな感じになります。
ファイル名やコピー機能が右上にまとまっていてコード全体の見通しがいいですよね。平均点が高く使いやすいプラグインがいい、という人にはオススメです！
なお、このプラグインの色合いを「Qiita風」や「VSCode風」にカスタマイズする方法を以下の記事で紹介しています。
とても見やすくなって、超オススメのカスタマイズですよ！
おわりに：見た目等の好みで選んでも問題ありません
今回はPythonのソースコードをきれいに表示するWordpressプラグイン５つを紹介してみました。
それぞれのプラグインの雰囲気や違いは掴めましたでしょうか？
プラグイン選びについては、私のオススメとしては「Highlighting Code Block」や「CodeMirror Blocks」というプラグインになりますが、それ以外の３つも有用なプラグインでそれぞれに良い点があるので見た目などの好みで選んでしまっても問題ないと思います。
Pythonコードが綺麗に表示されると、記事全体の完成度も上がっていいことづくめですよ！
