WordPressプラグイン SyntaxHighlighter Evolved

インストール
WordPress管理画面＞プラグイン＞新規追加＞SyntaxHighlighter Evolvedで検索
すると、1番上段にバージョン3.1.3で星４と1ミリのやつがあるので、これをインストール。

設定
僕の設定を書いておきます。
バージョン：Version 2.x　右上に出るボタンは、このバージョンでないと出ません。
テーマ：Default　色んな人が利用してますが、やはりこのテーマなようです。
すべてのブラシを読み込む：オフ　よくわからない人は～ってありますからね。

行番号を表示する：オン　あった方がなんかそれっぽいです。
ツールバーを表示する：オン　あのボタンが便利だと僕は思ってます。
自動リンクを有効にする：オフ　コードを引っ張りたいから、これなわけですし。
コードボックスの表示を閉じておく：オフ　一々クリックさせたくはないですね。
軽い表示モードを使う：オフ　これ、オンにすると右上のボタンが出ません。交互に背景色がつきません。
インデントタブを許容するスマートタブを使う：オン　あった方がいいのではないでしょうか。
長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)：スクロールバーってあんまいい気分ではありません。

こんなものでしょう。
他はお好みで。

使用方法
以下のように、使いたい言語をカッコして、コードを挟むだけです。

aaaaaaaaaaaaaaaaaaaaaaaaa

詳しくは、以下の二つの記事が参考になります。
はなし半分なマトメ。 – SyntaxHighlighter Evolved 導入
ソースコードを表示するWPプラグイン「SyntaxHighlighter Evolved」の使い方 | FOOTMARK

さらに、HTML との混合コード (htmlscript)など、細かい記述も必要になってくるらしく、そこのところ詳しいのが以下の記事です。
まとめ：SyntaxHighlighter Evolved の使い方 (設定＆記述例) | attosoft.info

これだけあれば、使えるはずです。

ちょっとしたカスタマイズ

CSS調整
デフォルトでは、これがまた文字が大きいです。
ほどほどな大きさがいいので、ここは変更しましょう。

/wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles/shCore.css
syntaxhighlighter2はバージョンがVersion 2.xの場合のCSSだと予測してます。Version 3.xの人は、syntaxhighlighter3の方のCSSを変更しましょう。
というわけで、以下のハイライト部分がフォントサイズで、お好みに変更。

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody
{
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: none !important;
	text-align: left !important;
	float: none !important;
	vertical-align: baseline !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	height: auto !important;
	width: auto !important;
	line-height: 1.1em !important;
	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
	font-weight: normal !important;
	font-style: normal !important;
	font-size: 13px !important;
	/*min-height: inherit !important; *//* For IE8, FF & WebKit */
	/*min-height: auto !important;*/ /* For IE7 */
	direction: ltr !important;
}

便利な使い方
この指定コードで囲む場合、いちいち入力するのも面倒でしょう。
表示する言語が決まっている人は、ボタン登録してしまいましょう。
というわけで、以下のプラグイン。
AddQuicktag
これでボタンを登録してしまえば、面倒無く使えるようになります。
以下の画像のような感じで登録ですね。

ハイライトにしたり、そういったオプションを使いたい場合は、仕方ないので手入力しましょう。

まだまだ使い方はあるのでしょうが、これだけ抑えとけば、どうとでもなります。
こうした便利なプラグインはまだまだあるので、今後も探して紹介していこうと思います。