你的位置:快乐忆站 \ 分享 \ 文章正文

SHJS代码高亮插件 for emlog

再一次折腾起代码高亮插件,昨晚写好的插件,今天完善了一下,用的是开源的SHJS高亮包,源码地址:http://sourceforge.net/projects/shjs/,感觉蛮不错的,按需加载js和css,无需依靠jquery只需先加载一个6K大小的主js即可,大大节约了带宽,而且这个和之前的高亮插件比起来,复制代码方便了许多,兼容了FF和IE,很给力。下面是例子,可能不是很完整,凑合着看吧:

<?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}

此插件支持的语言有39种,在附件的readme.htm内有对照表,供大家查阅。后台可以选择高亮的样式并预览。给力吧~~

具体用法如下:

在写日志时如需插入高亮代码,请先切换到编辑器的源代码模式,然后输入如下代码:

<pre class="代码类型"></pre>

代码类型可参照readme.htm的表格对应填写,别忘了以“sh_”开头哦~然后切换回html模式,粘贴你的代码即可,当然这是一个繁琐的过程,接下来的一篇文章我会分享KindEditor带插入代码的后台编辑器,这样插入代码就不用这么麻烦了,时间紧迫,睡觉去了~

2011年5月20日更新至1.1版本,请4.0及以后版本的童鞋下载最新的(zip格式),覆盖原来的即可,4.0以前的版本不建议升级到最新的

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 56#
    asdfasdf
    asdfasdf Google Chrome 28.0.1500.72 Windows Server 2003 2013-08-01 14:40 回复
    f克格勃 基本原则苛在在职顶替苛模 基本原则基本原则燥夺在地有根有据夺顶替夺在一的拜代艰难险阻
    小松
    小松 Google Chrome 28.0.1500.71 Mac OS X 10.8.5 2013-08-03 09:51 回复
    @asdfasdf:测试评论速度~
  2. 55#
    peascloud
    peascloud Google Chrome 25.0.1364.97 Windows 8 x64 Edition 2013-02-27 20:14 回复
    好用哦!但是效果更炫就更好了。
    小松
    小松 Google Chrome 25.0.1364.97 Windows 8 x64 Edition 2013-02-28 08:59 回复
    @peascloud:还要什么效果?
  3. 54#
    低调奢华
    低调奢华 Internet Explorer 9.0 Windows 7 2012-10-16 10:55 回复
    KindEditor编辑器(带代码高亮)    这个编辑器移植到到5.0来
    小松
    小松 Nokia Web Browser Nokia Series60 2012-10-16 12:00 回复
    @低调奢华:好的,中午抽空看看吧
  4. 53#
    chrishao
    chrishao Firefox 9.0.1 Ubuntu 2012-02-07 10:04 回复
    用了一圈又用回你的高亮了,请问如何像你的实例那样将长代码折行啊
    小松
    小松 Google Chrome 16.0.912.77 Windows 7 2012-02-07 12:58 回复
    @chrishao:white-space: pre-wrap;
    word-wrap: break-word;
    样式里面加这个~
    Chris.Hao
    Chris.Hao Firefox 10.0 Windows 7 2012-02-09 08:27 回复
    @小松:<pre class="sh_html;white-space:pre-wrap;word-wrap:break-word;">
    是这样吗?
    Chris.Hao
    Chris.Hao Firefox 10.0 Windows 7 2012-02-09 08:28 回复
    @Chris.Hao:pre class="sh_html;white-space:pre-wrap;word-wrap:break-word;"
  5. 52#
    痕迹
    痕迹 Firefox 3.6.3 Windows XP 2011-11-27 12:44 回复
    前面的数字怎么弄出来的呢?
    小松
    小松 Nokia Web Browser Nokia Series60 2011-11-27 16:28 回复
    @痕迹:目前本插件无法支持显示行号
  6. 51#
    sprityaoyao
    sprityaoyao 2011-05-20 13:16 回复
    多谢小松,拿走了
    小松
    小松 2011-05-20 13:26 回复
    @sprityaoyao:不客气,有问题反馈哈
  7. 50#
    蓝叶
    蓝叶 2010-12-20 03:32 回复
    我加了这个插件,怎么显示的和你的效果不一样,http://lanye.org/post/101
  8. 49#
    踏雪残情
    踏雪残情 2010-11-22 20:51 回复
    支持这么多语言,不错.
    很久之前我找高亮插件,找了许久也没找到,后来就自己写了一个简陋的高亮JS和CSS,再之后就干脆不用了.
    小松
    小松 2010-11-22 22:48 回复
    @踏雪残情:其实常用的语言就这么几种,其他的基本不太用~
  9. 48#
    david
    david 2010-11-21 13:46 回复
    我发现小松真会折腾哦。哈哈哈。希望继续保持下来哦。
    小松
    小松 2010-11-21 13:49 回复
    @david:上一次去你博客好像打不开...
    david
    david 2010-11-25 19:42 回复
    @小松:前段时间我博客的空间好像有点问题吧,打开的非常慢,不过现在应该好了吧?嘿嘿。。
    小松
    小松 2010-11-26 12:27 回复
    @david:嗯,好了,给力了~
    david
    david 2010-11-26 18:39 回复
    @小松:
    嘿嘿。。那就好哦,速度快吗?
    小松
    小松 2010-11-26 20:51 回复
    @david:还好啦,不错~
  10. 47#
    公子
    公子 2010-11-21 11:20 回复
    暂时还不用 呼呼~
    小松
    小松 2010-11-21 11:55 回复
    @公子:嗯,用不到就飘过把~
    公子
    公子 2010-11-23 13:26 回复
    @小松:有飘回来了
    小松
    小松 2010-11-23 16:26 回复
    @公子:给力
1 2 3 4 5 6

随机日志:

推荐日志:

彩色标签:

sitemap