2012.6.8
今までは「SyntaxHighlighter Evolved」を使っていたのですが、重たさを感じるので、「google code prettify」に切り替えたのでメモ。
「google code prettify」をダウンロードし、解凍した中にある「prettify.css」「prettify.js」をお使いのテーマの中に入れます。
私の環境の場合、prettify.cssはcssフォルダに、prettify.jsはjsフォルダにいれています。
head部分にアップロードした各種ファイルを読み込みます。例えばこんな感じ。私の場合、個別記事ページの時だけ読み込めばいいので、is_single()で囲んでいます。
wp_head();の前に記述すること、CSSを先に、JSを後に読み込ませるようにします。
prettyPrintを読み込みます。bodyタグに「
」と書いてもいいのですが、なんとなく重たいので、jQueryでくるんで読み込ませています。
jQuery(function(){
prettyPrint();
});
jQueryを使わない場合は、body閉じタグの直前に以下のように記述してもいけると思います。
あとはソースコードを
で囲めばOKですが、過去記事にもこれらを付加するために、「Search Regex」という、コンテンツ内の文字列を検索・置換を行うプラグインで置換作業を行います。(検索置換は慎重に行ってくださいね。)
当サイトでは、標準のものは使っておらず、以下の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;
}