WordPressでソースコードをキレイに表示する為の便利なプラグイン「SyntaxHighlighter Evolved」

WordPress 2013年08月2日

内容はどうあれ、このブログでは「WordPress」や「Ruby on Rails」の事なんかをちょいちょいと書いていこうと考えているので、少なからずソースコードを見て頂く機会があるかと思います。僕自身が勉強した事とか出来る様になった事程度のご紹介なのでたいした内容ではないのも事実。

しかし。
内容も薄い上に見にくい読みにくいでは目も当てられない事になりそうなので、少しでもソースコードが見やすくなるようにと調べたら数秒で見つかったこちら、WordPressのプラグイン「SyntaxHighlighter Evolved」を今更ながらご紹介。

まずは導入

WordPressの管理画面から検索してインストール
もしくはWordPress.orgからダウンロードして手動でインストール

WordPressの管理画面からインストールするほうがかなり楽。

WordPress管理画面
左メニューからプラグインへ進む
新規追加（画面上部にボタンがある）
「SyntaxHighlighter Evolved」で検索

上記のような手順でプラグインを見つけたら、プラグインタイトルの下にある「いますぐインストール」をクリックするだけで導入は完了。
インストール済みのプラグイン一覧にある「有効化」をクリックしたらOKです。

使ってみる

いやーもーめちゃ簡単。

[表記したい言語]
ここにコーーーーーーーーーード！
[/表記したい言語]

と、こんな感じに書くだけでOK。

試しにHTMLで表示してみます。

<p>Hello Mr. CUBE</p>
<p>Did the tune of the belly become good? </p>

あら簡単♪

書いた内容はこう

［html］
<p>Hello Mr. CUBE</p>
<p>Did the tune of the belly become good? </p>
［/html］

なんだかイッキにかっこ良くなってしまう感。
満足。

対応言語（language）

これはなんかもぉ・・・いっぱい。
下記にリストとして書いときます。

actionscript3
bash
clojure
coldfusion
cpp
csharp
css
delphi
erlang
fsharp
diff
groovy
html
javascript
java
javafx
matlab (keywords only)
objc
perl
php
text
powershell
python
r
ruby
scala
sql
vb
xml

利用できるパラメーター

利用できるパラメーターって言われても何のこっちゃか分からないので日本語で説明して！って感じの方がいるかどうかは分かりませんが、一応簡単に説明。
一覧としてはプラグイン画面の中のSyntaxHighlighter Evolvedの設定をクリックして進んだ先の下部に書かれてます。
要するにオプション的な考えでいいのではないかな？
「今回表示させたいコードの5行目を目立つようにしたい〜」だとか、
「25行目からのコードなんだけど、表示させるコードの行番号の開始は1からなの？」
てな感じを解決するのに利用します。

lang または language
［html］とか［php］とかって書けるんだけど、［code lang=”html”］とか［code lang=”php”］って書いても同じ事になるみたい。
autolinks
コード内に書いたURLテキストに自動的にリンクを設定するかしないか。
false(なし！)とtrue（あり！）。
classname
今回はこのスタイルクラスを適応したい〜って時にクラス名を書き込むみたい。
collapse
長〜いコードを見せたい時とかに初期状態では閉じた状態にする事が可能みたい。クリックすれば開く感じ。
false(しない！)とtrue（する！）。
firstline
開始する行数の指定。今回は25行目からって事で表示したい〜ってな時に使用。
［html firstline=”２５″］こう指定すれば1行目が25から開始される。
gutter
今回は行番号いらない〜って時に使用。
［html gutter=”false”］
highlight
20行あるコードの中の、5行目6行目と10行目を目立たせたい！って時に使用。
［html highlight=”5,6,10″］って指定すればOK。
htmlscript
HTML/XML をハイライトするかどうか。
HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。
って書いてあるけど良く分からない♪
light
シンプル表示モーーード〜オーーーーン！って事。
［html light=”true”］
padlinenumbers
プラグインの所にある説明ではあんまり分からなかったんだけど、設定してみたら分かった感じ。行番号の桁数を指定できるって事であってるのかな？
false(行数のみ表示みたいな感じ？)、true (自動的に一番多い桁数にあわせて表示？)、数値(3って入れたら3桁表示。001、002みたいな感じ)
title
使用するバージョンによって使えない場合もあるみたいだけど、そのままの意味でタイトルを表示させれるようです。
toolbar
こちらもバージョンによって表示の種類が違うみたいだけど、コードのみを別窓で表示させたり印刷したりするツールバーを表示するかしないか。
wraplines
横に長ーい場合はそのままスクロールさせて表示するか、折り返して表示するか。
［html wraplines=”true”］

プラグインの設定

日本語化されてるので誰でも簡単に設定できると思います。
このプラグインで表示させる箇所に対してのテーマを変更できたり、基本的に毎回同じ設定であればパラメーターで毎回設定せずともこちらで設定可能。
初期設定のままでも何ら問題ないかなーと。

まとめ

こんなに簡単に使えるようになるなんて思ってもいなかったのでビックリ。
WordPress初心者の僕としては驚きの連続です。
Webデザイナーの方やプログラマーの方など、ブログでコードを解説したい場合にはこのプラグインはもってこいかと。

Pocket