Google謹製シンタックスハイライト「Google Code Prettifier」をアドビ謹製フォント「Source Code Pro」とあわせて導入しました！

Code by Salavat Khanov, on Flickr

解説サイトは味気ないですが、導入後のコードは彩り豊かになります。

Google Code Prettifier セットアップ

スタイルシート(css)とJavaScriptファイル(js)のダウンロード（URL：Downloads - google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hosting）
ページに以下のスクリプトとリンクタグを追加します。（cssとjsファイルがサーバ上にあること）

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

bodyタグに「onload="prettyPrint()"」を追加します。
お好みのカラーリングを得るためにスタイルシートを変更する（省略可）

実際に使う

ハイライトしたい部分を

<pre class="prettyprint"></pre>

で囲むだけです。

こんな具合に表示されていればOK。

Source Code Pro セットアップ

Google Web Fontを使うことで、自分好みのフォントがカンタンに変更できます。今回は私の中でイチオシのフォント「Source Code Pro」を使う手順を紹介します。

まずは、以下のコードを追加します。

<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro'
　　　　　　　　　　rel='stylesheet' type='text/css'>

「Google Code Prettifier セットアップ」の手順１でダウンロードしたスタイルシートをエディタで開き、以下のスタイルを追加します。

.prettyprint{font-family:'Source Code Pro'}

サンプルHTML

以下のように記述すると、

<html>
 <head>
  <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro'
     rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css"
     href="css/prettify.css" />
  <script src="js/prettify.js"></script>
 </head>
 <body onload="prettyPrint()">
  <pre class="prettyprint">
  p {
   color:red;
   font-size:14px;
   font-weight:bold;
  }
  div {
   border:solid 1px black;
   width:200px;
  }
  </pre>
 </body>
</html>

こんなふうに表示されていれば成功です！

p {
 color:red;
 font-size:14px;
 font-weight:bold;
}
div {
 border:solid 1px black;
 width:200px;
}

JavaScriptファイル１つ、スタイルシート１つでできるお手軽シンタックスハイライトでした。フォントは好みに合わせて変更してみてください。