【WordPress】ソースコードの紹介に便利なプラグイン「Crayon Syntax Highlighter」を導入！コードを見やすくハイライト表示してくれる！

更新日：2013/11/24

@Mori2ndです。このブログでもHTMLやObjective-Cなどのソースコードを紹介していこうと考えているので、ソースコードをハイライト表示してくれるWordPressプラグイン「Crayon Syntax Highlighter」を導入してみました。

別に運営しているブログでも同じようなプラグインを利用していますが、今回導入したプラグインのほうが見やすくていい感じですね。さっそくご紹介します！

ソースコードの紹介に便利なプラグイン「Crayon Syntax Highlighter」

プラグインの入手方法ですが、WordPress管理画面のプラグインから検索するか、下記のプラグインページからダウンロードすることもできます。

プラグインページからダウンロードした場合は、FTPのソフトでサーバーの「plugins」フォルダ内にアップロードしてください。

プラグインを有効化したら、利用開始できます。

デフォルトの設定でもOKなんですが、管理画面からフォントサイズやカラー、ツールバーの表示方法などがカスタマイズできるようになっています。

せっかくなので好みの表示方法に変更です。はじめに変更したのが、ツールバーの表示方法。

デフォルトではマウスカーソルがきたときに、ツールバーが重ねて表示されるようになっています。

これだと画像のように重なった部分が見えなくなってしまうので変更しました。

ツールバーが表示されるときに、コードを押し下げて表示するようにもできますが、マウスの動き次第で画面がグラグラしたように見えて個人的に気持ち悪い。。。

というわけで、ツールーバーは常に表示されるようにしてみました。

これで、ツールバーの機能にもアクセスしやすくなったので気に入ってます。

後は、タグの機能。

個人的には通常のHTMLタグとしても使えるコードを利用したかったので、preタグを利用するようにしました。

下記のようにソースコード部分をタグで囲みますと。
補足：＜＞は全角にしていますが、実際は半角にします。

＜pre class="lang:default decode:true " ＞＜/pre＞

ソースコードがハイライト表示されます。

// A sample class
class Human {
    private int age = 0;
    public void birthday() {
        age++;
        print('Happy Birthday!');
    }
}

// A sample class

class Human {

private int age = 0;

public void birthday() {

age++;

print('Happy Birthday!');

}

投稿画面にも「crayon」ボタンが追加されるので、このボタンからタグを挿入することもできます。簡単でいいですね。

ちなみに投稿ごとに設定を変えることもできますよ。

このプラグインの導入でソースコードの紹介がやりやすくなりました。

冒頭でも書いたように、スマホ向けアプリの開発で勉強したことや、ブログのカスタマイズなども紹介したいと思っているので、このプラグインが威力を発揮しそうです！

プラグインはこちらのサイトを参考にさせてもらいました。ありがとうございました！