コードのシンタックスハイライトをリアルタイムで行う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に付与することで適用させられます。
コードのシンタックスハイライトをリアルタイムで行うjavascript「CodePress」サンプル

2007年11月08日

前の記事：リンクチェックできるjavascript「Ajax Broken Link Checker」
次の記事：表を読み取りやすくするjavascript「tableHover plugin」

関連記事

• 色を指定できるシンタックスハイライトjavascript「highlight.js」
• コードを色付けるシンタックスハイライトjavascript「SHJS」
• コードをプリティに整形するjavascript「code prettifier」
• コードをハイライト表示するjavascript「Chili」
• ソースを華麗に整えるjavascript「SyntaxHighlighter」

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」