ソースコードに色を付けてそれっぽく見せたい。
せっかくgoogleのblogなんで、googleの機能を拝借しようじゃないかと。
今回はgoogle-code-prettifyを導入してみました。
早速ですが、導入方法。
①
google-code-prettifyにて、
prettify-8-Jan-2009.zip または、prettify-small-8-Jan-2009.zip をDLします。
※普段使っているブラウザに対応しているか、その辺を確認したほうがいいかも。
一応 IE 6, Firefox 1.5 & 2, and Safari 2.0.4.でテスト済みらしいが、
それ以外のブラウザはここで確認できます。
リンク先のコードに色がついていれば、お使いのブラウザで表示できます。
②
解凍するとなんだかたくさんのファイルが。
google-code-prettifyのFAQによると、
言語を明確に区別するためらしい。
簡単な分類をかいておきまーす。
lang-css.js …CSS 用ファイル
lang-hs.js …Haskell 用ファイル
lang-lisp.js …Common Lisp, Emacs Lisp, Lisp, Scheme 用ファイル
lang-lua.js …LUA 用ファイル
lang-ml.js …OCaml, SML, F# その他似た様な言語
lang-proto.js …Protocol Buffers 用ファイル
lang-sql.js …SQL 用ファイル
lang-vb.js …BASICチックな言語 用ファイル
lang-wiki.js …Wiki page 用ファイル
prettify.css …ハイライト色指定CSS
prettify.js …google-code-prettifyメインjs
とりあえず自分は全部geocities（ジオシティーズ）にアップしました。
※（追記）geocitiesにアップするとなぜか１～２回は正常に表示できますが、
その後、javascriptが動作しなくなってしまいました。何でだ・・・。
ためしにgoogle-code-prettifyを使用したHTMLを
geocitiesにアップしてみたところ正常に動作。
どうやらblogerからgeocitiesにはアクセスできないってことか？
・・・・・うーむ。
③
自前のサーバーがあれば、
最低でもこの２ファイルのパスをblogerの「レイアウト」→「HTMLの編集」で、
<head>タグの中に含める。
<script src='[アップロード先パス]/prettify.js' type='text/javascript'/>
<link href='[アップロード先パス]/prettify.css' rel='stylesheet' type='text/css'/>
テンプレート中の<body>タグにonload='prettyPrint()'を追加する
※適宜以下のファイルも指定する。
<script src='[アップロード先パス]/lang-css.js' type='text/javascript'/>
<script src='[アップロード先パス]/lang-hs.js' type='text/javascript'/>
<script src='[アップロード先パス]/lang-lisp.js' type='text/javascript'/>
<script src='[アップロード先パス]/lang-lua.js' type='text/javascript'/>
<script src='[アップロード先パス]/lang-ml.js' type='text/javascript'/>
<script src='[アップロード先パス]/lang-proto.js' type='text/javascript'/>
<script src='[アップロード先パス]/lang-sql.js' type='text/javascript'/>
<script src='[アップロード先パス]/lang-wiki.js' type='text/javascript'/>
<script src='[アップロード先パス]/lang-vb.js' type='text/javascript'/>
※アップロードするサーバーがない場合はどうすれば・・・。
っとおもったら、こちらのサイトにてgoogleのリポジトリから取得する方法が取れるみたい。
詳しくはこちらのご説明をご覧ください。
すんばらしい！マジでありがとうございます。
べるかしき: Bloggerでシンタクス ハイライト
④
適用方法は、preタグでソースコードを囲み、クラス指定をするだけ。
<pre class='prettyprint'>
------ここにソースコードを記入する------
</pre>
もし、各言語を明確に区別するのであれば、
<pre class='prettyprint lang-*'>とすればいいらしい。
*を言語の種類で置き換えればOK。
種類の一覧なんかは、FAQを参照していただきたいです。
よのなかって便利。
自分で何もしなくても大抵あるよね。
0 件のコメント:
コメントを投稿