Blockquote with auto line numbering

If we can add line number in all shared code then we can indicate the specific line to visitors if they made query. You would be aware about Blogger new HTML editor that they have added this feature. As a result now we can easily identify the specific line.
So I have tried to add this in blockquote. Actually this code build with pure CSS and very easy to add into your blog.

DEMO

Copy the code from below and Paste it  Before ]]></b:skin>

blockquote {
  background-color:#eee;
  font:normal normal 12px/14px "Consolas","Courier New",Courier,monospace !important;
  color:#444;
  overflow:auto;
  margin:0 0 1em;
  padding:1em;
}
blockquote,
blockquote .line-number {
  /* Ukuran line-height antara teks di dalam tag <blockquote>
 dan <span class="line-number"> harus sama! */
  font:normal normal 12px/14px "Consolas","Courier New",Courier,monospace !important;
  display:block;
  white-space:pre;
}
 blockquote .line-number {
  float:left;
  margin:-1em 1em -1em -1em;
  text-align:right;
  background-color:#f1f1f1;
  color:#acacac;
  padding:1em .2em 1em .2em;
  border-right:1px solid #e0e0e0;
}
blockquote br {
display:none;
}
 blockquote .line-number span {
  display:block;
  padding:0 .7em 0 1em;
}
 blockquote .cl {
  display:block;
  clear:both;
} 

Then Copy the code from below and Paste it Before </body>

<script type='text/javascript'>
//<![CDATA[
var pre = document.getElementsByTagName('blockquote'),
    pl = pre.length;
for (var i = 0; i < pl; i++) {
    pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
    var num = pre[i].innerHTML.split(/\n/).length;
    for (var j = 0; j < num; j++) {
        var line_num = pre[i].getElementsByTagName('span')[0];
        line_num.innerHTML += '<span>' + (j+1) + '</span>';
    }
}
//]]>
</script> 

Save template and done.