看到大家的留言,说加行号会影响 copy 出来的代码。有的网友还提示说可以用 UL/LI。实际上这些我也都试过,效果并不理想。一方面即使使用 UL/LI,copy 出来的代码仍然会有前导字符(Firefox中);另外就是 LI 似乎没有完全像 PRE 那么保持原有代码的缩进格式(缩进两级以上的时候似乎有问题)。所以我也在考虑其他的方法。
开始想到的是在代码的顶端或者其他什么位置加一个链接;当用户点击这个链接的时候,未加行号的代码就被自动拷贝了。但是很可惜的是这个方法在 Firefox 中通不过,由于安全的原因用脚本是不能执行拷贝命令的(不知道有没有其他的方法?)。因此这个就没有继续下去了。后来想到的办法就是现在使用的:在 PRE 中加一个一行两列的 TABLE;左边一列中显示行号,右边显示代码内容。这个方法在我本机的测试都挺好的。可是刚才在博客园上测试的时候竟然发现这两别的字体大小不太一样!奇怪,什么时候再仔细查查...
另外,在这次使用的脚本中,我增加了以下几个功能:
- C# 关键字、注释、字符串的着色
- 不同的代码类型可以使用不同的类来完成着色功能
- 允许不添加行号(默认情况下是添加的)
现在要使用这个脚本的话,只需要两个简单的步骤就可以了:
-
在 HTML 中添加这个脚本的引用
<script type="text/javascript" src="https://files.cnblogs.com/Kellin/CodeFormatter.js"></script> - 将需要写在博客中的代码放到一个 PRE 元素中,并为这个 PRE 元素添加一个叫 SourceCode 的属性。这个属性的取值范围包括:C#, C, C++, Java, JS 等等。现在完成的只有 C#(均不
区分大小写)。比如:
<pre sourceCode="C#"> - 允许不添加行号(默认情况下是添加的)