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
引用本文,复制粘贴...