BLOG

google-code-prettifyを使用してソースコードをハイライト

せっかくブログをやってるわけだし、Webクリエイターたるもの、やはりアウトプットもしっかりとやっていかねばならんな、ってことで。
まずはその環境作りとして、HTMLやJavaScript等のソースコードを書いた時に分かりやすく綺麗に色分けできるようにする。シンタックスハイライトってやつ。

WordPressにはそういうプラグインが結構あるんだけど、そういうのは使わずに、GoogleのJavaScriptライブラリ「Google Code Prettify」を使用する。

google-code-prettifyの設置

ファイルのダウンロード

まずはgoogle-code-prettifyのページからファイルをダウンロードする。

Google Code Archive – Long-term storage for Google Code Project Hosting.

ダウンロードしたファイルを解凍して、テーマのディレクトリに設置。

CSSとJSの読み込み

CSSは<head>内に、JSは</body>の前に設置。


<link rel="stylesheet" href="../google-code-prettify/prettify.css" />


<script src="../google-code-prettify/prettify.js"></script>
<script src="../google-code-prettify/lang-css.js"></script>
<script>
$(function(){
    prettyPrint(); 
});
</script>

スタイルのカスタマイズ

普段コードを書くときは「Sublime Text」ってエディタを使用していて、google code prettifyの見た目もそれっぽく(Monokai)したかった。で、調べてみたらあった。

google-prettify-monokai-theme

ここからファイルをダウンロードして、その中のCSSファイルを最初に読み込んだ「prettify.css」と入れ替える。すると、それっぽくなる(今表示されてるやつ)。

google-code-prettifyの使い方

WordPressのエディタ内でこんな風に書く。あらかじめ「AddQuickTag」でタグを登録しとくと便利。


<pre class="prettyprint">
<code>
〜ここにコード書く〜
</code>
</pre>

コード書くときに「<」や「>」なんかをそのまま書いちゃうとまずいので、ちゃんとエスケープ(変換)しないといけない。
こういうのを使おう。

言語の指定

HTMLやCSS等の言語を指定できる。
<pre class="prettyprint">の中でclassを指定する。「lang-html」とか「lang-css」とか「lang-js」とか。
「lang-***」は省略しても自動判定するみたい(短いコードは誤判定することもあるみたい)。


<pre class="prettyprint lang-html">
<code>
〜ここにコード書く〜
</code>
</pre>

RELATED POSTS