コードをサイトに掲載して説明などするときにシンタックスハイライトを使いたくなりますせんか？今回は数あるシンタックスハイライトの中からGoogle Code PrettifyをWordPressで使用しようする方法を備忘記録として、投稿します。
Google Code Prettifyの使い方
Google Code Prettifyを使用すると下のようにシンタックスハイライトで表示できます。使い方もとても簡単です。preタグにclass属性として「prettyprint」を指定するだけです。また、行番号を表示したい時もclass属性にlinenumsを指定するだけでOKです。（Google Code Prettifyのskinの種類で行数の表示が異なります。）とても使いやすいですね。
<script>
var hoge = 'シンタックスハイライト';
console.log('hoge');
</script>
WordPressで読み込む
編集するファイル：テーマ内のfunctions.php。そこで、wp_register_script関数でjsファイルを登録し、wp_enqueue_scriptで読み込みます。
functions.php
add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
wp_register_script('google-code-prettify-js', 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian', null, null, false);
wp_enqueue_script('google-code-prettify-js');
}
CDNを使用する際、URLにクエリパラメータとしてskinの種類も設定することが可能。（URL末尾の?skin=sons-of-obsidian部分）
設定可能なテーマの一覧
私は、今現在、is_single()関数で、個別の投稿のみに読み込むように設定しています。コードの備忘記録として、ささっと使用するのにGoogle Code Prettifyとても便利ですね！
投稿時のGoogle Code PrettifyのLicenseはApache License 2.0です。その他詳しい情報は下記から確認できます。
Google Code Prettify