[WordPress]ブログにソースコードを貼る3つの選択肢

このブログの運営を記録を、記事として残すようにしているのだが

テーマを編集したときに、どこそこを、どう変更したかという記録を残したく、ブログにソースコードを貼る必要性が出てきた

まぁ、貼るだけなら通常のテキストとして書いておくこともできるのだが

他ブログ様の記事を見ていると、綺麗に記述されていて、何かソースコードを貼るためのちゃんとした方法があるのようなので、貼るための方法を調べた所

主な方法は3つあるらしい

Crayon Syntax Highlighterを使う方法

プラグイン式のプログラム

図のようにクレヨンの名前通りに、カラフルで綺麗な表示をしてくれる

また、上にバーがあるが、右の表示の中に、ソースコードを別ウィンドウで開けたり

ワンクリックで、ソースコード全て、選択できる操作コマンドがあり、とても使い勝手がよい

また、Windows Live Writer側にも、これと連携したプラグインが提供されており

環境を整えてやれば、Windows Live Writerからの投稿でも使えて便利

問題は、TinyMCE Advanced（自動整形するプラグイン？）といささか、相性が悪い

ビジュアルエディタとテキストエディタを往復すると、表示が崩れる

また、ソースコードの貼り付けは、テキストエディタモードでしか行えないため、致命的

TinyMCE Advanced側の設定から

「Stop removing the <p> and <br /> tags when saving and show them in the HTML editor」

の設定を外してやれば問題ないらしいが

そも、この設定も、表示切り替えの際に、崩れないようにするための設定だよなぁ・・・

あと、ネットの評判見ていると、重いといってる人らもいますが、なんだかんだで人気のプラグインなようです

SyntaxHighlighter Evolvedを使う方法

こちらも、プラグイン式

クレヨンに比べて、だいぶシンプルな印象

こちらもWindows Live Writer側に連携できるプラグインがある

設定してあげれば、Windows Live Writerからの投稿でも記述が使えるとのことだ

また、クレヨンと違いTinyMCE Advancedとの問題も、別なアプローチで解消されている様子

クレヨンだと、テキストエディタからの貼付けしかできなかったが

こちらだと、「SyntaxHighlighter TinyMCE Button」を入れてやれば、ビジュアルモードからの貼付けが可能

そんなわけで、ビジュアルモードオンリーで使うのなら

自動整形の問題について悩まなくてもよさげ

GitHub Gistを使う方法

Create a new Gist ? GitHub

外部のソースコード貼り付けサービス

プラグインを増やさなくてもよいので、理屈上、ブログの軽量・高速化にも繋がるな

こちらも非常にシンプルな表示ですね

利用には登録が必要

貼り付けたものは、公開されていたテキストを例として貼ってみたものです

てけーとに貼ってみたもので意味はわかりません

まとめ

とりあえず、私はCrayon Syntax Highlighterを使うことにしました

決め手は操作コマンドがあることです

ボタン一発でソースコードを全選択できるのは、すごい便利そうだな！と思ったのと

あまり、ソースコードを見れなていない自分にはカラフルな表示は、見やすくてとても好印象です

また、外部のサービスに頼るとなると、別ウィンドウを開かなければいけません

それだと、なんだか煩雑になりそうで、できるだけ投稿エディタ内だけで、記事作成を完結させてスピーディーに書きたいなと思ったのも理由のひとつかな

自動整形の問題も、最近はWindows Live Writerからの投稿にシフトしているのであまり、体感できていません

今後、重さや、自動整形で悩まされることもあるかもしれませんが、とりあえずはクレヨンを気にっています