今までは「SyntaxHighlighter Evolved」を使っていたのですが、重たさを感じるので、「google code prettify」に切り替えたのでメモ。
確認環境
- WordPress3.1.3
1.ダウンロード&設置
「google code prettify」をダウンロードし、解凍した中にある「prettify.css」「prettify.js」をお使いのテーマの中に入れます。
私の環境の場合、prettify.cssはcssフォルダに、prettify.jsはjsフォルダにいれています。
2.各種ファイルを読み込み
head部分にアップロードした各種ファイルを読み込みます。例えばこんな感じ。私の場合、個別記事ページの時だけ読み込めばいいので、is_single()で囲んでいます。
wp_head();の前に記述すること、CSSを先に、JSを後に読み込ませるようにします。
3.prettyPrintを読み込む
prettyPrintを読み込みます。bodyタグに「
」と書いてもいいのですが、なんとなく重たいので、jQueryでくるんで読み込ませています。
jQuery(function(){
prettyPrint();
});
jQueryを使わない場合は、body閉じタグの直前に以下のように記述してもいけると思います。
4.SearchRegexで置換
あとはソースコードを
で囲めばOKですが、過去記事にもこれらを付加するために、「Search Regex」という、コンテンツ内の文字列を検索・置換を行うプラグインで置換作業を行います。(検索置換は慎重に行ってくださいね。)
ちなみにCSSは…
当サイトでは、標準のものは使っておらず、以下のCSSを当てています。
.com {
color: #93A1A1;
}
.lit {
color: #195F91;
}
.pun, .opn, .clo {
color: #93A1A1;
}
.fun {
color: #DC322F;
}
.str, .atv {
color: #DD1144;
}
.kwd, .linenums .tag {
color: #1E347B;
}
.typ, .atn, .dec, .var {
color: teal;
}
.pln {
color: #48484C;
}
.prettyprint {
background-color: #F7F7F9;
border: 1px solid #E1E1E8;
padding: 8px;
margin-bottom: 1.5em;
overflow-x: auto;
}
.prettyprint.linenums {
box-shadow: 40px 0 0 #FBFBFC inset, 41px 0 0 #ECECF0 inset;
}
ol.linenums {
margin: 0 0 0 17px;
}
ol.linenums li {
color: #BEBEC5;
line-height: 18px;
padding-left: 12px;
text-shadow: 0 1px 0 #FFFFFF;
}