※ 下記に追記あり
ソースコードをキレイに表示してくれるプラグインで有名というか皆さん使われているSyntaxHighlighter Evolvedわたしも以前使用しておりました。 が、最近ちょくちょく見かける
1 2 3 4 5 |
public class HelloWorld { public static void main (String[] args) { System.out.println("Hello World !!"); } } |
こんな感じのモノを見かけることが多くなりかなり気になってました。
これは、一体なんというプラグインなのだろうと調べてみると Crayon Syntax Highlighterというものだそうで早速使ってみることにしました。
『Crayon Syntax Highlighter』
プラグインの追加方法は、WordPressのダッシュボードから プラグイン → 新規追加 → 「Crayon Syntax Highlighter」で検索して「いますぐインストール」するだけ。。
『Crayon Syntax Highlighter』の使い方
使用タグは、[crayon attributes] ここにコードを書く [/crayon] <pre> ここにコードを書く </pre>
タイトルをつけて、3行目をハイライトさせたい場合は、 [crayon attributes mark="3" title="HelloWorld "] ここにコードを書く [/crayon]
何よりも感動したのが、この方法!! Visual Editor toolbarに『crayon』があるのでそれを使うというもの

ボタンを押すとこのような画面が出てきます。

ちなみに、同じページで違うテーマが適用できるのかテストしてみた結果がこちら。どうやら出来るみたいですね(※ テーマは、3種類あります。)
1 2 3 4 |
public static void main (String[] args) { System.out.println("Hello World !!"); } } |
また、外部ファイルを読み込むことが出来るので、わざわざソースをコピペしなくて済む!んです。
そして、何よりもおぉ!!と思った部分が、Mini Tagsとして [css] ここにコードを書く [/css] が使用できること。。 これ、以前私はSyntaxHighlighter Evolvedを使用していたのですが、ここで使用するタグがこれだったのです!!ということは。。修正しなくても大丈夫という訳で。。喜んでおりました。(細かい設定は、やはり修正が必要ですけど。。)
設定画面が素晴らしい
設定画面でいろいろと設定することが可能です。 プラグインのCSSをいじらなくてもある程度の位置がここで設定出来るというのはかなりいいなと思いました。
あと、私はwordpress日本語を使用しているので、英語の方はもしかしたら設定画面が日本語でないかもしれませんので、日本語化するための詳細手順が書かれたサイトを紹介しておきたいと思います。
追記
バージョン 1.12.1 にアップしたところ投稿画面からコード挿入するはずのボタンが動作しなくなりました。(2012/10/8 現在) 投稿画面のブログエディタのモードを、一度「ビジュアル」に切り替えて、再度「HTML」を選択してから「crayon」ボタンを押すと 正常にcrayonのエディタが表示されました。 なにが原因なのかわからないのでとりあえずこの方法でバージョンアップを待ちたいと思います。
追記2 バージョン 1.13 にアップしたところ投稿画面からコード挿入ボタンが動作できるようになりました。(2012/10/14 現在) これで一安心です。
Pingback: Wordpressでソースコードをキレイに表示してくれるプラグイン Crayon Syntax HighlighterとSyntaxHighlighter Evolved | WordPress memo()
Pingback: 不具合があったので変更 「Crayon Syntasx Highlighter」 - さぶの部屋()
Pingback: SyntaxHighlighterを変更 | みかみんのプログラミング日記()