サイト制作時に使うモジュール集を作成するときに、
他の人がコードを見やすいようにしたい。
↓
google-code-prettify 導入！
google-code-prettifyとは
- コードを綺麗に表示
- シンタックスハイライトをしてくれます。
autoloader（以下）を使い、CSSを読み込ませればすぐにできます。
<script type="text/javascript" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
（ホスト元が移動していたようです。修正しました。@annyamonnya さんご指摘ありがとうございます！）
ただ、autoloaderだとカスタマイズが難しいようす。
（カスタマイズ無しでよいならばこちらの方が楽ですね）
ファイルをダウンロードして使います。
- lang-css.js
- prettify.css
- prettify.js
を落としてきます。
ファイルを読みこませます
CSS
header内に読み込みます。
<head>
<link rel="stylesheet" href="../css/prettify.css" type="text/css">
</head>
JS
私はjsをbody閉じタグ前で読み込ませました。
<script src="../js/prettify.js"></script>
<script src="../js/lang-css.js"></script>
<!-- prettyPrint()関数を実行するため追加↓ -->
<script>prettyPrint();</script>
</body>
使用例
※.module_codeのdivは後から勝手に付けたので消してくださって問題ないです。
HTML
<div class="module_code">▼ HTML</div>
<pre class="prettyprint">
この中にコード
</pre>
こんな感じになります。（内容はh3のコード）
カスタマイズ
以下に様々なスタイルのCSSがあります。
その中身をprettify.cssと入れ替えると、
スタイルが変わります。
https://github.com/google/code-prettify/tree/master/styles
スタイルの例は以下で紹介しています。
https://github.com/google/code-prettify/tree/master/styles
てへぺろ うっかり例
コードの表示が上手くできてないと思ったら、
（スタイルが適用されてしまっていたり。）
preタグ内の実体参照化を忘れていました。(先輩からご指摘。ありがとうございます！)
ちなみに以下でSublimeTextとEmmetをつかえば、
簡単に実体参照できました。
参考：
Google Code Prettify のかゆいとこをなんとかする jQuery プラグインを書いてみた
http://www.cyokodog.net/blog/jquery-ex-code-prettify/
[Ex Code Prettify] その場で編集／実行できるシンタックスハイライター jQuery プラグイン
http://www.cyokodog.net/blog/ex-code-prettify-doc/
google-code-prettify を使ってシンタックスハイライト
http://www.webdesignleaves.com/wp/htmlcss/1457/