Google Code PrettifyをWordPressで使用しよう

カテゴリー:WordPress

コードをサイトに掲載して説明などするときにシンタックスハイライトを使いたくなりますせんか?今回は数あるシンタックスハイライトの中から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


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。