WordPressでソースコードをキレイに表示してくれるプラグイン『Crayon Syntax Highlighter』

2012.07.14 Category:Plugin Tag:WP Plugin

※　下記に追記あり

ソースコードをキレイに表示してくれるプラグインで有名というか皆さん使われているSyntaxHighlighter Evolvedわたしも以前使用しておりました。が、最近ちょくちょく見かける

public class HelloWorld {
  public static void main (String[] args) {
    System.out.println("Hello World !!");
  }
}

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 Syntax Highlighter』の使い方

使用タグは、［crayon attributes］ここにコードを書く［/crayon］＜pre＞ここにコードを書く＜/pre＞

タイトルをつけて、3行目をハイライトさせたい場合は、［crayon attributes mark="3" title="HelloWorld "］ここにコードを書く［/crayon］

何よりも感動したのが、この方法！！ Visual Editor toolbarに『crayon』があるのでそれを使うというもの

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

ちなみに、同じページで違うテーマが適用できるのかテストしてみた結果がこちら。どうやら出来るみたいですね(※　テーマは、3種類あります。)

  public static void main (String[] args) {
    System.out.println("Hello World !!");
  }
}

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のエディタが表示されました。なにが原因なのかわからないのでとりあえずこの方法でバージョンアップを待ちたいと思います。