用CSS畫行號

看了好多網頁版代碼編輯器還有在網頁上顯示代碼高亮的工具，發現這個行號顯示都搞的特別高級。感覺那樣很不好，抄襲起來太麻煩。查閱CSS文檔之後，發現還是很容易用CSS實現的，效果也基本令人滿意。

CSS代碼如下

@counter-style lno { system: extends decimal; pad: 4 " ";}pre { margin: 0 0 0 5ch; counter-reset: line; width: 4ch; white-space: pre-wrap; word-break: break-all; outline: 1px solid red; border-left: 1px solid blue; background-color: #EEE; padding: 0 1ch;}pre span.line { counter-increment: line; box-decoration-break: clone;}pre span.line::before { content: counter(line, lno); margin: 0 2ch 0 -6ch;}

舉個例子

<pre><span class="line">aa aaa aaa</span><span class="line">a</span><span class="line">a</span><span class="line">a</span><span class="line">a</span><span class="line">a</span><span class="line">a</span><span class="line">a</span><span class="line">a</span><span class="line">a</span><span class="line">a</span><span class="line">a</span><span class="line">a</span></pre>

沒想到如此簡單

推薦閱讀：