google-code-prettifyに行番号をつける

javascript Googole prettify

okyuu.comのソースコード表示にも使っている
google-code-prettify
に対して　行番号を表示するように改造する方法です。
作戦としては
prettyPrint();を実行するとデフォルトでは

<pre class="prettyprint">
  class Test {
  }
</pre>

が

<pre class="prettyprint">
  <span class="kwd">class</span>...<br />
</pre>

のようなコードに書き換えられるのですが
行番号を表示するために

<table class="okyuu_code_table" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="okyuu_code_line">行番号</td>
      <td class="okyuu_code_body"><span class="kwd">class</span>..</td>
    </tr>
  </tbody>
</table>

という風に改造することです。
実際にprettify.js内の

タグを挿入している所でタグに変換すればよいので 関数 function recombineTagsAndDecorations(sourceText, extractedTags, decorations)内の

html.push(htmlChunk.replace(newlineRe, '<br />'));

の箇所をテーブルタグの閉じタグに変換します　具体的には

var br = openDecoration ? \
'</span></td></tr>^A^A^B^B<tr><td class="okyuu_code_line">^A_SOURCECODE_INDEX_^B</td><td class="okyuu_code_body"> \
<span class="' + openDecoration + '">' : \
'</td></tr>^A^A^B^B</td><td class="okyuu_code_line">^A_SOURCECODE_INDEX_^B</td><td class="okyuu_code_body">';

に書き換えます
簡単に説明しますと
タグでdecorationされている途中 open状態のものは で閉じ
次行でまた同じで開く処理を入れます
そうでなければ単純にでテーブル行を閉じます
"^A^A^B^B"というコントロールコードを入れているのは後ほど行数を数えるためのしるし
"^A_SOURCECODE_INDEX_^B"後ほど行数を数えてから行番号を挿入するためにいれています
テーブルタグに変換するためその直後の

    while (true) {
      // Determine if we're going to consume a tag this time around.  Otherwise
      // we consume a decoration or exit.

以下のコードを描画している直前で

    html.push('<table cellspacing="0" cellpadding="0" class="okyuu_code_table"><tbody><tr>\
<td class="okyuu_code_line">^A_SOURCECODE_INDEX_^B</td><td class="okyuu_code_body">');

を挿入し
コードの描画が終わる

	    return codes.join('')

の直前
でテーブルタグを閉じ先ほどの"^A^A^B^B"でsplitし
^A_SOURCECODE_INDEX_^Bを行番号に置き換えて終わりです

    html.push('</tbody></table>');
    var codes = html.join('').split(/^A^A^B^B/)
    for( var i = 0 ; i < codes.length ; i ++){
      codes[i] = codes[i].replace(/^A_SOURCECODE_INDEX_^B/,i+1);
    }