アクティブエージェント株式会社

222

wordpressの記事でソースコードを綺麗に表示させる方法

こんにちは、システム事業部のfujiです!

今回は、wordpressの記事でソースコードを綺麗に表示させる方法をご紹介します。

 

私が書いている記事、前回あたりからソースコードが綺麗に表示されてるなと気付いた方はいますでしょうか…笑

デフォルトのままwordpressでソースコードを記事に入れるとどうも見難い表示になってしまいます。

綺麗に表示させる方法はないかと探したところ、Crayon Syntax Highlighterという丁度良いプラグインがあったのでご紹介させていただきます。

 

・Crayon Syntax Highlighterのインストール

wordpressの管理画面メニューから「プラグイン」>「新規追加」ボタンを押す > キーワード検索から「Crayon Syntax Highlighter」と検索し、プラグインをインストールします。

インストールできたら、管理画面メニューの「プラグイン」からCrayon Syntax Highlighterを有効化してください。

 

・Crayon Syntax Highlighterの使い方

プラグインを有効化することで、記事編集ページに新しいボタンが追加されています。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-24-11-20-08

このボタンを押すとこのような画面が出るので、表示させたいコードを記述していきます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-24-11-38-32

 

これで挿入すると、以下のような表示になります。

 

基本的にデフォルトのままでも十分ですが、下の方から文字のフォントや色など様々な設定ができるので試してみるといいかもしれません。

 

Image 【PHP】配列の結合 初めまして・こんにち…
開発部 のプロフィール写真 by 開発部
32
Image 【JavaScript】イベント伝播と止め方 初めまして・こんにち…
開発部 のプロフィール写真 by 開発部
79
Image ターミナルで「You have mail.」と表示されたとき こんにちは、システム…
開発部 のプロフィール写真 by 開発部
153
ログイン
登録
Send message