google-code-prettifyでソースコードを美しく装飾。

以前にソースコード表示を綺麗にする SyntaxHighlighter の使い方を紹介したが、js や css 等をダウンロードして自分のサーバへアップロードして使うのはちょっとめんどくさい。

そこで今回は、少し横着をして google api(google-code-prettify + jQuery) を使って自動的且つ簡単にソースコード装飾を行ってみる。

やり方は非常に簡単で、以下のソースコードを自分のブログ内に埋め込めばいいだけだ。

<link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  prettyPrint();
});
</script>

そして以下のようにしてソースコードを表示する。

<pre class="prettyprint">
#!/usr/bin/python

print 'Hello World!'
print 'Goodbye World!'
</pre>

ここはひとつポチっとよろしく。

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

posted with amazlet at 11.05.25

西畑 一馬
アスキー・メディアワークス
売り上げランキング: 2341

Amazon.co.jp で詳細を見る

Comments

役に立ちました。便利な情報をありがとうございました。

Posted by imura__man at 2012年02月24日 15:51

お役に立てて何よりです。
記事にした甲斐がありました。

Posted by 寄り道退屈男 at 2012年03月21日 14:35