ソースコードを手軽に装飾！
「code-prettify」のカスタマイズ手順
ソースコードを手軽に装飾できるｊｓライブラリ「code-prettify」。
今回はそのカスタマイズの手順をまとめています。
「code-prettify」ってなに？という方は前回の記事を見てみてくださいね。
「code-prettify」ダウンロード版を使う準備
「code-prettify」にはDNS版とダウンロード版がありますが（中身は同じ）、今回はカスタマイズ・管理しやすいダウンロード版を使用します。
「code-prettify」をダウンロード
まずは「code-prettify」をダウンロードして解凍しておきましょう。
こちらのページで「clone or download」をクリックするとダウンロードできます。※PC版のみ。
サーバーにアップロードする
ダウンロードした「code-prettify」のzipファイルを解凍して「src」フォルダを見てみましょう。
ずらずらとjsファイルが出てきますが、このフォルダから「prettify.js」「lang-css.js」をサーバーのjsフォルダへ。
「prettify.css」をサーバーのcssフォルダへアップロード（コピー）します。
テーマカラーを変える場合は、そのCSSファイルをアップロードします。
例えば「Dessert」を使うなら、「style」フォルダから「dessert.css」をアップロードします。
ここでは一般的なサーバーのフォルダ構成を想定していますが、要はファイルのパスが分かる場所にあればいいので、自分で管理しやすい場所にアップロードすればOKです。
POINT「code-prettify」には、色違いのテーマが沢山あります。
カスタマイズする際は、一番好きなテーマをもとに調整すると楽です。
「code-prettify」をダウンロードして「style」というフォルダを見てみると、いくつかのテーマCSSファイルがあります。
Prettify Themes Gallery
他のテーマを使う場合は、CSSファイルをダウンロードするか、コピーして空のCSSファイルなどに貼り付ておきましょう。
Color themes for Google Code Prettify
今回は、デフォルトの「prettify.css」を使います。
HTMLファイルからの読み込み
HTMLファイルのhead内で「code-prettify」のCSSファイルを読み込ませます。
<link href="サンプル.com/css/prettify.css" type="text/css" rel="stylesheet">
続いてHTMLファイルのbody内の最下部でjsファイルを読み込ませ、「code-prettify」のjava scriptを起動させる指定をします。
jsファイルを最下部で読み込ませるのは、ページの表示速度を落とさないためです。
こだわりがなければ、実際はbody内のどこに書いてもOKです。
<script type="text/javascript" src="サンプル.com/js/prettify.js"></script>
<script type="text/javascript" src="サンプル.com/js/lang-css.js"></script>
<body onload="prettyPrint()">
カラーテーマに「Dessert」を使う場合は「prettify.css」の部分を「dessert.css」に変更します。
また、ファイルパスはサーバーのフォルダ構成によって的確変更してください。
ここでは例として、ドメイン直下の「CSS」「js」フォルダにあるファイルを読み込んでいます。「サンプル.com」の部分を、お使いのdomain名に変更してくださいね。
「code-prettify」で装飾するには
これで準備はOK。
あとは装飾したいコードにclass名を指定するだけで使えます。
ソースを装飾する
「code-prettify」を実際に使うには、装飾したいコードのclass名に「prettyprint」をセットします。
<pre><code class="prettyprint">
/*ソースコード*/
</code></pre>
CSSソースを装飾する
CSSソースを装飾したいときは、class名に「lang-css」を追加します。
<pre><code class="prettyprint lang-css">
/*ソースコード*/
</code></pre>
行数を表示する
行数番号を入れたい時は、class名に
「linenums」を追加するだけでOKです。
<pre><code class="prettyprint linenums">
/*ソースコード*/
</code></pre>
こんな感じで行番号が自動で表示されます。
デフォルトCSSで行数が表示されない場合は「prettify.css」64行目あたりの「list-style-type: none」を削除してみてください。
「code-prettify」の主なカスタマイズ
「code-prettify」を好みにアレンジしてみます。
「prettify.css」や「dessert.css」などのソースを変更したりコードを追加したりしてみましょう。
また、フォントを変えたり、背景色を変えることでもぐっと見やすくなります。
そういった基本的な書き方はこちらでまとめています。
行数を外側に表示する
行数の位置は「list-style-position」で変更できます。
リストの外側で表示するには「outside」を 位置側に表示するときは「inside」を指定します。
余白や文字サイズはお好みでOK。
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
list-style-position: outside;
padding-left: 10px;
margin-left: 10px;
border-left: 1px #aaa solid;
}
文字の色を変更する
「prettify.css」の場合、24行目～50行目で文字色を指定しているので、指定したい色があれば、ここで好みに変更できます。
また、24行目～50行目をまるっと削除して、「Dessert」などのCSSファイルからコピペすることで、文字色だけを変更することもできます。
「@media screen」はPCなどの画面で見た時の色、「@media print, projection」は印刷用・プロジェクター用の色指定です。
左右にスクロールする部分にも背景色をつける
デフォルトだと、ソースコードをスクロールできるようにすると スクロール部分には背景色がつきません。
以下のように「width」で少し多めの幅にしておくと、スクロール部分にも色をつけることができます。
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
width: 300%;
}
preタグではなくcodeタグで装飾する
最初使ってみて戸惑ったのですが、「Dessert」などいくつかのカラーテーマでは装飾要素が「pre」タグになっています。「code」タグに装飾したい場合は「dessert.css」などCSSファイルを編集します。「pre」の部分を「code」に置き換えればOKです。
「code-prettify」の注意点
「code-prettify」では、ソースコードに自動で「ol」タグを付与して行番号を表示したり行を装飾しています。
なので、自分で独自に「ol」タグを装飾していると、それが行番号などに反映されてしまいます。
デザイン上問題なければOKですが、凝ったデザインにしていると装飾が混ざって微妙な見た目になる事も。
「code-prettify」の表示と分けたい場合は、「ol」タグに直接装飾するのではなく、「div」で囲みclass名をつけて装飾すると管理が楽になります。
