Highlight.js はjavascriptで作成されたシンタックスハイライターです。（jQuery無しで動作します。）
ソースがCDNにホストされているので、簡単に導入することができます。
多数のプログラミング言語に対応しており、テーマも豊富です。
2016年08月16日現在で166の言語に対応、77のテーマがあります。
また使用するプログラミング言語を限定することで軽量化したスクリプトを使用することもできます。

Highlight.jsの設置方法

最も簡単な設置方法はHTMLソースに以下の記述を追加することです。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

※リンク先の9.6.0はバージョンを指しています。最新のバージョンを導入するには公式サイトを見てください。
※カスタマイズしたHighlight.jsをダウンロードして使う場合は上記のjsのパスを変更してください。

記述方法

ソースをハイライトして表示するには以下のように記述します。
ソースに < > & が含まれる場合はそれぞれ &lt; &gt; &amp; に変更してください。

class MyClass {
  public static myValue: string;
  constructor(init: string) {
    this.myValue = init;
  }
}
import fs = require("fs");
module MyModule {
  export interface MyInterface extends Other {
    myProperty: any;
  }
}
declare magicNumber number;
myArray.forEach(() => { }); // fat arrow syntax

テーマの変更

テーマを変更する場合にはCSSの参照先を変更します。
Highlight.jsテーマの一覧

//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.cssの”defualt”の部分をStyle名に変更します
このとき、大文字は小文字に変換します。スペースはハイフンに変換します。
例）Atelier Estuary Dark → atelier-estuary-dark

Ageteテーマのリンク先：
//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/agetet.min.css

Atelier Estuary Darkテーマのリンク先
//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/agetet.min.css

スタイルの調整

ハイライトするソースコードの横幅が長い時に横スクロールできるように、スタイルを調整します。

pre > code {
    overflow: auto;
}

またpre要素に背景色や枠線を指定している場合、ソースコードの枠が二重に表示されることになります。
そうならないように、preのスタイルを調整するか、codeのmarginを相殺するスタイルを指定します。

pre{
    border: none;
}
pre > code {
    overflow: auto;
    margin: -1.4em;
    padding: -1.4em;
}

※この方法は、元のサイトの設定に影響されるので、 -1.4em; の部分はサイトのスタイルによって異なります。
WordPressなど、テーマが変更できるCMSでこういう設定しているとメンテナンスが面倒そうです。

私はjQueryでpre > codeのマージンとその親のpreのpaddingを消すようにしました。

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
<script>
jQuery(document).ready(function() {
 jQuery('pre code').each(function(i, block) {
 var pre = jQuery(block).parent();
 var code = jQuery(block).first().text().trim();
 jQuery(block).first().text(code);
 hljs.highlightBlock(block);
 // スタイル調整
 jQuery(block).css('margin',0); 
 pre.css('padding','0');
 // スクロール
 pre.css('overflow','auto');
 });
});
</script>