Web上でソースコードを見やすくする
ブログなどのWebサイトで、ソースコードを見ると、ただの黒い文字だけだとわかりにくいですよね。
実は、このサイトも今日までそうだったんですが、Googleの
google-code-prettify というJavascriptを導入しまして、ソースコードに色をつけて表示することができるようになりました！
google-code-prettifyのよいところは、いちいち言語を指定しなくてよいところです！
「えっ それで大丈夫なの？」
と思われるかもしれませんが、今のところ大丈夫なようです。。。
導入方法はいたって簡単なので、書いておきます。
- 下記のサイトから、どちらかをダウンロードして、サイトの中に入れておく
https://code.google.com/p/google-code-prettify/downloads/list
- そのあとは、下記のJavascriptをタグの間に張りつけて、読み込むだけ
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
- コードとして色をわけて表示したいところは
<pre class="prettyprint"> 文字 </pre>
で囲みます。
このサイトの場合は、PukiWikiなので、
の部分にクラスを指定することができないので、悩みました…結局 /lib/convert_html.phpの745行目辺りを修正して、実装しちゃいました。