mergelyにおける指定行のハイライトについて

Question

始めまして。
現在、別のプログラムによって出力されたソースコードに対する解析結果を可視化して表示するwebブラウザ上で動くアプリケーションを作成しようと試みています。
現在のアプリケーションは２つのソースコードを比較表示するためにmergelyを利用して表示しており、比較情報に加えて、別の解析ツールによって検出された行を更にハイライトしたいと考えているのですが、どのように改変すればよいのかがわからない状態です。
ソースコードはajaxのローカルパス指定によって渡されており、ハイライトしたい行番号情報はローカル変数へ渡されているという前提で、mergelyを呼び出しているjavascript上で実装できるのでしょうか。
もしくは、CodeMirrorやmergelyのjsファイルを改変する必要があるのでしょうか。また、その場合はどのように改編すると実装できそうでしょうか。
どなたかお力添えをよろしくお願いします。

Answer 1

どういうハイライトをしたいのかに依りますが、
現在公開されている Mergely# online diff ページ (http://www.mergely.com/editor)で
みると、
codemirror クラスの pre 要素が 各行に相当することが分かりますので、
たとえば 上記画面の左側の行たちは、

var lines_of_left_codes = $('.CodeMirror pre', '#mergely-editor-lhs');

で とることができそうです。あとは任意行がとれますので 任意のスタイルを付けてやれば
一応 質問されていることは実現できそうですね。

//5行目の背景を赤くする。
lines_of_left_codes.eq(5-1).css({background: '#C00'});

(デバッガ上のみで動作確認しています。)

このように行まではとれますから、ハイライト自体を行うことは
ライブラリのコードの改修無しでも大丈夫そうですね。

なお、対象となるコードが動的に変更されるような場合、
リアルタイムにハイライトも改める必要があるならば、
変更イベントをとって、随時メンテナンスしなくてはいけないので注意してください。

Comments

[TKS_UI]

書かれた通りの手順で行を取り出し、ハイライトすることが出来ました。
ありがとうございました。