Creating Automatic Numbering on Blockquote Tags

Creating Automatic Numbering on Blockquote Tags

Creating Automatic Numbering on Blockquote Tags - Many of your fellow bloggers use blockquote tags to share code. Although in fact, I am the more advocated use of the pre tag than blockquote.
For friends who are still loyal to the use of blockquote, I try to make automatic numbering on Blockquote. Her CSS I modified from the DTE tutorial in 'making automatic numbering on PRE tags'. 

Keep this code above]]> </ b: skin> or </ style>
blockquote { background-color:#eee; font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important; color:#444; overflow:auto; margin:0 0 1em; padding:1em; } blockquote, blockquote .line-number { font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","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; }

Keep this code above </ 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>

Maybe useful.
Previous Post
Next Post

post written by:

0 Comments: