どうも、キーです。
前回はgoogle-code-prettifyというJavaScriptを使いましたが、今回はCrayon Syntax Highlighter(くれよん　しんたっくす　はいらいたー)というプラグインを使ってソースコードを表示したいと思います。

なお、本サイトではCrayon Syntax Highlighterのプラグインは利用していないので、説明は画像が中心です。

公式

サンプル

こんな感じになります。

画像でざっくり説明します。

プラグインを検索してインストールします。

インストールが終わったらプラグインを有効化してください。

記事投稿ページのテキストモードに追加された「crayon」ボタンを使います。

ソースコードを入力したらAddボタンで確定。
※ツールバーを常に表示しときたい方は次を先に読んでから確定してください。

ツールバーを常に表示する場合などはここを設定しておけば良い。

エディタ上にでる。

ビジュアルエディタの「<>」ボタンから編集画面にいけます。
ただ、前のツールバーの設定なども初期値が入っているので、もう一回すべて編集してから確定する必要があります。

サンプルと同じです。
上の画像取るときは忘れてましたがタイトルにテストと入れています。

導入がものすごく簡単なのはいいですね。
テーマの種類も多く、機能性はとても高いと感じました。

あと、ここに書いてある方法でうまく行かない場合もあると思います。
そんなときにはググりましょう。
ネットはソースを複数確認するのが大事です。

次回はGistを使ってみようと思っています。

よく使われるプラグインなので他のブログさんもまとめていますね。
筆者が読みやすく学習の参考にさせていただいたサイトさんたちです。