WordPressで記事中にプログラムコード(ソース)を表示させる方法

どうも、せいすこうです！
開発系のブロクでソースを表示させてるのを目にする事が結構あると思うのですが、今回はこの記事中に表示しているソースコードの使い方についてまとめてみました。

プラグイン「Crayon Syntax Highlighter」

本サイト内の記事中に表示しているソースコードは「Crayon Syntax Highlighter」というプラグインを使用しています。
ソースコードを表示できるプラグインは他にも色々ありますが、これが一番使いやすくて見た目もしっくりきたので使わせて貰っています。
読み方は、Crayon Syntax Highlighter（シンタックス・ハイライター）です。

このプラグインが優れている点

さて、このCrayon Syntax Highlighterというプラグインを利用すると、ソースコードがエディタがのように綺麗に表示できます。
Webサイト上でHTML/CSSやプログラミングのコードを解説する機会が多い方は、このプラグインを活用しましょう。

また、Crayon Syntax Highlighterは様々な言語に対応しているため、Webだけでない色んな業種のエンジニアさんも安心です！

使い方

管理画面から検索してインストール、もしくはWordPress.org からダウンロードし、アップロードしてインストールして下さい。

使い方その1：preとcodeで包む！

※全角にしています。
実際の表示は以下のようになります。

サンプルコード

使い方その2：記事入力欄の真上に「crayon」をクリック

上記の画面が出てきますので、入力したいプソースコードを記述し「add」ボタンで追加します。

細かい設定方法

管理画面の説明を読み、必要に応じて設定を変更して下さい。
※特に変更しなくても初期設定のままでも利用可能です！

管理画面→設定→Crayonで詳細設定できるページに行けます。
ここでデザインや高さ・横幅までかなり詳細にカスタマイズできます！

まとめ

Crayon Syntax Highlighterは、WordPressサイトの記事内でソースコードを綺麗に表示できるプラグインです。
エディタがのように綺麗に表示でき、使い勝手も良いので非常におすすめです。
ぜひ使ってみてください！