WordPress でソースコードをキレイに表示するプラグイン「Crayon Syntax Highlighter」がイイ感じ

thikasa

Category: ブログ / Tag: , ,

WordPress で、様々な種類のソースコードを表示させたい場合、いわゆる Syntax Highlighter プラグインを使うのがお手軽だしイイ感じです。

私はこれまで、SyntaxHighlighter Evolved というプラグインを使っていたのですが、ちょっと気になることがあって別のを探していたところ、イイ感じのものがあったのでご紹介。

Crayon Syntax Highlighter です。


SyntaxHighlighter Evolved

これまで使っていた Syntax Highligher。
利用されてる方も多いですよね。

WordPress › SyntaxHighlighter Evolved « WordPress Plugins

ただ、ここしばらく更新されていないのが気になるところで…。

そのせいか、ハイライトしてくれないワードもちらほら。

CSS
CrayonSH 01

Objective-C
CrayonSH 02

プラグインのソースコードを修正すれば対応はできるんですが…できれば公式に対応してほしいところです…。

Crayon Syntax Highlighter

そこで私が今回利用を始めたのがこちら。

WordPress › Crayon Syntax Highlighter « WordPress Plugins

イイ感じで表示してくれます。

CSS
CrayonSH 03

Objective-C
CrayonSH 04

ちなみに上記は画像ですが、本物はこちら。

イイ感じでお気に入りです!

導入方法

先ほどのリンクからダウンロードしてインストールするか、プラグインの管理画面から「Crayon Syntax Highlighter」を検索してインストールしましょう。

使用方法

これは SyntaxHighlighter Evolved と同じく、表示したいソースコードを、[言語]〜[/言語] で囲みます。([]は半角で)
対応言語は次のとおり。

CrayonSH 05

なお、[crayon]〜[/crayon]と囲んでも OK。言語の指定をしなくても解析してやってくれちゃいます。
楽チン♪

開始行番号の指定

[]の中に、

start-line=”123″

のように書きます。

行のハイライト

[]の中に、

mark=”5,12″

のように書きます。

なおこの数値、表示している行番号ではなく、開始行番号=1として指定するようです。これはちょっとわかりづらいですね..。

テーマ

テーマは5種類あります。

CrayonSH 06

CrayonSH 07

CrayonSH 08

CrayonSH 09

CrayonSH 10

全設定項目

数が多いので全部を表示させようとするのには無理がありますが…こんな感じです。

CrayonSH 11

お気に入りポイント

Tag Editor

WordPress の記事編集画面にて、Crayon Syntax Highlighter 専用のエディタが使えます。

CrayonSH 12

CrayonSH 13

個別に細かく表示を変えたい時に便利です。

ポップアップしてもキレイに表示してくれる

SyntaxHighlighter Evolved だと、ポップアップ表示すると何も色分け等されていない素のコードが表示されます。
私としては、ポップアップしても色分け等してほしい…。

Crayon Syntax Highlighter では、ポップアップ表示しても元と同様に色分け等されています。

CrayonSH 14

CrayonSH 15

イイ感じです。

更新頻度が高い

Crayon Syntax Highlighter に変えたもともとの理由がこれですが、いろいろと細かい仕様追加がされる昨今、それらに追随してくれるのは嬉しいです。

おすすめです

はい、そんなわけで、ソースコードを表示したいみなさまに、Crayon Syntax Highlighter、おすすめです!

RSS 登録

もしこのブログを気に入っていただけたのなら、RSS 登録をお願いします。
最新情報をお届けします。

follow us in feedly