1. HOME
  2. 開発・ブログ運営
  3. WordPress
  4. 今更ながらブログに掲載するソースコードを綺麗に表示出来るシンタックスハイライト系プラグインを導入してみた
2012年07月24日
続:WordPress で 7日以内に投稿した記事に「NEW」 ...
2012年06月26日
WordPress の記事タイトルの文字数を制限してみた ...
2012年06月12日
YARPP プラグインで表示する「関連記事」を好きな位置に表示 ...
2014年09月09日
今更ながらブログに掲載するソースコードを綺麗に表示出来るシンタ ...
2012年02月12日
フッターのレイアウトが崩れてちゃんと表示されない(泣) ...
2012年07月04日
初心者向け WordPress プラグイン作成 に関する覚書 ...

今更ながらブログに掲載するソースコードを綺麗に表示出来るシンタックスハイライト系プラグインを導入してみた

久しぶりに WordPress にプラグインを導入してみました。今回インストールしたのは今まで何となくインストールしていなかったシンタックスハイライト系のプラグインです。

WordPress ではソースコードを綺麗に表示してくれるプラグインが沢山ありますが、今更ですがこのブログでもそのようなプラグインを導入してみました。

シンタックスカラー系のプラグインでは SyntaxHighlighter EvolvedWP SyntaxHighlighter がメジャーなようですが、私は Crayon Syntax Highlighter というプラグインを導入しました。

Crayon Syntax Highlighter を選んだ理由は単に見た目だけです。


Crayon Syntax Highlighter のインストール

通常のプラグインと同じように WordPress 管理画面のメニューから「プラグイン」>「新規追加」を選択して「Crayon Syntax Highlighter 」で検索すると、一番上に出てくるので「いますぐインストール」をクリックすれば普通にインストール出来ますよ。

プラグインのインストール  MacBook Air とWordPressでこうなった  WordPress


Crayon Syntax Highlighter の使い方

プラグインをインストールして有効化すれば、特に何の設定もしなくても <pre> タグで囲まれた内容がちゃんと整形されて表示されます。

例えばこのブログの「PHP で今表示しているページの URL を取得する 」という記事の中のソースコード(<pre>で囲まれた内容)がこんな感じ で表示されるようになりました。

PHP で今表示しているページの URL を取得する | MacBook Air とWordPressでこうなった

Crayon Syntax Highlighter の設定

特に設定をしなくてもちゃんと整形表示してくれますが見た目だとかを自分好みにすると良いかもですね。ちなみに私は(上のスクリーンショットでは)ちょっとだけ設定を変えてあります。

設定は、WordPress 管理画面の「設定」>「Crayon」から変更します。

私は「一般設定」からテーマを「Github」へ変更し、行間(Line Height)を 22 ピクセルにし、横幅を 600 ピクセルにして、

Crayon Syntax Highlighter 設定  MacBook Air とWordPressでこうなった  WordPress 1

「ツールバー」を「マウスオーバー時」に表示するように変更。

Crayon Syntax Highlighter 設定  MacBook Air とWordPressでこうなった  WordPress 3

最後に、設定画面の下の方にある「その他」の「必要な時だけ Crayon の CSS と javaScript を読み込むように試みる」にチェックを入れておくとよさげなのでチェックを入れた。

Crayon Syntax Highlighter 設定  MacBook Air とWordPressでこうなった  WordPress 4

「試みる」ってのがちょっと心配だけどww


まとめ

今更ながらシンタックスハイライト系のプラグインを入れてみましたが、なんでもっと早くインストールしなかったんだろ・・。というくらいお手軽でとっても綺麗に表示してくれます。

私のショボショボなソースコードが、さもそれらしいソースコードに見えるようになりました。

まるで L レンズで初めて写真撮影した時に「腕が上がった」と勘違いをするくらいの描写をした時の感覚と同じです(笑)。

今まで何となくシンタックスハイライト系プラグインを導入していない人はぜひインストールしてみてくださいね 。

でわでわ。








この記事にコメントする





Copyright © 2012 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.