記事内にソースコードを表示させるプラグイン！Crayon Syntax Highlighter

なんか最近綺麗なコードを見かけるけど、HTMLの中に書いたらバグっちゃうんじゃないの・・・？っていう方におすすめ！記事内にソースコードを入れることのできるwordpressプラグイン、CrayonSintaxHighlighterのご紹介をします。

CrayonSintaxHighlighterってなんぞ？

記事内にソースコードを表示させるwordpressプラグイン

CrayonSintaxHighlighterはWordpressの記事内にソースコードを表示させることのできるプラグインです。しかも、ただ表示させるだけではなく、綺麗に表示させることのできるプラグインです。

たとえば以下のソースコード

ほら、綺麗でしょ！今度はテーマを変更して記述してみます。

今度は黒くてシックな感じになりました。おしゃれに自分好みに設定できるのも大きな点ですね。

CrayonSintaxHighlighterを導入したい！

CrayonSintaxHighlighterの導入方法ご紹介

まずはWordpressのダッシュボードのプラグインの新規追加からCrayonSintaxHighlighterを追加します。

そして、設定→Crayonをクリックします。

 

設定画面で、以下のように設定します。画像に載っていないところは好みなので、後々見ていけば良いです。まずは使えるようになりましょう。

 

これで更新をすれば、設定は反映されます。そしたら記事投稿画面のビジュアルビューではなくテキストビューで

Crayonのボタン発見！！！！あとはソースコードを貼ってテーマを指定してあげるだけです。crayonのボタンを押して指示通りに設定すれば迷わないはずです。簡単ですね！

まとめ

ソースコードなどは普通に挿入してしまうと、簡単にバグが起きてしまいます。しかし、どうしてもわかりにくい部分はコードで伝えたい。なんてことありますよね。正しいタイミングで正しく相手に情報を伝えることのできる能力も、ブログを書く人の大切なスキルだと思います。