WordPressの記事にソースコードを綺麗に表示してくれるプラグインCrayon Syntax Highlighter

origin_2244075454
photo credit: eisenrah via photopin cc

記事の中にソースコードを綺麗に表示しよう!

技術系のブログを書いている方の場合、ブログ記事の中にソースコードやCSSを書く事が多いと思います。

普通に書こうとすると…

#include <stdio.h>

main()

{

printf(“Hello World!!”);

}

というようになります。

わからなくはないですが、非常に見辛いですね。

これを…

このように美しく表示してくれるプラグインをご紹介します!

 

Crayon Syntax Highlighterをインストールしよう!

WordPressのダッシュボードページから、プラグイン→新規追加と進みます。

検索ボックスに”Crayon Syntax Highlighter”と入力して検索しましょう。

スクリーンショット 2014-05-20 22.27.49検索結果に出てきた”Crayon Syntax Highlighter”をインストールしましょう!

スクリーンショット 2014-05-20 22.28.14インストールが完了したら、お決まりのように有効化します。

スクリーンショット 2014-05-20 22.28.51以上でCrayon Syntax Highlighterの導入は完了です!

 

Crayon Syntax Highlighterを実際に使ってみよう!

新規投稿の編集画面に、”crayon”というボタンが追加されているので選択します。

スクリーンショット 2014-05-21 10.36.13すると下のようなダイアログが開きます。

スクリーンショット 2014-05-21 10.37.11赤で囲った部分が上から順に、

  • 言語の選択
  • 実際に埋め込むソースコード
  • テーマの選択

になっています。

それ以外にもたくさんの設定項目が並んでいますが、とりあえずデフォルトで大丈夫です。

慣れてきたら色々と変更して試してみましょう!

最後に右上の挿入ボタンを押します。

するとこのようにソースコードが綺麗に表示されます!

まとめ

エンジニアとしては、学んだことをわかりやすくアウトプットしたいものです。

Crayon Syntax Highlighterは簡単に使えて、しかも綺麗に見せてくれので、どんどん使っていきましょう!

それでは!!

mirupafshim!!