Oct 26
CoolCode默认显示模式是自动换行，当你的正文版面宽度很窄时，这样频繁的换行会使阅读代码变得困难。于是做了一点小改动，当点击代码界面时，自动显示滚动条，此时代码不换行。
需要改动的文件有.css，.js，.php。
.css：
.hl-surround {
background-color: #F9FBFC;
border: 1px solid #C3CED9;
padding: 0;
margin: 0;
margin-bottom: 5px;
width: 98%;
height: auto;
overflow: hidden;
white-space: normal;
text-align: left;
font-family: "Courier New", "BitStream Vera Sans Mono", Fixedsys, Courier, monospace;
}
主要是添加（改动）overflow: hidden 和 white-space: normal 这两个属性；
.js：
function switchscroll(id){
if(id.style.overflow!="auto"){
id.style.overflow="auto";
id.style.whiteSpace="nowrap";
}else{
id.style.overflow="hidden";
id.style.whiteSpace="normal";
}
}
把这个函数添加进去；
.php：
<div class="hl-surround" onclick="switchscroll(this);">
在.php中找到<div class="hl-surround"，在其中添加一个onclick的事件，一共有四处。
示例，点击代码窗口：
$options = array(
'numbers' => HL_NUMBERS_LI,
);
$hl =& Text_Highlighter::factory($lang, $options);
$this->blocks[$blockID] .= '<div class="hl-surround" onclick="switchscroll(this);">' . str_replace($this->hl_class, $this->hl_style, $hl->highlight($txt)) . '</div>';
$this->blocks[$blockID] = preg_replace('/<span style="[^"]*?"></span>/', '', $this->blocks[$blockID]);
$this->blocks[$blockID] = str_replace('<ol class="hl-main">',
'<ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)">',
$this->blocks[$blockID]);
$this->blocks[$blockID] = str_replace(""> </span></li>", ""> </span></li>", $this->blocks[$blockID]);
$this->blocks[$blockID] = preg_replace('/<li><span style=(.*?)> </si', '<li><span style=\1> <', $this->blocks[$blockID]);
if ($hackphp) {
$this->blocks[$blockID] = str_replace("<span style="color: Blue;"><?php</span></li>n<li>", '', $this->blocks[$blockID]);
$this->blocks[$blockID] = str_replace('<li><span style="color: Blue;">?></span></li>', '', $this->blocks[$blockID]);
}
附件是改好的文件。
BTW: IE真是...不好说了，注意到没，点击后，在FireFox下不会出现垂直滚动条，因为那个滚动条宽度并没计算到原容器里面，而在IE下点击，会出现垂直滚动条，它把滚动条的宽度也计算进去了>_<
CoolCode Hack 157
