Hack：切换CoolCode显示模式

2007-10-26 – 8:32 下午 --- 4,299 次阅读

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>", "">&nbsp;</span></li>", $this->blocks[$blockID]);
$this->blocks[$blockID] = preg_replace('/<li><span style=(.*?)> </si', '<li><span style=\1>&nbsp;<', $this->blocks[$blockID]);

if ($hackphp) {
    $this->blocks[$blockID] = str_replace("<span style="color: Blue;">&lt;?php</span></li>n<li>", '', $this->blocks[$blockID]);
    $this->blocks[$blockID] = str_replace('<li><span style="color: Blue;">?&gt;</span></li>', '', $this->blocks[$blockID]);
}

附件是改好的文件。

BTW: IE真是...不好说了，注意到没，点击后，在FireFox下不会出现垂直滚动条，因为那个滚动条宽度并没计算到原容器里面，而在IE下点击，会出现垂直滚动条，它把滚动条的宽度也计算进去了>_<