html 选择自动增加行数,为网页中的源代码自动设置行号

最新推荐文章于 2022-11-02 18:09:25 发布

yang元祐

最新推荐文章于 2022-11-02 18:09:25 发布

阅读量1.1k

点赞数

文章标签： html 选择自动增加行数

本文演示了如何为网页中的源代码块自动设置行号。

现在，我们准备在网页中显示C++的Hello world。这段著名的代码如下所示：

#include

intmain()

{

std::cout <

return0;

}

在HTML中，一般使用

来显示源代码。

#include <iostream>

int main()

{

std::cout <

return 0;

}

第一行中，因为“”是HTML标签的标记，因此，我们需要将其转义，分别对应于“<”及“>”。虽然使用HTML表示这两个符号较怪，但在浏览器中就可以显示出正确的符号。(注：在Dreamweaver或其他HTML编辑器中，我们在设计视图中直接输入这两个符号，这些软件会自动为我们转义。)

在网页中显示效果如下：

这段源代码没有格式，也没有行号，因此看起来很不舒服。本文的目标，是将上面的源代码在网页中的显示转换为下面的形式:

其特点是：

自动缩进；

自动生成行号；

奇偶行以不同颜色显示；

高亮显示鼠标所指之行。

现在让我们开始这段奇幻之旅。

1. 稍加粉饰

先用CSS给它化点小妆。

pre.sourceCode {

background-color:#9FB5DE;

border:1pxsolidblack;

margin-left:2em;

}

效果：

背景为蓝色，黑边，且缩进。

2. Javascript前来整容

在HTML中，OL的每一个LI可以自动编号，可以将每行代码都转换为OL中的LI后可解决每行的自动编号问题。至于每行的不同颜色，可为LI设置不同的className属性。由于行号需要与代码区分开来，可为代码内容增加一个SPAN。因此，问题可细化为：

取出

中的每一行代码

将每行代码转化为

，为此设置代表奇偶行的className，且将代码内容置于中

将每个生成的

置于

之下

删除

节点下的所有子节点

在

节点之下增加

子节点

通过Javascript中的DOM，我们可以轻松地实现以上步骤。

window.onload = function() {

varpreElements = document.getElementsByTagName("pre");

for(vari = 0; i

vartarget = preElements.item(i);

if(target.className !="sourceCode") {

continue;

}

varcontent = target.firstChild.nodeValue;

varlinesArray = content.split(String.fromCharCode(13));

if(linesArray.length == 1) {

linesArray = content.split(String.fromCharCode(10));

}

varolContainer = document.createElement("ol");

varindex = 1;

for(varj = 0; j

varliContainer = document.createElement("li");

liContainer.className = index++ % 2 ? "odd":"even";

varspanContainer = document.createElement("span");

varaText = document.createTextNode(linesArray[j]);

spanContainer.appendChild(aText);

liContainer.appendChild(spanContainer);

olContainer.appendChild(liContainer);

}

while(target.firstChild) {

target.removeChild(target.firstChild);

}

target.appendChild(olContainer);

}

效果如下：

Javascript代码的长度貌似吓人，但每一步骤都较清晰。

第2行，使用一个匿名函数，在页面加载完毕时自动执行所有任务。

第3行，取得所有

标签。第5行至第36行，对每个

标签进行加工。

第6行，将每个

标签存至一个名为target的变量。第7至第9行，如果其className不是“sourceCode”，则不是我们所关心的内容，直接跳过。注意className这个非常特殊的属性(attribute)，我们不能使用getAttribute()来获得此属性值，而应直接通过该节点的className属性(property)来取出。Web标准还管不管了？

由于每个

下面只有一个文本型的子节点，因此在第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行所创建的

就布满了所需的内容。但此
1. 目前只存在于内存中，还看不见。

第31至33行，将

原来的内容全部删除，第35行换上加工完毕的

。移形换位，不是吗？

此时，查看页面源文件，我们看不出经过幕后整容后的真实DOM。Firefox可通过DOM Inspector来查看DOM结构。IE8也赶了新潮流。在IE8中按F12，调出开发人员工具，按Ctrl + G，就可以让其现形了。例如，对于源代码的第2行，其DOM结构如下：

int main()

在第2步中，章子怡(CSS)刚一露脸，就被张艺谋喊停：“停！舞台未妥，急甚急甚？”。现在既然张艺谋已经布置好舞台，章子怡兴高采烈地重新粉墨登场了。

3. CSS现身化妆

序号

CSS

目前效果

解析

pre.sourceCode ol {

padding: 0;

margin: 0;

margin-left: 0;

}

#include

int main()

{

std::cout << "Hello world";

return 0;

}

我们先设置

的样式。根据第2步的第35行，在DOM层级中，现在
1. 是

的直接子节点。

先将

的padding及margin先设为0。我们发现一个比较有趣的现象：
1. 所在的box不包含
2. 的序号。并且随着
  1. 的margin-left的值越大，
    1. 所在区域将逐渐
    2. 的标号包含进来。
      下面我们观察margin-left的值分别设为0、5、10、20、35时的不同情况。
      当margin-left等于0时的情况
      pre.sourceCode ol {
      padding: 0;
      margin: 0;
      margin-left: 5px;
      }
      #include
      int main()
      {
      std::cout << "Hello world";
      return 0;
      }
      当margin-left等于5px时的情况
      pre.sourceCode ol {
      padding: 0;
      margin: 0;
      margin-left: 10px;
      }
      #include
      int main()
      {
      std::cout << "Hello world";
      return 0;
      }
      当margin-left等于10px时的情况
      pre.sourceCode ol {
      padding: 0;
      margin: 0;
      margin-left: 20px;
      }
      #include
      int main()
      {
      std::cout << "Hello world";
      return 0;
      }
      当margin-left等于20px时的情况
      pre.sourceCode ol {
      padding: 0;
      margin: 0;
      margin-left: 35px;
      }
      #include
      int main()
      {
      std::cout << "Hello world";
      return 0;
      }
      当margin-left等于35px时的情况。对于百行之内的源代码，35px的值应该是较好的选择。
      原因：
      1. 有一个名为“list-sytle-position”的属性，其值可设为inside及outside。当该值设为outside时，
        所在box将不包含其下
        序号。这是默认值。当该值设为inside时，
        所在box将包含其下
        序号。上面的实验说明了一点：在该属性为outside时，随着
        的margin-left值增大，可以实现inside的效果。
        当
        
        的list-style-position之值设为inside时，更易实现本文的目标。但由于其值默认为outside，故本文不厌其烦地选择outside作为实现方式。
        2
        pre.sourceCode li
        {
        padding: 2px 10px;
        border-left: 2px groove silver;
        color: #333;
        }
        #include
        int main()
        {
        std::cout << "Hello world";
        return 0;
        }
        开始设置
        。
        padding设置行距。
        border-left将序号及代码内容分开。
        颜色设为稍淡点，以免分散读者阅读主文的注意力。
        3
        pre.sourceCode li.odd {
        background-color: #dbdbdb;
        }
        pre.sourceCode li.even {
        background-color: #d4d4d4;
        }
        #include
        int main()
        {
        std::cout << "Hello world";
        return 0;
        }
        设置
        的奇偶行。只需分别设置不同的背景色即可。
        4
        pre.sourceCode li:hover
        {
        background-color: #9FB5DE;
        }
        #include
        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)

yang元祐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 选择自动增加行数,为网页中的源代码自动设置行号

本文演示了如何为网页中的源代码块自动设置行号。现在，我们准备在网页中显示C++的Hello world。这段著名的代码如下所示：#includeintmain(){std::cout<return0;}在HTML中，一般使用来显示源代码。#include<iostream>intmain(){std::cout<return0;}第一行中，因为“”是HTML标签...
复制链接

扫一扫