きになるnet - きになるものを綴ったブログ

iPhone・MacからWordPressなどのWebに関することまで、きになるものを綴ったブログ

プラグイン

WordPressのソースコードをわかり易く色分けしてくれるプラグイン「Crayon Syntax Highlighter」

投稿日:2012.06.22 更新日:

crayon_syntax_highlighter

WordPressでソースコードを書いていて、「単色だとわかりづらいな」と思ったことはないですか?
今回は見た目のすっきりした、シンタックスハイライトのプラグイン「Crayon Syntax Highlighter」を導入してみました。

ダウンロード

 crayon_syntax_highlighter
WordPress ORGから、「Crayon Syntax Highlighter」をダウンロードします。

インストール

ダウンロードしたフォルダごと、wp-content/pluginsにアップロードし、インストール済みプラグインから 「Crayon Syntax Highlighter」を探し、有効化します。

設定

crayon_syntax_setting2

設定の「Crayon」を選び、設定します。

crayon_syntax_setting

テーマや、フォントサイズ、マージン等いろいろと設定が可能です。

投稿

crayon_syntax_icon

ビジュアルエディタのツールバーに上記のアイコンが追加されていますので、こちらをクリックし出てきた挿入画面にソースコードを書き込みます。

crayon_syntax_insert

タイトル、コード、プログラム言語を設定、挿入すれば完成です。

 crayon_syntax_result

cssでナンバーの色だけ変えてみました。

Syntax Highlighterのプラグインは多数あるため、今後いろいろ試してみたいとおもいますが、とりあえす、このプラグインで様子を見てみます。

 ※WordPress 3.3.2  &  Crayon Syntax Highlighter 1.9.9で試した記事になります。

mixhost
当ブログは、MixHostで運営中です!
おすすめ記事

-プラグイン
-

Copyright© きになるnet - きになるものを綴ったブログ , 2018 All Rights Reserved.