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>", "">&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下点击,会出现垂直滚动条,它把滚动条的宽度也计算进去了>_<