syntaxhighlighter代码高亮功能优化
作者 斯人 | 发布于 2013 年 2 月 18 日
WordPress

syntaxhighlighter 是wp很强大的一个代码高亮插件,可以把我们的代码很友好的显示出来,支持多种样式,

虽然很方便,但是也有不足,比如我在插入一段代码时,如果代码很长没有换行,就会出现滚动条,这在用户阅读代码时就会很不方便,

要不断的拖拽滚动条,自己都厌恶,别说其他人了,所以就优化一下吧。

思路如下:

当鼠标移动到代码窗口时,自动将代码窗口的宽度加宽到960px,当然这个宽度也可以是浏览器的宽度,960正好跟我风格的最大

尺寸相同。因为我的风格是左右布局,所以如果要让代码窗口自动加宽,那就要隐藏掉右侧的sidebar,但是这样就很别扭,右侧的sidebar

就会来回闪动,也很不友好,于是选择了另外一种方式,用position和z-index来实现。

为了不影响 syntaxhighlighter 原生的东西,以免后期需要升级时造成麻烦,于是在footer底部用原生的js来实现,事件绑定给

window.onload。注意,这个onload会在页面执行完后才执行,所以用它再合适不过了。

暂时不支持IE,那贴代码吧。

var isie=document.all?1:0;
var status=false,is_home=''; //is_home:如果在首页那就不启用此功能,只有在detail页才启用。
var old_width=620,timeId=null;
//获取所有 节点样式为cls的节点
function getNodeByclass(cls){
	var doms=document.all?document.all:document.getElementsByTagName('*'),a,clsname,nodes=new Array(),nt;
	for(var i in doms){
		a=doms[i];
		nt=a.tagName;
		clsname=a.className;
		if(nt=='DIV'){
			
			if(clsname &&(clsname.substr(0,cls.length)==cls)){
				nodes.push(a);
			}
		}
		
	}
	return nodes;
}
//绑定事件和callback
function addEvent(obj,type,callback){

	if(typeof(obj)=='undefined')
		return false;
	if(obj.addEventListener){
		obj.addEventListener(type,callback,false);
	}else if(obj.attachEvent){
		obj.attachEvent(type,callback,false);
	}
}
//移除事件
function removeEvent(obj,type){
	if(typeof(obj)=='undefined')
		return false;
	if(obj.removeEventListener){
		obj.removeEventListener(type);
	}else if(obj.detachEvent){
		obj.detachEvent(type);
	}
}
//获取某节点的父节点
function getparent(node,clsname){
	var cname=node.className;
	if(cname && (cname.substr(0,clsname.length)==clsname))
		return node;
	else{
		if(node.parentNode){
			return getparent(node.parentNode,clsname);
		}
		return null;
	}
}
//实现代码层的扩展
function expansion(e){
		
		var a=getparent(e.target,'syntaxhighlighter').parentNode;
		document.getElementById('content').style.overflow='visible';
		

		a.style.width=960+'px';
		a.style.position='relative';
		a.style.zIndex=99;
		a.setAttribute('status','open');
		var entry=document.getElementById('article-entry');
		//entry.style.width=960+'px';
		entry.style.overflow='visible';
}
//恢复代码层
function reset(e){
		var a=getparent(e.target,'syntaxhighlighter').parentNode;
		if(a.getAttribute('status')!='open')
			return false;
		document.getElementById('content').style.overflow='hidden';
		a.style.width=620+'px';
		a.style.position='relative';
		a.style.zIndex=1;
		a.setAttribute('status','');
		var entry=document.getElementById('article-entry');
		entry.style.width=620+'px';
		entry.style.overflow='hidden';
}
//HOOK
function hook(){
	if(isie || is_home) //非IE/非首页
		return false;
	nodes=getNodeByclass('syntaxhighlighter');
	for(var a in nodes){
		addEvent(nodes[a],'mouseover',expansion); //绑定鼠标事件
		addEvent(nodes[a],'mouseout',reset);
	}
}
window.onload=hook; //注册事件

咋样,现在阅读代码是不是舒服了很多。。。 ^.^

原文出处:http://www.imsiren.com/archives/744