タグを見やすくカラフルに彩り、
専用エディターのように自動で色を付けたい

そんな要望にバッチリ答えてくれるプラグイン「SyntaxHighlighter」ちゃんとWordPressように用意されています。

導入方法

1.WordPressにログインして管理画面で「プラグインタブ」を選択
2.プラグイン検索窓で「SyntaxHighlighter」と入力し、検索。

3.「SyntaxHighlighter Evolved」の「いますぐインストール」をクリックしてインストール。

インストールが完了しました。と表示されたら「有効化」をクリックしてプラグインを使用できる状態にする。

4.「プラグインタブ」を開き、「SyntaxHighlighter Evolved」の設定をクリック

5.下にある「プレビュー」を参照しながら表示をカスタマイズする。

以上で導入は完了だ。

カスタマイズ

デフォルトの表示がビビットすぎるので調節する。
デフォルトで幾つかパターンが用意されているが、雰囲気と合わないためサイトに合わせて多少カスタマイズする。
CSSファイルは「ルートディレクトリ/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles」こちらにある。

（修正したファイルをバックアップしておかないと、「SyntaxHighlighter」がバージョンアップすると修正したCSSがなくなってしまうので注意。）

具体的な修正点は
「shCore.css」58行目「.syntaxhighlighter」の「width: 100% !important;」をコメントアウトして「padding: 20px 10px;」「border: solid 1px #ccc;」
を追加。

.syntaxhighlighter {
/*width: 100% !important; */
padding: 20px 10px;
border: solid 1px #ccc;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
overflow-y: hidden !important;
font-size: 1em !important;
}

とする。

さらに108行目「.syntaxhighlighter table td.gutter .line」でマージンを調整

.syntaxhighlighter table td.gutter .line {
text-align: right !important;
padding: 0.3em 0.5em 0.3em 1em !important;
}

とする。

さらに112行目「.syntaxhighlighter table td.code .line」も同じようにマージンを調整。

.syntaxhighlighter table td.code .line {
padding: 0.3em 1em !important;
}

とする。

更に色味が微妙だったので全体的に落ち着いたトーンに変更。

例えば「shThemeDefault.css」38行目色を緑からグレーに変更。

.syntaxhighlighter .gutter {
color: #ccc !important;
}

とする。

記述方法

ショートコードパラメータ

これらはショートコードで渡すことができるパラメータと説明です。 bool値(有効・無効など)の指定には true/1 または false/0 を渡してください。

lang または language — ハイライトするコードの言語。パラメータ指定だけでなく[php]code[/php]
のように言語をタグとして記述できます。有効なタグのリストはこちらをクリック (“aliases”の下を参照)
autolinks — 自動リンクの有効・無効
classname — コードボックスに追加するCSSのclass
collapse — コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
firstline — 行番号の出力の際に、最初の行の番号を表す数値
gutter — 左側に行番号を配置するかどうか
highlight — ハイライトさせる行番号のリスト（カンマ区切り）、範囲でも指定可能。例: 2,5-10,12
htmlscript — HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。
light — 行番号やツールバーを無効にする軽い表示モードのオン・オフ
padlinenumbers — 行番号の余白。有効な値は、 false(余白なし), true (自動)、数値(余白)
title （v3のみ） — コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。
toolbar — ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
wraplines (v2のみ) — 折り返しの有効・無効