这两天无所事事,不知道干些什么。

在QQLive上把《仙剑奇侠传三》看完了,我承认我很out,去年的流行电视剧,我今年才看完。打开博客,我望着它,它盯着我,我们俩就这样僵持了近5秒钟,我实在受不了了,对它说:“丫的,你再看我就折腾你。”结果你们能想到,所以,我开始折腾它了。

这个想法是昨天在某博客上看了代码都产生的,那超长的代码,没有格式化,没有高亮,看着我脑袋都大了,几段代码下来才发现,很多都TM是废话,关键代码就那么一句,害得我找了半天。心想,如果有个隐藏部分代码就好了,所以呢,我就在我博客上折腾了。

我用的代码高亮插件是WP-Syntax,首先打开该插件目录下的wp-syntax.php文件,搜索如下代码,大改在 123 行左右:$output .= ;将此段代码修改成:$output .= strtoupper($geshi->language);

保存,看看是不是在 CODE 显示的地方多了一个类似标题的东西。 好了,截下来我们开始做显示隐藏的功能,这里就要用到人见人爱车见车载花见花开的 jQuery ,用 jQuery 前要导入什么,这里就不啰嗦了,直接看代码。

1
2
3
$(".wp_syntax .code_title").click(function(){
$(this).parent().find(".code").slideToggle("slow");
})

再保存,刷新页面,点击代码标题就可以看到效果了,剩下的就是美化了,因主题不同而异,我贴出我的 CSS 供大家参考一下。

1
2
3
4
5
6
.wp_syntax .code_title {
background:#CCC;
cursor:pointer;
color:#2971A5;
font-weight:bold;
}

其实呢,我还想在标题的最右边弄一个显示/隐藏的提示,但是弄出来 IE 下会错位,归根结底还是 CSS 不会写的问题,Firefox 下显示正常,到了 IE 下就会跑到下一行去,郁闷。哪位兄弟可以帮忙解决一下啊。 嗯,就到这里吧,折腾完毕,如果你不喜欢用插件,也可以试试 代码发芽网 代码高亮功能,不过我不怎么喜欢用,感觉一大堆的HTML代码贴进来怪怪的。

看看博友

zchiy2k 写的《为WP-Snytax代码框增加滑动效果》,他碰到了滚动条的问题,说不定对你有帮助。