ACE をサイトに組み込んでみる

javascript

先日見つけた ACE をコードハイライターとして自分のサイトに組み込もうとしたら、意外とこのライブラリが曲者でした。

はじめはEmbedding ACE in Your Siteというページもあるので楽ちんかなと思ったのですが、例えばページのある <div> の部分にあるコードをハイライトしたいという場合にはサイトのようにやっても上手くいきません。サンプル通りに組み込むとエディタが全画面表示されてしまいます。

今回はこれを jQuery 等々を使って無理矢理サイズ指定することに成功したのでメモを残しておきます。

† ハイライトするコードのサンプル

今回はハイライターとして使うので id ではなく class を使ってマークアップできるようにします。
class 名は code + (言語) にしました。例えば javascript ならば下記のような感じです。

<div class="code javascript">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>

† あとは jQuery でごにょごにょ

いろいろ試行錯誤して height と width を明示的に指定してやればOKということが分かったので下記のようなコードを jQuery で書きました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>$(document).ready(function(){
    $('.code').each( function (i) {
      var width = this.parentElement.offsetWidth + 'px';
      var lang = this.className.split(' ')[1];
      if (lang === void 0) { lang = 'text' ; }

      var height = (this.innerHTML.split('\n').length * 1.8 + 1.2)+'em';
      var newdiv = document.createElement('div');
      newdiv.style.display = 'inline-block';
      newdiv.style.width = width;
      newdiv.style.height = height;
      $(this).wrap(newdiv);

      this.className = 'editor';
      this.style.height =  height;
      this.style.width =  width;

      var editor = ace.edit( this );
      editor.setTheme('ace/theme/eclipse');
      editor.getSession().setMode('ace/mode/'+lang);
   });
});</script>

とりあえずこのコードを埋め込めば１画面内にコードがいくつあっても綺麗にハイライトされます。
書いていて分かったのは、この ACE は Firefox （というか、Firebug？）と相性があまり良くないようで、Firefox がクラッシュしまくって大変でした。
実際に自分のサイトに埋め込んでいるコードは float の要素を考慮したりしているのでもうちょっとごちゃごちゃしてます。