- 2007/08/28
- JavaScript | WEBデザイン
ブログやサイトにプログラムのコードを書いて説明したい場合に、エディタのようにコードをハイライト表示してあげると分かりやすくなるけど、ちまちまと色付けをするのは面倒くさい。そんな人にお手軽自動ハイライトJavaScirptをご紹介。
すでに相当有名になっているものだが、Googleが公開している「google-code-prettify」というもの。使い方は非常に簡単。続きを読むで、導入方法とサンプルを。
導入方法
google-code-prettifyにアクセスして、Downloadから prettify_22_May_2007.zip （2007/08/28時点）をダウンロードし、解凍して出てきた
- src/prettify.css
- src/prettify.js
の2ファイルをサーバにアップロードし、対象のHTMLに2つのファイルを読み込ませる。
<script src="src/prettify.js" type="text/javascript"></script> <link href="src/prettify.css" rel="stylesheet" type="text/css"/>
ディレクトリは src 以下でなくても lib でも直下でもなんでもいい。
さらに、
<body onload="prettyPrint();">
body タグに prettyPrint() を追加。これで準備は完了。あとは、表示したいコードを pre タグ prettyprint クラス指定で囲んであげればOK。
<pre class="prettyprint"> <?php print "hello"; ?> </pre>
色のカスタマイズ
もちろん色の変更もできる。prettify.cssに各コードに対応したカラー設定が書いてあるのでそれを編集してアップロードするだけ。デフォルトの配色は読みやすいのだけど、コントラストが低くて自分好みじゃないので、黒背景・白文字の配色に変更してみた。
.str { color: #FF4040; }
.kwd { color: #40FFFF; }
.com { color: #40FF40; }
.typ { color: #FF40FF; }
.lit { color: #FF4040; }
.pun { color: #FFFF00; }
.pln { color: #FFFFFF; }
.tag { color: #40FFFF; }
.atn { color: #FF40FF; }
.atv { color: #40FF40; }
.dec { color: #FF40FF; }
pre.prettyprint { padding: 2px; border: 1px solid #888;background:#000; }
僕が普段使っているエディタの配色に似せてあるので個人的には読みやすいが…みなさんが読みやすいかどうかは微妙。ご意見ください。
