mergelyを利用した作成物が正しく動作しません

以前mergelyで指定行のハイライトを行う方法について質問したものです。リンク内容
以前の質問への回答を元に、以下の様なものを作成しました。

入力として、以下の様な内容のテキストファイルを与えます。
ソースコード名1,ハイライトする行
ソースコード名2,ハイライトする行
・・
・・

htmlのbodyは以下のようになっています

lang
1<input id="file" name="file" type="file" />
2<div id = "br"></div>
3
4<div id="mergely-resizer">
5	<div id="compare">
6	</div>
7</div>
8
9<div id="view_area" class="filelist">ファイルリストがここに表示されます。</div>

scriptは以下のようになっています。

lang
1
2$(document).ready(function () {
3	$('#compare').mergely({
4		//mergylyの設定(初期省略)
5	});
6	
7	document.querySelector("#file").addEventListener('change', function(e) { 
8		if (window.File) {
9			var input = document.querySelector('#file').files[0];
10			var reader = new FileReader();
11			reader.addEventListener('load', function(e) {
12				//ファイルリストが書かれたファイルを読み込み、
13				//読み込んだ結果をグローバル変数lines[]へ格納する(省略)
14				var fls = "";
15				for(i=0;i<lines.length-1;i++){
16					fls += "<input type=\"button\" value=\"";
17					var leftfile = lines[i].split(",");
18					var rightfile = lines[i+1].split(",");
19					fls += leftfile[0] + "~" + rightfile[0] + "\" ";
20					fls += "onclick=\"OnClick(" + i + ")\"";
21					fls += "\" ><br>";
22				}
23				document.getElementById('view_area').innerHTML = fls;
24        
25			}, true); 
26			reader.readAsText(input, 'UTF-8');
27		}
28	}, true); 
29});
30
31function OnClick(lineno){
32	var left_path = "files\\" + lines[lineno].split(",")[0];
33	$.ajax({
34		type: 'GET', async: true, dataType: 'text',
35		url: left_path,
36		success: function (response) {
37			$('#compare').mergely('lhs', response);
38		},
39		error: function(xhr, status, err) {
40			$('#compare').mergely('lhs', "");
41		}
42	});
43	
44	var right_path = "files\\" + lines[lineno + 1].split(",")[0];
45	$.ajax({
46		type: 'GET', async: true, dataType: 'text',
47		url: right_path,
48		success: function (response) {
49			$('#compare').mergely('rhs', response);
50		}
51	});
52	
53	leftredline = lines[lineno].split(",")[1];
54	rightredline = lines[lineno + 1].split(",")[1];
55
56	endcounter = 0;
57	intervalID = setInterval("highlight()",1000); //指定行番号をハイライト
58}
59
60function highlight(){
61	endcounter += 1;
62	if(endcounter == 2){
63		var lines_of_left_codes = $('.CodeMirror pre','#compare-editor-lhs');
64		var lines_of_right_codes = $('.CodeMirror pre','#compare-editor-rhs');
65		lines_of_left_codes.eq(leftredline).css({background: '#C00'});
66		lines_of_right_codes.eq(rightredline).css({background: '#C00'});
67		clearInterval(intervalID);
68		lines_of_left_codes = null;
69		lines_of_right_codes = null;
70	}
71}
72

このような形で作成し、動作させたところ、表示するソースコードの行数が少ない場合には指定した行のハイライトを正しく行うことが出来ました。しかし、表示するソースコードが100行以上のような少し行数が多いものになると、ハイライトが行えませんでした。
行数が少ない場合には正しくハイライトできていることから、取得しようとする要素が大きすぎると正しく取得できないのではないかと考えていますが、確信が持てません。
取得する要素が大きいと正しく要素を取得できないような事はあるのでしょうか。また、そういったことがある場合にはどのように対処するのが良いのでしょうか。もしくは、その他に今回作成したものが正しく動かない原因となっている可能性が有りましたら教えていただきたいです。

どなたか、お力添えをお願いいたします。