有時候在瀏覽一些 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...)，若是希望在每個副標題前面自動加上編號，也可以使用這樣的語法。 非常方便。

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