本文演示了如何为网页中的源代码块自动设置行号。
现在，我们准备在网页中显示C++的Hello world。这段著名的代码如下所示：
- #include <iostream>
-
- int main()
- {
- std::cout << "Hello world";
- return 0;
- }
在HTML中，一般使用<pre>来显示源代码。
- <pre class="sourceCode">#include <iostream>
- int main()
- {
- std::cout << "Hello world";
- return 0;
- }</pre>
第一行中，因为“<”及“>”是HTML标签的标记，因此，我们需要将其转义，分别对应于“<”及“>”。虽然使用HTML表示这两个符号较怪，但在浏览器中就可以显示出正确的符号。（注：在Dreamweaver或其他HTML编辑器中，我们在设计视图中直接输入这两个符号，这些软件会自动为我们转义。）
在网页中显示效果如下：
这段源代码没有格式，也没有行号，因此看起来很不舒服。本文的目标，是将上面的源代码在网页中的显示转换为下面的形式:
其特点是：
- 自动缩进；
- 自动生成行号；
- 奇偶行以不同颜色显示；
- 高亮显示鼠标所指之行。
现在让我们开始这段奇幻之旅。
1. 稍加粉饰
先用CSS给它化点小妆。
- <style type="text/css">
- pre.sourceCode {
- background-color: #9FB5DE;
- border: 1px solid black;
- margin-left: 2em;
- }
- </style>
效果：
背景为蓝色，黑边，且缩进。
2. Javascript前来整容
在HTML中，OL的每一个LI可以自动编号，可以将每行代码都转换为OL中的LI后可解决每行的自动编号问题。至于每行的不同颜色，可为LI设置不同的className属性。由于行号需要与代码区分开来，可为代码内容增加一个SPAN。因此，问题可细化为：
- 取出<pre>中的每一行代码
- 将每行代码转化为<li>，为此<li>设置代表奇偶行的className，且将代码内容置于<span>中
- 将每个生成的<li>置于<ol>之下
- 删除<pre>节点下的所有子节点
- 在<pre>节点之下增加<ol>子节点
通过Javascript中的DOM，我们可以轻松地实现以上步骤。
- <script type="text/javascript">
- window.onload = function () {
- var preElements = document.getElementsByTagName("pre");
- for (var i = 0; i < preElements.length; i++) {
- var target = preElements.item(i);
- if (target.className != "sourceCode") {
- continue;
- }
- var content = target.firstChild.nodeValue;
- var linesArray = content.split(String.fromCharCode(13));
- if (linesArray.length == 1) {
- linesArray = content.split(String.fromCharCode(10));
- }
-
- var olContainer = document.createElement("ol");
- var index = 1;
- for (var j = 0; j < linesArray.length; j++) {
- var liContainer = document.createElement("li");
- liContainer.className = index++ % 2 ? "odd" : "even";
- var spanContainer = document.createElement("span");
- var aText = document.createTextNode(linesArray[j]);
- spanContainer.appendChild(aText);
- liContainer.appendChild(spanContainer);
- olContainer.appendChild(liContainer);
- }
- while (target.firstChild) {
- target.removeChild(target.firstChild);
- }
-
- target.appendChild(olContainer);
- }
- }
- </script>
效果如下：
Javascript代码的长度貌似吓人，但每一步骤都较清晰。
第2行，使用一个匿名函数，在页面加载完毕时自动执行所有任务。
第3行，取得所有<pre>标签。第5行至第36行，对每个<pre>标签进行加工。
第6行，将每个<pre>标签存至一个名为target的变量。第7至第9行，如果其className不是“sourceCode”，则不是我们所关心的内容，直接跳过。注意className这个非常特殊的属性(attribute)，我们不能使用getAttribute()来获得此属性值，而应直接通过该节点的className属性(property)来取出。Web标准还管不管了？
由于每个<pre>下面只有一个文本型的子节点，因此在第11行，可通过其firstChild.nodeValue来快速取得其内容。
第12至15行开始对其内容进行断行。换行符在IE中表现为代码为13的字符，而在Firefox中却只为10。因此，先应对IE后，再来对付Firefox。Web标准路漫漫，连CharCode都暗藏杀机！断行后，linesArray变量成为存储每行内容的数组。
对每行内容，第21行根据其奇偶性分别设置“even”及“odd”的className，第24行为每行内容创建一个文本节点，第26至28行，文本->span->li>ol。这样，第17行所创建的<ol>就布满了所需的内容。但此<ol>目前只存在于内存中，还看不见。
第31至33行，将<pre>原来的内容全部删除，第35行换上加工完毕的<ol>。移形换位，不是吗？
此时，查看页面源文件，我们看不出经过幕后整容后的真实DOM。Firefox可通过DOM Inspector来查看DOM结构。IE8也赶了新潮流。在IE8中按F12，调出开发人员工具，按Ctrl + G，就可以让其现形了。例如，对于源代码的第2行，其DOM结构如下：
- <LI class="odd">
- <SPAN>int main()</SPAN>
- </LI>
在第2步中，章子怡(CSS)刚一露脸，就被张艺谋喊停：“停！舞台未妥，急甚急甚？”。现在既然张艺谋已经布置好舞台，章子怡兴高采烈地重新粉墨登场了。
3. CSS现身化妆
| 序号 |
CSS |
目前效果 |
解析 |
| 1 |
pre.sourceCode ol {
padding: 0;
margin: 0;
margin-left: 0;
} |
#include <iostream>
int main()
{
std::cout << "Hello world";
return 0;
} |
我们先设置<ol>的样式。根据第2步的第35行，在DOM层级中，现在<ol>是<pre>的直接子节点。
先将<ol>的padding及margin先设为0。我们发现一个比较有趣的现象：<ol>所在的box不包含<li>的序号。并且随着<ol>的margin-left的值越大，<ol>所在区域将逐渐<li>的标号包含进来。
下面我们观察margin-left的值分别设为0、5、10、20、35时的不同情况。
当margin-left等于0时的情况 |
pre.sourceCode ol {
padding: 0;
margin: 0;
margin-left: 5px;
} |
#include <iostream>
int main()
{
std::cout << "Hello world";
return 0;
} |
当margin-left等于5px时的情况 |
pre.sourceCode ol {
padding: 0;
margin: 0;
margin-left: 10px;
} |
#include <iostream>
int main()
{
std::cout << "Hello world";
return 0;
} |
当margin-left等于10px时的情况 |
pre.sourceCode ol {
padding: 0;
margin: 0;
margin-left: 20px;
} |
#include <iostream>
int main()
{
std::cout << "Hello world";
return 0;
} |
当margin-left等于20px时的情况 |
pre.sourceCode ol {
padding: 0;
margin: 0;
margin-left: 35px;
} |
#include <iostream>
int main()
{
std::cout << "Hello world";
return 0;
} |
当margin-left等于35px时的情况。对于百行之内的源代码，35px的值应该是较好的选择。
原因：<ol>有一个名为“list-sytle-position”的属性，其值可设为inside及outside。当该值设为outside时，<ol>所在box将不包含其下<li>序号。这是默认值。当该值设为inside时，<ol>所在box将包含其下<li>序号。上面的实验说明了一点：在该属性为outside时，随着<ol>的margin-left值增大，可以实现inside的效果。
当<ol>的list-style-position之值设为inside时，更易实现本文的目标。但由于其值默认为outside，故本文不厌其烦地选择outside作为实现方式。 |
| 2 |
pre.sourceCode li
{
padding: 2px 10px;
border-left: 2px groove silver;
color: #333;
} |
#include <iostream>
int main()
{
std::cout << "Hello world";
return 0;
} |
开始设置<li>。
padding设置行距。
border-left将序号及代码内容分开。
颜色设为稍淡点，以免分散读者阅读主文的注意力。 |
| 3 |
pre.sourceCode li.odd {
background-color: #dbdbdb;
}
pre.sourceCode li.even {
background-color: #d4d4d4;
} |
#include <iostream>
int main()
{
std::cout << "Hello world";
return 0;
} |
设置<li>的奇偶行。只需分别设置不同的背景色即可。 |
| 4 |
pre.sourceCode li:hover
{
background-color: #9FB5DE;
} |
#include <iostream>
int main()
{
std::cout << "Hello world";
return 0;
} |
高亮显示鼠标所在行。IE8已经支持非链接标签的hover伪类，喜讯。现在，左右两边的效果已经完全一致了。 |
结语
就像张艺谋与章子怡这对好搭档经常获得电影节大奖一样，Javascript与CSS的完美组合，可收到出乎意料之外的效果。解决问题时，如果我们能充分发挥Javascript及CSS的长处，可弥补现在HTML中Web组件的匮乏。
（本文通过IE8/WinXP的环境下的测试）
（注：因为CSDN的博客不鼓励博主在发表文章时使用CSS及JavaScript，因此本文的一些需要CSS及JavaScript支持的特点无法显示出来。因此，拟将效果转换为图片的形式表现出来。本文尚在转化中。 2011-7-27）
