2018年08月01日
Docker for Mac を使って WordPress の...
2018年07月29日
Docker for Mac のインストール
2018年07月08日
Docker 便利コマンドあれこれ
2018年07月08日
オライリーの Docker 本(Docker Up &...
2018年07月05日
iPad mini 2 を購入しました
2018年07月04日
Docker で Jenkins するときのあれこれ

HOME > カテゴリ(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 - 2013 MacBook Air とWordPressでこうなった All rights reserved
Designed by Theme Junkie. Powered by WordPress.