【WPプラグイン】ソースコード埋め込みテーブルの表示方法

どうも佐々木です。

カスタマイズブログでよく見かけるソースコードを綺麗に表示するあのテーブルを作りたくありませんか？

どちらかというと僕は見る側だったのですが、ソースコードをそのままコピーできるブログ運営者さんのサイトは非常に助かるしありがたかったです。

今まではほとんど自分がコンテンツとして使用する機会はなかったのですが、前回の記事で必要性を感じたので改めてソースコードを綺麗に表示できるプラグインについて調べてみました。

以下に紹介しようと思います。

今回の内容

ソースコードをブログに表示する必要性について

今までは特に必要性を感じることが無かったと前述したのですが、仙台カフェのような解説ブログを運営し始めると必須プラグインになりますね。

主な理由は３つ。

ワードプレスのカスタマイズブログには必須プラグインと言えますね^^;

「ココにある記述にコレを追加して下さい」という説明をしたい時に、ソースコードを全角表示する方法はありますが、それはHTMLソースではないので、コピペした後に半角と全角を修正する手間が必要になるので間違いも増えてしまいます。（僕も初心者のため詳しい説明は他サイトに譲ります）

ソースコードをそのままコピペで使ってもらうためにもソースコードを記事内に綺麗に表示するプラグインは必要不可欠と感じました。

調べてみると以外と多くのプラグインが存在することが分かります。

それぞれの大きな違いは表示の仕方やデザインの違いであって、ソースコードを記事内に埋め込むことができるという点ではどれも優秀なプラグイン達です。

僕が参考にした解説サイトの紹介と共にざーっと列挙し、最後に僕が選んだプラグインについても解説します。

Crayon Syntax Highlighterは表示スタイルが豊富で、その数なんと５０種類以上！

表示スタイルも自分でカスタマイズできるのであなた好みのソース表示テーブルが見つかりそうです^^

導入方法などは以下サイトを参照↓

[blogcard url=”http://www.starlod.net/crayon-syntax-highlighter.html”][/blogcard]

Syntax Highlighter Evolvedを使用しているブロガーさんが９割以上！？

今回「ブログの記事内にソースコードを綺麗に表示するおすすめプラグイン」をテーマにかなり検索しまくりましたが、そこで見つかるほとんどのサイトで紹介されていたのがこのSyntax Highlighter Evolvedです。

逆にそれ以外のプラグインを探す方が至難の技でした！笑

OZPAさんのブログでも詳しく解説されてあります↓

[blogcard url=”http://ozpa-h4.com/2012/03/06/wordpress_plugin_syntax_highlighter_evolved/”][/blogcard]

このプラグインはWordpress内のプラグイン検索中に発見したプラグインで、評価実績も豊富でしたのでご紹介します。

何より、STINGERのテンプレートとも互換性があり、使用している人も実は多いのではないでしょうか？

上記２つのSyntax Highlighterに比べるとシンプルすぎる印象もありますが、実際に使用しているブロガーが多いのも評価数から読み取れます。シンプル好きにおすすめ。

これでもか！というぐらいブロガーさん達が実際に愛用している人気プラグインは「Syntax Highlighter Evolved」でした。

使い方やインストール方法も色々なサイトで紹介されているので僕の出番は無さそうです。笑

プラグインで選ぶなら「Syntax Highlighter Evolved」か「Crayon Syntax Highlighter」で決まり！？

ソースコードをブログに埋め込み表示するプラグインを導入する上で注意したい事を以下にまとめておきますね。

僕は専ら「ビジュアルエディター」なのですが、たまにテキストエディターも使用するので注意しなければと思いつつ、動作が重くなるのは勘弁ということでさらに調査することに…。