emlog代码高亮插件
emlog一直是我折腾的对象,原因很简单,他相对于WP来说比较简单,易懂,适合我这新手折腾,这次为了能够完成这个代码高亮的插件,我几乎在网上找了N多的开源的代码高亮的源码,然后一个个比较过去,最终选择了chili,原因就是因为其体积小,而且能智能加载js。当然,其他的开源的高亮源码也能有上述优点,但是用法会比较复杂,不利于和emlog结合。
选定chili后,我就忙着制作成插件了,原本他高亮的容器是“code”,因为我自己用得最多的是“pre”,所以我把他默认的容器修改成了“pre”。来看看几段经过他高亮的代码吧:
<?php
//php高亮
function highlight(){
global $log_content;
if(strpos($log_content, '<pre class=')) {
echo '<script type="text/javascript" src="'.BLOG_URL.'lib/js/jquery/jquery-1.2.6.js"></script>';
//...
}
}
?> //js高亮
function keyw(){
if (document.keyform.keyword.value==""){
alert("请输入要搜索的关键字");
document.keyform.keyword.focus();
return false;
}
} <!--html高亮 --> <div class="dock" id="dock"> <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a> </div>
/* css高亮 */
.navBar ul li a span.out{top:0}
.navBar ul li a span.over,.navBar ul li a span.bg{top:-21px}
#navBar{height:23px;display:block;font-size:14px;background-color:#FFF;text-align:center}
#navBar ul li span.bg{ height:21px;background:url("images/bg_over.gif") center center no-repeat} 代码可能选得不是很具有代表性,将就看下吧~
具体用法: 1.下载并解压附件,然后上传至插件目录; 2.后台启用插件; 3.写日志时将代码用<pre class="代码类型">代码</pre>。
目前支持的高亮代码类型有十种:php,js,html,css,cpp,cs,java,delphi,mysql,lotusscript。注意,上述第三步需要编辑器在html状态下输入,否则代码无法高亮。
插件自动寻找需要高亮的代码,若无需要高亮处,则不加载js,减少页面大小。此为1.0版本,后续可能加入复制代码的功能,尽请期待。老规矩:有bug,请留言反馈!
65#回复
2011-01-29 13:20