google code prettifyでソースコードをシンタックスハイライトする

Googleから提供されているgoogle-code-prettifyを使うと、JavaScriptモジュールとCSSによってHTMLページのソースコードをシンタックスハイライト（色付け)することができます。

http://code.google.com/p/google-code-prettify/

[2007-03-29]
にこのブログにも導入したのですが、気付けばバージョンが古くなっていました。

prettify-small_31_Aug_2007.zip prettify_31_Aug_2007.zip

去年の９月の末に新しいバージョンが出ていたのですね。
今回は、minifyしたバージョン(prettify-small_31_Aug_2007.zip)も提供されているので、自分でjavascriptの圧縮ツールのYahoo!のyuicompressorやjsminなどを使ってminifyする必要はありません。

wget http://google-code-prettify.googlecode.com/files/prettify-small_31_Aug_2007.zip
unzip prettify-small_31_Aug_2007.zip
ls

META-INF/                       prettify.css
prettify-small_31_Aug_2007.zip  prettify.js

HTMLファイルからJavaScriptのファイル prettify.jsとCSSのファイル
prettify.jsを読み込みます。

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

HTMLのbodyタグのonloadイベントにprettyPrint()のイベントを追加します。

<body onload="prettyPrint()">

preやcodeタグのclassにprettyprintを指定して使います。

<pre class="prettyprint">int main(){puts("hoge");return 0;}</pre>

<code class="pretprint">int main(){puts("hoge");return 0;}</code>

いつもシェア、ありがとうございます！

もっと情報を探しませんか？

google

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12