本鱼拟成立工作室承接项目开发/软件定制/云设施开发运维/办公设备技术支持等,如您有相关需求,欢迎来询 | ::博客文章推荐::

PHPWind V5.3 程序代码高亮代码插件

: 原创作品 木魚 3038℃ 0评论

作为一个技术论坛或者说编程论坛来说,代码高亮功能是很有必要的,呵呵。
可是PHPWind论坛并没有天然集成这个功能,在网上搜了搜也没有搜到相关说明,所以这次来自己修改一个,呵呵。

首先为了减少修改难度以及减轻服务器负担,所以首先一条便是舍弃服务器端脚本而改用客户端脚本。
经过选择,选择来自 Google 的 Prettify Code脚本,脚本自动识别程序语言类别,支持 C,Java,Python,Bash,SQL,HTML,XML,CSS,Javascript以及Makefiles,部分支持 Ruby,PHP,Awk,Perl 。好像还有一些问题,不过问题应该不大,不过是有时候失效而已,最重要的是用它的话修改会简单很多 🙂

Prettify Code 主页在 http://google-code-prettify.googlecode.com/

根据主页的说明,Prettify Code的使用方法如下:
1,引入CSS以及客户端脚本;
2,为Window的Onload事件绑定函数;
3,把要高亮格式的程序代码用样式名为prettyprint的<pre>或<code>标签围起来。
完工。

下面开始修改(此次修改的PHPWind版本是5.3)。

先在帖子中插入天然的[ code]标签,显示结果如下:

    $message=preg_replace("/[ code](.+?)[/code]/eis","phpcode('\1')",$message,$db_cvtimes);
}

这个过程中会调用phpcode()函数,现在看这个函数内部:(第258行到第265行)

function phpcode($code){
    global $phpcode_htm,$codeid;
    $code = str_replace(array("[attachment=",'\"'),array("[attachment=",'"'),$code);
    $codeid ++;
    $phpcode_htm[$codeid]="<h6 class="quote"><a href="javascript :"  onclick="CopyCode(document.getElementById('code$codeid'));">Copy code</a></h6><blockquote id="code$codeid">".preg_replace("/^(<br />)?(.*)/is","\2",$code)."</blockquote>";

    return "<twind_phpcode_$codeidt>";
}

由这段程序代码分析,程序会生成类似下面这样的标签:

<h6 class="quote">
    <a href="javascript :"  onclick="CopyCode(document.getElementById('code$codeid'));">Copy code</a>
</h6>
<blockquote id="code$codeid">
    程序代码
</blockquote>

其中的$codeid表示的这段脚本的代码ID,是一个自增列。

那和前面prettify code的用法对比一下,那么很明显就能知道怎么办了:
1,替换BlockQuote标签为pre,并为它加上prettyprint的样式;
2,引入脚本以及CSS文件。

首先解决第一条,这个好办,直接修改程序如下:

function phpcode($code){
    global $phpcode_htm,$codeid;
    $code = str_replace(array("[attachment=",'\"'),array("[attachment=",'"'),$code);
    $codeid ++;
    $phpcode_htm[$codeid]="<h6 class="quote"><a href="javascript :"  onclick="CopyCode(document.getElementById('code$codeid'));">Copy code</a></h6><pre class="prettyprint" id="code$codeid">".preg_replace("/^(<br />)?(.*)/is","\2",$code)."</pre>";

    return "<twind_phpcode_$codeidt>";
}

再来解决第二条。由于解析过程是个客户端过程,所以从减少客户端浏览器负担考虑,没有脚本代码的时候不插入CSS样式以及解析脚本比较好。更好的便是只要修改一个程序文件而不用修改很多程序文件。
好的回到程序上来。注意到在这个过程中有个 $codeid 变量,并且在每次插入一个之前自动加1,那么,如果我们检测到这个变量小于2的时候便可以判断是第一次插入脚本了,那于是我们导入CSS和脚本不就可以了?
好的,根据这个思路,修改如下。

function phpcode($code){
    global $phpcode_htm,$codeid;
    $code = str_replace(array("[attachment=",'\"'),array("[attachment=",'"'),$code);
    $codeid ++;
    $phpcode_htm[$codeid]=(($codeid<2)?"<link type="text/css" rel="stylesheet" href="codehighter/prettify.css"></link><script language="javascript" src="codehighter/prettify.js"></script>":"")."<h6 class="quote"><a href="javascript :"  onclick="CopyCode(document.getElementById('code$codeid'));">Copy code</a></h6><pre class="prettyprint" id="code$codeid">".preg_replace("/^(<br />)?(.*)/is","\2",$code)."</pre>";

    return "<twind_phpcode_$codeidt>";
}

OK,修改后的脚本如下:

screen.width-461) window.open('http://www.itc8.cn/attachment/Day_071024/33_65_b1bb4c4cf83ca68.png');" src="https://ssl-static.fishlee.net/il.go?http%3a%2f%2fwww.itc8.cn%2fattachment%2fDay_071024%2f33_65_b1bb4c4cf83ca68.png" border=0>

OMG …. 🙁
开始想办法,当然还是从客户端考虑。
既然 Prettify Code 不能自动转换  标签,那么我们为它转换好不好?
打开压缩后的客户端脚本……脚本之乱,呃,先让我晕一下。

不过不难。顺藤摸瓜我们会发现它最终执行到这里来了:

if(!n){var k=H(h);k=k.replace(/(?:rn?|n)$/,"");var m=ca(k);

哦。。。原来只过滤了换行没有过滤空格的HTML转义,既然会出现问题,那么我们就把它手动转回来吧…… 🙂
改成这样:

if(!n){var k=H(h);k=k.replace(/ ;/g," ");k=k.replace(/(?:rn?|n)$/,"");var m=ca(k);

恩……没错,就是很垃圾地在转回空格 @_@

不管了,我们再来测试一下……

http://www.ttpretty.com/Download/Detail.aspx?cguid=b82c1be9-35f9-0035-ef17-f5c75ce91499&guid=2118fb61-a883-8e1e-c83c-9aa65e4db960
注意,PHPWind一定要是5.3的才可以用这个包……如果不是的话,请自行按照本文的方法修改……

谢谢大家……

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址