Electronエディタ(ACE)から書式を抜こうとしたら悲しい結果となった顛末
2016/06/14
[ad#top-1]
いま、Electronでプログラミング用のテキストエディタを作っているところなんです。前記事は以下の通り。前回同様、エディタライブラリーのACEを使っています。
作っているんですが、途中でふと気づいたのですが、プログラムコードをブログ掲載するためのハイライターに使えないかなと。僕は以前、次のようなものを作ったのですが、C#までは作ったものの、それ以外の言語をサポートできていません。当初の予定ではJavaScript, HTML, Java, PHPあたりは網羅しようと考えていたのですが、いかんせん、キーワードを特定して色付けするところに多くの手間がかかり頓挫しているんです。
で、Electronエディタを作ってる時に気付いたのは、キーワードの色付けに苦労しているのなら、すでに色付けがサポートされているACEを使えば簡単にできるんじゃないかということです。ElectronはHTML＋JavaScriptベースなので、おそらくHTMLでマークアップされているだろうと。我ながらナイスなアイデアだと思いましたね。
エディタ部分はHTMLの
<div id=”input_txt”></div>
の中にセットされているので、単純に、
var inputTxt = document.getElementById(“input_txt”).innerHTML;
とやればソースコードがタグごと抜けることが判明、しめしめと思っていたら、なんと見えている行数しか取得できないという悲しい結果に。例え100行以上あるソースコードでも、次のように20行しか表示されていないところから、取得しても20行分のHTMLしか取得できないということなのです。
インタプリタ言語なのに何でこんなに素早く色変換できるのか不思議でしたが、なんとなくその秘密を垣間見たような気がします。
ちなみに部分行ながら、キーワードにマークアップされた状態で取得できました。↓こんな風に。
<span class=”ace_keyword”>public</span>
全行取得さえすればCSSで簡単に色設定できるというわけです。
全行取得できないという問題については、今のところうまい案が浮かばず。ACEのメソッドにも残念ながら存在していなさそうです。あまりスマートなやり方ではないのですが、カーソル移動していって全行を分割しながら取得する方法しかないのかもしれません。重複は必ず発生すると思うので、目下その解決策を模索中です。
ていうか、だれか全行HTMLを取得方法知っていたら教えてもらいないですかね？？
[ad#ad-1]
スポンサーリンク