前々から「入れよう」「入れよう」と思いつつ放置していた『ソースコードの表示を整えてくれるプラグイン』。重い腰を上げてようやく導入しました。
今回選択したのはSyntaxHighlighter EvolvedというWordPress用のプラグイン。
導入手順などは下記から。
SyntaxHighlighter Evolved
●SyntaxHighlighter Evolved « My WordPress Plugins « Viper007Bond.com
●http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/
●ダウンロード先：WordPress › SyntaxHighlighter Evolved « WordPress Plugins
上記URLから最新版をダウンロード。
「wp-content」→「plugins」にアップロード。
「プラグイン」からSyntaxHighlighter Evolvedを有効化。
ちなみに、header.phpに
<?php wp_head(); ?>
が、footer.phpに
<?php wp_footer(); ?>
がそれぞれ記入されている必要があります。使用中のテーマファイルをチェクしておきましょう。
設 定
「設定」→「SyntaxHighlighterEvolved」から設定画面に入ります。
- Display line numbers：行番号を表示するかどうか（※）
- Display the toolbar：ツールバーを表示するかどうか
- Automatically make URLs clickable：リンクするかどうか
- Collapse code boxes：折畳む？（チェックで表示されなくなります）
- Use the light display mode, best for single lines of code：シンプルな表示にするかどうか（行番号非表示と同じようなスタイル？）
- Use smart tabs allowing tabs being used for alignment：タブの整列処理の有無（※）
- Wrap long lines (disabling this will make a scrollbar show instead)：コードを折返すかどうか（チェックで折返し）（※）
主な設定項目はこんな感じです。
TOKIZKAKIが※印のついた、3つの項目をONにしました。
設定画面の下に、サンプルが表示されますので、試行錯誤しながら設定するのに便利です！
使用方法
後は、PHPのソースコードを表示したい場合には
[php]ここにソースコード[/php]
と記入してあげればOK。
ここにソースコード
こんな感じで表示されます。
その他にも[css][/css]や[java][/java]など様々な言語に対応しています。（詳細はコチラ）
CSSのカスタマイズ
ダウンロードしたファイルの「syntaxhighlighter」→「syntaxhighlighter」→「styles」の中のCSSファイルを編集する事で、オリジナルな表示に変更する事も可能です。
基本的な部分は「shCore.css」を編集すればOK。
パラメータ
各種パラメータを使って、表示を変更する事が可能です。
例（強調ライン指定）：
[php highlight=”3″]1行目
2行目
3行目を強調
4行目[/php]
適用後：
1行目 2行目 3行目を強調 4行目
例（開始行番号指定）：
[php firstline=”74″]74行目から開始
75行目
76行目
77行目[/php]
適用後：
74行目から開始 75行目 76行目 77行目
他にも
wraplines=”false”（自動折返し無し）
autolinks=”false”（URLオートリンク無し）
ruler=”true”（ルーラー表示）
などもあるので、必要に応じて使い分けて行きたいですね！
[...] ソースコードの表示を整えてくれる SyntaxHighlighter Evolved（WordPressプラグイン） [...]