2009-12-19

启用 Typecho 代码高亮插件

12+

写博客的时候常会遇到书写一些代码,高亮的代码让文章更有亲和力,正式启用了 Typecho 代码高亮插件GeSHi,效果不错。

在 Wordpress 的时候,用的是 wp-syntax ,现在70同学发布的 GeSHi 高亮插件也能达到同样的效果,只是显示行号不如 wp-syntax 那么完美,并且在启用插件后出现了一些问题,详情如下:

GeSHi 使用的时候代码书写规则为:

<code php>你的代码</code>

插件也兼容 pre 标签,不过,旧的博文在代码书写的时候格式是 <pre lang="php">...</pre> ,在 Typecho 下启用 GeSHi 后会出错,查看 Plugin.php 源码,70同学是考虑到了兼容这种书写规则。只不过似乎有点错误,将代码:

pre {
	margin:8px 0;
	padding:3px;
	overflow:auto;
	overflow-x:auto;
	overflow-y:hidden;
	width:100% !important;
	width:99%;
	background:#f9f9f9;
	padding-bottom:0 !important;
	padding-bottom:18px;
	border:1px solid #eee;
	border-width:1px 0;
	display:block;
}
*+html pre {
	padding-bottom:18px !important
}

修改为:

pre {
	margin:8px 0;
	padding:3px;
	overflow:auto;
	overflow-x:auto;
	overflow-y:hidden;
	width:100% !important;
	width:99%;
	background:#f9f9f9;
	padding-bottom:0 !important;
	padding-bottom:18px;
	border:1px solid #eee;
	border-width:1px 0;
	display:block;
}
*+html pre {
	padding-bottom:18px !important
}

原来的文章代码高亮显示正常。

另外,GeSHi 默认会把代码中的关键字加上链接,可以在 GeSHi.php 文件中修改设置为:

pre {
	margin:8px 0;
	padding:3px;
	overflow:auto;
	overflow-x:auto;
	overflow-y:hidden;
	width:100% !important;
	width:99%;
	background:#f9f9f9;
	padding-bottom:0 !important;
	padding-bottom:18px;
	border:1px solid #eee;
	border-width:1px 0;
	display:block;
}
*+html pre {
	padding-bottom:18px !important
}

最后在风格 CSS 文件中给简单修饰一下,加上一段:

pre {
	margin:8px 0;
	padding:3px;
	overflow:auto;
	overflow-x:auto;
	overflow-y:hidden;
	width:100% !important;
	width:99%;
	background:#f9f9f9;
	padding-bottom:0 !important;
	padding-bottom:18px;
	border:1px solid #eee;
	border-width:1px 0;
	display:block;
}
*+html pre {
	padding-bottom:18px !important
}

还有就是在启用 tinyMCE Editor 后,编辑器会自作聪明地解析 code 代码,索性给禁用了,直接写书,注意转为必要的HTML代码就可以了。

当然,Typecho 的代码高亮插件也有几个:

1、Simple Code :最简单实用,直接使用的是 highlight_string 函数,不过在评论中的代码串似乎不会被解析。并且不支持更多语言的高亮。
2、GeSHi:也是70同学的作品,感觉不错,使用中。
3、FHilight:高亮显示很专业,可折叠代码,不过需要加载的js文件太多了,影响页面效率,可以合并一下js文件,而且复制代码的时候有点问题。
4、XHighlighter:也可以满足要求,基本的功能都有。

本文有 12 篇评论 ↓↓

  1. 我用的FHilight比较炫,但不支持ie6且自动换行有点问题~

    1. 嗯,复制代码的时候不自动换行有点麻烦,不方便。

  2. 找不着这个插件的下载地址,能否提供一个?谢谢。

    1. 这里有:
      http://joyqi.com/life/move-to-mediatemple.html

  3. 能告诉我、你的博客生成HTML 是用什么插件吗?

    1. 目前是伪静态,系统后台提供的。

  4. 这个应该影响家在速度吧

    1. 影响很小,通过程序生成的普通HTML代码,非JS。

  5. 我的

    我的不嵌套 是怎么回事呢?

    1. 我的

      就是回复的时候提示是错的

      1. 我的

        这里不能贴图,没法说

  6. 为什么用code里添加代码时,只能编辑一部分。