ソースコードのハイライト表示（google-code-prettify）
google-code-prettifyを使ってソースコードをハイライトで表示する方法です。
詳細
こちらから「distrib」ディレクトリ配下の圧縮ファイルをダウンロードして解凍。解凍されたファイルの「prettify.css」と「prettify.js」を自分のWebサイト環境に設置します。
（ソースコードを変更したい場合は「src」ディレクトリ配下の同ファイル）
<link href="prettify.css" rel="stylesheet" />
<script src="prettify.js"></script>
続いて、ハイライト表示したいソースコードを<pre>タグで囲います。
<pre class="prettyprint lang-js linenums:1">
var count = 0;
function count_up(){
count = count + 1;
alert("回数：" + count);
}
</pre>
上記のコードを実際にハイライト表示すると、以下のとおり。
var count = 0;
function count_up(){
count = count + 1;
alert("回数：" + count);
}
「prettyprint」でハイライトのスタイルを設定。
ちなみに当サイトでは以下のような感じになります。（2016年5月現在）
.prettyprint {
background: #f5f5f5;
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
font-size: 12px;
line-height: 1.5;
border: 1px solid #ccc;
padding: 10px 0px;
overflow:auto;
}
.pln {color: gray;}
@media screen {
.str {color: #dd1144;}
.kwd {color: #333333;}
.com {color: #999988;}
.typ {color: #445588;}
.lit {color: red;}
.pun {color: #333333;}
.opn {color: #333333;}
.clo {color: #333333;}
.tag {color: blue;}
.atn {color: green;}
.atv {color: #dd1144;}
.dec {color: #333333;}
.var {color: teal;}
.fun {color: #990000;}
}
@media print, projection {
.str {color: #006600;}
.kwd {color: #006;font-weight: bold;}
.com {color: #600;font-style: italic;}
.typ {color: #404;font-weight: bold;}
.lit {color: #004444;}
.pun, .opn, .clo {color: #444400;}
.tag {color: #006;font-weight: bold;}
.atn {color: #440044;}
.atv {color: #006600;}
}
ol.linenums {
margin-top: 0;
margin-bottom: 0;
}
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {
background-color:#eee;
}
li.L1,li.L3,li.L5,li.L7,li.L9 {
background-color:#f5f5f5;
}
「lang-js」は「JavaScript」用。
設定可能な言語は以下のとおり、いくつかあるので該当するものを選択します。
lang-c lang-java lang-python lang-bash lang-sql lang-html lang-xml lang-css lang-js lang-ruby lang-php lang-perl
「linenums:1」は行番号の表示。
数字は開始行番号で「linenums:2」にすると以下のようになります。
var count = 0;
function count_up(){
count = count + 1;
alert("回数：" + count);
}
最後にページ表示後にprettyPrint()を実行すればOKです。
<body onload="prettyPrint()">