コードのシンタックスハイライトをリアルタイムで行うjavascript「CodePress」

コードを要素などに応じて色分けするのをシンタックスハイライトといいます。
制作物を公開する際に、わかりやすく表示することができます。
CodePressは、単純にハイライト表示するだけでなく、書き込んだコードもリアルタイムで色を付けてくれます。

使用方法

CodePressからzipファイルをダウンロードし、全てアップロードします。
そして以下を記述すれば完成です。

<script type="text/javascript" src="http://yourdomain/codepress/codepress.js"></script>
<textarea id="id名" class="codepress 言語">

言語にはHTML、CSS、JavaScript、Perl、PHP、java、sql、rubyなど主要言語が揃っています。
またオプションとして、書き換えをできなくするreadonly-onや番号を表示しないlinenumbers-off、オートコンプリートさせないautocomplete-offがあり、それぞれtext areaのclassに付与することで適用させられます。

サンプル

/* CSS comment */

body {
	color:#000;
	background-color:white;
	font:15px Georgia, "Lucida Grande", Arial, sans-serif; 
	letter-spacing:0.01em;
	margin:15px;
}

p { 
	margin:0 0 15px 0; 
}

a,a:visited {
	color:#7f0055;
}

select {
	background:#ffffe1;
}

h1 {
	color:#7f0055;
	margin:0;
	padding:0;
	font-size:42px;
}

Javascriptサンプルページ一覧

skuare.net