您的位置：首页 > 编程语言

用脚本格式化博客园上文章中的示例代码

2007-09-02 20:48 399 查看

按照网友提出的意见，脚本代码已经更新。详情请查看 /article/7015159.html。本文中的示例也相应被更新了。

在博客上写文章，粘贴代码的时候如何格式化好，是我经常碰到的一个问题。用博客园提供的那些格式化工具倒是不错，不过要做些更改的话就比较麻烦点。而且像我这样比较喜欢直接编辑 HTML 的不是很喜欢使用这些工具。因为要使用这些工具，必须换到可视化编辑状态。而再换回到 HTML 状态的时候，原来格式化好的 HTML 可能就被编辑器给弄得乱七八糟了 :(

所以最近干脆自己想办法用 javascript 写了一个非常简单的格式化代码的工具。现在完成的功能仅仅是给代码加行号而已，大家如果有兴趣可以继续完善这段程序哦！在粘贴代码的时候，将所有的代码放到 PRE 元素里，因为在 PRE 元素里面的内容是保持我们看到的状态的，换行、空格、退格等等都会显示出来，而不是像其他 HTML 元素那样都给忽略了。现在的运行效果如下：

public class MyClass
{
public int a;
public int b;
public MyClass(int a, int b){
this.a = a;
this.b = b;
}
}

public class MyClass
{
public int a;
public int b;
public MyClass(int a, int b){
this.a = a;
this.b = b;
}
}

这个简单的格式化工具还有一些其他重要的功能没有完成，包括着色功能、按语言类型进行不同的格式化等等。如果有时间我会继续完成这个功能。大家谁有兴趣的话也可以接着往下写啊，呵呵！
需要完成的功能包括：

着色功能：关键字的着色

着色功能：注释的着色

着色功能：字符串的着色等等

在 pre 元素上比较需要格式化的语言的类型，比如 type="C#", type="C++" 等等

要使用这个工具，需要做以下的设置：

将要粘贴的代码放到 pre 元素中

设置 pre 元素的 class 属性为 csharp_code： <pre class="csharp_code">。
如果不想分析这个 pre 元素，可以添加 ignore 属性，如： <pre class="csharp_code" ignore="true">

然后在页面最下面添加下面这段 javascript 代码：

var func = function(){
var r1 = new RegExp("\x20", "ig");
var r2 = new RegExp("\x09", "ig");
var f1 = function(h){
h = h.replace(r1,' ');
return h.replace(r2,'  ');
}
var f2 = function(node){
var h = node.innerHTML;
var s = "";
var pos = 0;
while(pos < h.length){
var lp = h.indexOf('<', pos);
if(lp<0){
s += f1( h.substr(pos) );
break;
}else{
s += f1( h.substring(pos,lp) );
}
var rp = h.indexOf('>', lp+1);
if(rp<0){
s += f1( h.substr(lp) );
break;
}else{
s += h.substring(lp,rp);
pos = rp;
}
}
return s;
}
function updatePreElement(p){
var m = f2(p);
var s = "";
var pos = 0;
var line = 0;
while(pos<m.length){
var n = m.indexOf("\n",pos);
s += '<div class="csharp_codeLine"><div class="csharp_lineNumber">' + (++line) + '</div>';
if(n>=0){
s += m.substring(pos,n);
}else{
s += m.substr(pos);
s += '</div>';
break;
}
s += '</div>';
pos = n+1;
}
p.innerHTML = s;
}
var nodes = document.getElementsByTagName("pre");
for(var i=0;i<nodes.length;i++){
var n = nodes[i];
var ignore = n.getAttribute("ignore");
if(ignore){
ignore = ignore.toLowerCase();
}
if(n.className && n.className.toLowerCase()=="csharp_code" && ignore!="true"){
updatePreElement(n);
}
}
}
func();

另外用到的一些 CSS 样式：

.csharp_code
{
padding: 8px;
background-color: #e6e6e6;
white-space: pre;
overflow: hidden;
}
.csharp_code, .csharp_code UL
{
font-family: 新宋体, Verdana, Tahoma;
font-size: 9pt;
}
.csharp_code div.csharp_codeLine
{
margin: 0;
padding: 0;
color: #000;
display: block;
float: none;
height: 12pt !important;
white-space: nowrap;
overflow: hidden;
}
.csharp_code .csharp_lineNumber
{
color: #2b91af;
border-color: #6ce26c;
border-style: solid;
border-width: 0px 2px 0px 0;
display: block;
float: left;
width: 20px;
height: 12pt !important;
text-align: right;
vertical-align: middle;
margin: 0 8px 0 0;
padding: 0 2px 0 0;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航