ソースコードを手軽に装飾！
「code-prettify」の使い方

ソースコードを見やすく、カッコよく装飾したいけど、なるべく手軽に実装したい。

そんな時に便利なのが、ソースコードを装飾できるjsライブラリです。

ソースコードは、フォントの種類、文字サイズ、行間を変えるだけでも、だいぶ見やすくできますが……

ライブラリを使う事で、エディターのように行数を表示したり、スペルを色分けして表示したりなど、手間のかかる作業を簡単に実装する事ができます。

ここでは、そんなソースコード装飾ライブラリで、定番の人気ライブラリ「code-prettify」の実装手順をまとめています。

「code-prettify」は、Googleさんの提供している無料で使えるjsライブラリです。

ソースコードを手軽にかっこよく装飾してみましょう！

「code-prettify」を使う前に

「code-prettify」にはCDN（コンテンツデリバリネットワーク）版と、ダウンロード版があります。内容は同じですが、使い方がちょっと違います。

CDN版は、ネット上にあるライブラリを読み込んで使うので、リンクを書くだけで導入できて簡単です。

ダウンロード版はライブラリファイルをダウンロードして使うので、CSSファイルを編集してカスタマイズしやすいといった利点があります。

ここでは、導入しやすいCDN版での使い方を見ていきます。

使い方の手順は、
①ライブラリを読み込んで、
②装飾したい部分にclass名を指定するだけ。

順番に見ていきましょう。

CDN版「code-prettify」を読み込む

まず「code-prettify」のライブラリを読み込みます。

装飾したいソースコードのあるHTMLファイルに以下の1行を書き込みます。

head内でも、body内でもOKです。

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

class名をセットする

「code-prettify」を実際に使うには、装飾したいコードのclass名に「prettyprint」をセットします。

<pre><code class="prettyprint">
.sample{
  font-size: 18px;
}
</code></pre>

コードに色がつきましたね。

CSSソースを装飾する

CSSソースを装飾したいときは、class名に「lang-css」を追加します。

<pre><code class="prettyprint lang-css">
.sample{
  font-size: 18px;
}
</code></pre>

行数を表示する

行数番号を入れたい時は、class名に「linenums」を追加します。

<pre><code class="prettyprint lang-css linenums">
.sample{
  font-size: 18px;
}
</code></pre>

テーマカラーを変更する

また、「code-prettify」では、ライブラリを読み込む時にスキン指定を追加する事で、テーマカラーを変える事もできます。

使えるカラーテーマはこちらで公開されています。
「code-prettify」テーマカラー集

たとえば「desert」というテーマカラーを使いたい場合は「/run_prettify.js」のあとに「?skin=desert」と追加します。

「prettyprint」を指定した全てのソースに反映されます。

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

「code-prettify」の注意点

「code-prettify」では、ソースコード直前のタグに「class="prettyprint"」をつけると装飾が反映されます。

ですが、スキン指定をしたときは、
「class="prettyprint"」を「pre」タグに指定するか、「code」タグに指定するかで、表示が変わってくるようです。

私は普段「pre」「code」と入れ子にしているので、最初は「code」タグに「class="prettyprint"」を指定したのですが、これだと文字のカラーは変わってもサンプル集のように背景色までは反映されませんでした。

そこで「code」「pre」と入れ子にして「pre」タグに「class="prettyprint"」を指定すると、背景色までカラーを変更することができました。

「code-prettify」で装飾がうまく反映されない時は、class名を振っているタグを確認してみましょう。

<code><pre class="prettyprint lang-css">
.sample{
  font-size: 18px;
}
</code></pre>