「CodePress」でリアルタイムシンタックスハイライト

CodePressはJavaScriptで書かれたリアルタイムシンタックスハイライターです。

サーバーを使わずブラウザのみで、指定されたテキストエリア文字列のシンタックスハイライトを行います。
ハイライトは、テキストの編集に応じてリアルタイムで行われます。
コードの補完やオートコンプリート(「{」を打つと「}」を挿入する)にも対応。
javascriptやcss、rubyなどの言語をサポート。

使ってみる。

htmlの指定だけで簡単に使えます。

必要なモジュールをインポートする。
ハイライトするテキストエリアに「class="codepress <言語> <オプション>"」と一意な「id」属性を指定する。
- 指定されたテキストエリアがシンタックスハイライトの対象になります。
- クラス
  - 「<言語>」でハイライトする言語を指定します。
  - オプションで行番号の表示/非表示や、リードオンリーの設定等ができます。
- ID
  - 一意なIDを指定しておく必要があります。
  - IDが指定されない場合、シンタックスハイライトの対象になりません。
  - また、「.」や「-」なども使えません。(たぶん、JavaScriptの識別子(→Core JavaScript 1.5 ガイド > Variables)に使えない文字は使えない。しばらくはまった...。)
- styleで幅と高さを指定するとハイライト時の要素もその大きさになります。

サンプルです。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <!--
    CodePressをインポート
    "./codepress"以下に、ダウンロードしたzipを展開したファイル/フォルダ一式を配置しています。
  -->
  <script type="text/javascript" src="./codepress/codepress.js"></script>
</head>
<body>

  <textarea id="text_js" class="codepress javascript" style="width:300px;height:300px;">
// javascript / オプションなし
function kitten() {}
  </textarea>
  <textarea id="text_ruby" class="codepress ruby linenumbers-off" style="width:300px;height:300px;">
#ruby / 行番号非表示
class kitten
end
  </textarea>
  <textarea id="text_java" class="codepress java readonly-on linenumbers-off" style="width:300px;height:300px;">
//java / 行番号非表示 & リードオンリー
public class kitten {
}
  </textarea>
</body>
</html>

確認はこちらから。

テキストエリアの値を取得

ハイライト時には元々のテキストエリアは非表示になり、独自の要素に置き換えられているため、「<テキストエリア要素>.value」で値を参照することはできません。値はCodePressが提供するAPIを利用して取得する必要があります。

具体的には

<テキストエリアID>.getCode();

とします。

// text_js テキストエリアの値を表示する。
function showValue() {
  alert( text_js.getCode() );
}

サンプルはこちら