[CSS:counter(line)]如何用 CSS 來顯示區塊裡的序列行數


用CSS語法來顯示區塊內的行數

有時候在瀏覽一些 Coding 的教學網站時,
會發現很多的頁面,在顯示程式碼/原始碼的區塊裡,每一行的前面都有會顯示序列的行數,
感覺很酷,
這個行數的效果,在網頁上看起來就像是下面這個樣子:

//以下是隨便測試一段簡單的 JS 程式碼function hello(){var msg = "Hello World";alert(msg);}

於是常常有朋友會詢問說,這個行數的數字是怎麼寫上去的呢?
是用外掛的 Javascript 來做的嗎?
還是這是什麼特殊的網頁效果?


其實在區塊裡加上逐行的行數,方法比大家想像中的要來的簡單的多,只要用 CSS 語法就可以完成這個效果了。
接下來我們就來分享一下,用CSS來顯示區塊行數的小技巧。


以純 CSS 語法來實現添加行數


我們一樣以上面的 JS 範例來做說明,這個範例的原始碼是這樣的:


<pre><code>//以下是隨便測試一段簡單的 JS 程式碼</code>
<code>function hello(){</code>
<code>var msg = "Hello World";</code>
<code>alert(msg);</code>
<code>}</code></pre>

CSS 的部分,則是下面這樣:


pre{
counter-reset: line;
}
code{
counter-increment: line;
}
code:before{
content: counter(line);
}

然後顯示出來的結果,就是下面這個樣子,在每一行的前面,都會自動標上了行數:

//以下是隨便測試一段簡單的 JS 程式碼function hello(){var msg = "Hello World";alert(msg);}

CSS 顯示行數語法說明


接下來我們簡單說明一下,用這個 CSS 語法來顯示自動行數的意思。


由於我們在這裡的使用的範例,是以 PRE 和 CODE 的網頁標籤來顯示程式碼,所以下面的說明也會延續用這兩個標籤作為範例,如果不用 PRE 和 CODE 的話,也可以改用 DIV 和 SPAN。


1. counter-reset: line


首先是第一行:


pre{
counter-reset: line;
}

這一段語法,就是先宣告行數歸零,從頭開始,也就是行數會從1開始。


如果沒有加上這一行的話,那麼如果之前也有同樣標記行數的區塊,那麼行數就會延續,而不是從1開始了。
所以一定要記得加上這一段。


2. counter-increment: line;


接下來的第二行:


code{
counter-increment: line;
}

這一段,就是標記在 Pre 包裹起來的 Code 標籤,每一個的計數器都累計加一。


3. content: counter(line);


最後一行:


code:before{
content: counter(line);
}

這段語法,就是告訴 CSS 在顯示時,把區塊內每一個 Code 標籤的前面,都加上計數器的數字。


很容易懂吧 :)


除了序列數字,還可以再加上其他的輔助性文字或符號


上面的例子,基本上應該就是只有數字,不過大家可以看到除了數字外,後面還都了一個點點,像是 1. 2. 3. 這樣,那這個點點怎麼加上去的呢?


也很簡單,就直接寫在 CSS 語法裡就行了,像是下面這樣:


pre{
counter-reset: line;
}
code{
counter-increment: line;
}
code:before{
content: counter(line)". ";
}

除了點點,也可以依個人需要或是喜好,在數字的前後加上不同的字串或是符號,好比我們試著在前面加上一個代表 Number 的井字號『#』,在後面加上一個冒號『:』,那麼寫法就是:


pre{
counter-reset: line;
}
code{
counter-increment: line;
}
code:before{
content: "#"counter(line)": ";
}

在網頁上顯示出來的,就會是下面這樣:

//以下是隨便測試一段簡單的 JS 程式碼function hello(){var msg = "Hello World";alert(msg);}

當然,如果是要打上中文也是可以的,下面的例子則是在數字的前後,加上了『第幾行』這樣:

//以下是隨便測試一段簡單的 JS 程式碼function hello(){var msg = "Hello World";alert(msg);}

CSS 計數器在其他地方的應用


雖然我們這次範例是針對在特定區塊內,把一行加上序列行數。


不過同樣的語法,套用在其他地方,也可以顯示自動的編號,就像是使用 OL, LI 那樣的編號項目。


舉例來說,如果一篇很長的文章,裡面有很多的副標題(H2, H3...),若是希望在每個副標題前面自動加上編號,也可以使用這樣的語法。
非常方便。


那麼是不是要開始準備,自己動手做做看了呢?