BLOGTIMES
2012/09/25

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>

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


    トラックバックについて
    Trackback URL:
    お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
    このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/5243
    Trackbacks
    このエントリにトラックバックはありません
    Comments
    愛のあるツッコミをお気軽にどうぞ。[policy]
    古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
    コメントはありません
    Comments Form

    コメントは承認後の表示となります。
    OpenIDでログインすると、即時に公開されます。

    OpenID を使ってログインすることができます。

    Identity URL: Yahoo! JAPAN IDでログイン