WordPressにgoogle code prettifyを導入する方法

2012.6.8

今までは「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;

}