もともと google code prettify を使っていたのですが、なんとなく他のものを試していたら良さそうなのを見つけたので紹介。
highlightjs
まずは、開いて language や style をポチポチしてみてください。どんな感じか解ると思います。
設定できるすべての項目が選べるわけではないので、このページでいろいろ試してみるのがいいと思います。
導入
まずはスタイルシート(css)とスクリプト(js)を用意します。
上記のページでハイライトする言語を設定できるので好みの設定にしたらDownloadをポチッとします。
解凍(伸張)してできたファイルからhighlight.pack.jsとお好みのstyleのスタイルシートを読み込みます。
とりあえず試してみたい場合などは、CDNが用意されているのでありがたく使いましょう。
(スタイルシートのdefaultという部分を有効にしたいstyleに置き換えることでそのstyleが使えます。ex: monokai_sublime)
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js"></script>
さて、これで必要なファイルはてにはいりましたが、これだけではハイライトされません。
用意したスクリプトを読み込んだあとに初期化をしなければいけないので、すぐ下に下記のコードを挿入します。
<script>hljs.initHighlightingOnLoad();</script>
さて、これでもまだハイライトされません。さらに、ハイライトしたいコード側も特定の形式になっている必要があります。htmlをハイライトする場合は、
<pre><code class="html">...</code></pre>
こんな感じにマークアップされている必要があります。適切にマークアップされていればもうハイライトが有効になっているはずです。
もし、既存のページに導入しようとしていて、マークアップを変更するのが難しい場合は上記のHow to use highlight.jsにJQueryを使ってハイライトを有効にする要素を変更する方法が記載されているのでそれを参考にするといいと思います。(試していないので具体的にはどうするかはあまり把握していません)