Home > JavaScript > | WEBデザイン > コードを自動ハイライトしてくれるJavaScript

コードを自動ハイライトしてくれるJavaScript


ブログやサイトにプログラムのコードを書いて説明したい場合に、エディタのようにコードをハイライト表示してあげると分かりやすくなるけど、ちまちまと色付けをするのは面倒くさい。そんな人にお手軽自動ハイライト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; }

僕が普段使っているエディタの配色に似せてあるので個人的には読みやすいが…みなさんが読みやすいかどうかは微妙。ご意見ください。

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://blog.tofu-kun.org/mt-tb.cgi/338
Listed below are links to weblogs that reference
コードを自動ハイライトしてくれるJavaScript from Webプログラマー+WebデザイナーなZARU日記

Home > JavaScript > | WEBデザイン > コードを自動ハイライトしてくれるJavaScript

Profile

zaru

Name : zaru

Webプログラマ+Webデザイナで、Webディレクタやってます。Twitterやっているので、ぜひフォローしてやってくださいませ。Twitter - zaru。また、そのほかのプロフィールについては、iddy - zaruを見てください。

Search
Feeds
Others

Return to page top