September 23, 2007 4:12 AM
コードをハイライト(色付け）しよう - google-code-prettify
Category:JavaScript
Tags:Highlighter JavaScript
巷のサイトやBlogを見ていると、「コードが色とりどりに彩色（ハイライト）されてるなあ」といったことに気づきます。実はこれ、お手軽にできるようなので僕もやってみました。
google-code-prettify はさまざまな言語のソースコードを色分け表示するための JavaScript ライブラリです。 CGI などが必要なく、 HTML に簡単な JavaScript コードを埋め込むだけで色分けを実現できるので、さまざまな場面で利用できます。
google-code-prettify - Google Codeにアクセスして、zipファイルをダウンロードしてください。中にcssファイルとjsファイルが入っています。適宜自分のサーバーにアップロードしてやってください。
そして目的のHTMLファイルにprettify.cssとprettify.jsを読み込ませてやります。これは各自やり方があると思います。GoogleのReadmeのページには例として
<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>
をhead要素内に記述してやる方法が書かれています。
次に、body要素内に
onload="prettyPrint()"
との記述を足してやります。
<body onload="prettyPrint()">
こんな風に。
あとは目的のエントリーのpre要素、又はcode要素のクラスに、
<pre class="prettyprint"> <!-- ソースを記述 --> </pre>
このようにprettyprintを指定してやればOKです。
ダウンロードしてやったcssファイルを編集して、自分好みの色を指定することも可能なようです。デフォルトの色合はちょっと地味目なのでいつか機を見て変えてみようと思います。
詳しくはこちら
google-code-prettify - Google Code
google-code-prettify でソースコードを色分け表示 - WebOS Goodies
ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを (1) 簡単&便利な"google-code-prettify" - マイコミジャーナル
関連記事
Tweetbacks
Trackback URL
Leave Your Words