Google Code Prettifyでコードをシンタックスハイライト表示

WordPressGoogle

Google Code Prettifyとは

ブログなどでよくあるテキストエディタのようなコード表示を可能にしてくれるライブラリ。Googleが公開しており、ググると「軽量、簡単」とのこと。

ちなみに、コードの構文を色分けで強調してくれる機能のことを「シンタックスハイライト」という。

HTMLでコードを表示する方法

HTML上でソースコードを表示したい場合には、preタグやcodeタグ使用し、コードを文字列として表示させる。

preタグ：タグ内に記載した内容を、記載通りに表示するタグ。インデントや空白もそのまま表示される。ただし<,>,&などはエスケープが必要。

codeタグ：ソースコードを記載するためのタグ。一般的なブラウザでは、等幅フォントとなる。通常は、preタグと共に使用されるが、短いコード（整形がいらない場合）ならcodeタグのみでも使う。

Google Code Prettifyの使い方

スクリプトローダーでライブラリをロードする。 head部分に下記を記載。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'></script>

下記は以前のもので、Google検索すると古い情報も多いので注意。

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'></script>

preタグのclassにprettyprintを指定。

<pre class="prettyprint">
    echo "Hello!";
</pre>

エディタみたいなデザインに変えたい場合は、skinを指定する。 


<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'></script>
デザインはココ

行番号を表示させたい場合は、classにlinenumsを指定。
デフォルトでは、５行おきに表示される。
全行表示させたい場合は、styleを追記。 

li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
    list-style-type : decimal;
}

1行おきに行番号が表示される。

Google Code PrettifyをWordPressで使う

Google Code Prettifyのプラグインを入れるか、function.phpにコードを追記して使うことができる。


/* Google Code Prettify読み込み */
add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
  wp_register_script('google-code-prettify-js', '//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst', null, null, false);
  wp_enqueue_script('google-code-prettify-js');
}



以上

Posted by Agopeanuts