让 WP-Syntax 滑动显示隐藏
这两天无所事事，不知道干些什么。
在QQLive上把《仙剑奇侠传三》看完了，我承认我很out，去年的流行电视剧，我今年才看完。打开博客，我望着它，它盯着我，我们俩就这样僵持了近5秒钟，我实在受不了了，对它说：“丫的，你再看我就折腾你。”结果你们能想到，所以，我开始折腾它了。
这个想法是昨天在某博客上看了代码都产生的，那超长的代码，没有格式化，没有高亮，看着我脑袋都大了，几段代码下来才发现，很多都TM是废话，关键代码就那么一句，害得我找了半天。心想，如果有个隐藏部分代码就好了，所以呢，我就在我博客上折腾了。
我用的代码高亮插件是WP-Syntax，首先打开该插件目录下的wp-syntax.php文件，搜索如下代码，大改在 123 行左右：$output .= ;将此段代码修改成：$output .= strtoupper($geshi->language);
保存，看看是不是在 CODE 显示的地方多了一个类似标题的东西。 好了，截下来我们开始做显示隐藏的功能，这里就要用到人见人爱车见车载花见花开的 jQuery ，用 jQuery 前要导入什么，这里就不啰嗦了，直接看代码。
$(".wp_syntax .code_title").click(function(){
$(this).parent().find(".code").slideToggle("slow");
})再保存，刷新页面，点击代码标题就可以看到效果了，剩下的就是美化了，因主题不同而异，我贴出我的 CSS 供大家参考一下。
.wp_syntax .code_title {
background:#CCC;
cursor:pointer;
color:#2971A5;
font-weight:bold;
}其实呢，我还想在标题的最右边弄一个显示/隐藏的提示，但是弄出来 IE 下会错位，归根结底还是 CSS 不会写的问题，Firefox 下显示正常，到了 IE 下就会跑到下一行去，郁闷。哪位兄弟可以帮忙解决一下啊。 嗯，就到这里吧，折腾完毕，如果你不喜欢用插件，也可以试试 代码发芽网 代码高亮功能，不过我不怎么喜欢用，感觉一大堆的HTML代码贴进来怪怪的。
看看博友
zchiy2k 写的《为WP-Snytax代码框增加滑动效果》，他碰到了滚动条的问题，说不定对你有帮助。
AI 评论
由 Google AI Gemini Pro 生成你这篇日志折腾得真欢脱，不仅改代码还加了 jQuery，连 CSS 都没放过。不过，你的折腾是有意义的，让 WP-Syntax 代码高亮插件变得更好用了。特别是那个点击标题可以隐藏或显示代码的功能，真的很方便。不过，我也发现了一个小问题，在 IE 浏览器下，标题旁边的显示/隐藏提示会跑到下一行去。希望你能早点解决这个问题，这样大家用起来就更爽了。
已有 56 条评论
哈哈，搞了个嘀咕皮肤，只是侧边的嘀咕标志掉的太往下了，几乎看不到
这个我也不知道怎么回事，在Firefox下，强制刷新的话，那个logo就会向下多移动 30px ，如果是点击某个连接进入另外一个页面，那么就是正常的，那 js 代码看了N遍，没发现有问题。
这个效果不错啊，很人性化
IE下错位的话，我估计是没有限宽吧
好像以前别人和我说过限制宽度的问题，一会再折腾一下。
嗯 这个很实用
我觉得我折腾代码的比较少，不是很适合我，我想把引用的折腾好看点就是了....
你那个主题也不好看，太不适合中文了，感觉怪怪的。
你还是找个好点的中文主题吧。。
我感觉这个速度还是和我期待的有点偏差嘛 :grin:
我这里感觉还不错，机房是在洛杉矶，这里 PING 值在190-230 之间，已经很不错了。
不错不错 隐藏代码 美观度也不笑
什么叫美观度也不笑？求赐教。
额 不小……
原来是这样啊，和曾经的套套差不多，谢谢提醒。我去玩玩
滔滔以前用的时候，js输出好像里面都没有id、class样式的，根本无从下手。
嘀咕秀到是不错，都已经写好了id、class的值，我们要做的只是编写 CSS 就可以了。
这个效果看起来还很不错也，有空研究下，我想问下你嘀咕怎么做到的。可以赐教下吗？
就是用嘀咕秀的 JS 输出，然后修改 CSS 样式就可以了。
http://www.wudishow.com/
原来又是一个玩代码的高手啊。
我也是菜鸟，这些只是瞎折腾。
第一次来 留个记号
你说的对 无友情 不连接 我也不能再随随便便做连接了。。你是老鸟 难怪博客人气这么旺 还有这么多教程 我会经常来访的。
我玩博客是老鸟，但是玩WP还是个菜鸟。
-_-!! 最近你很闲啊，折腾这么起劲
确实很闲，电网的文件没下来，想出去找工作又被限制住了。
搞点有用的吧，别天天折腾这些。。。没啥产出。。。
也是在学习啊，折腾 jQuery 的同时也可以学到东西的。
只不过我不是专门的在学习而已。
为什么存在这个问题：你和 A 是好友，我也和 A 是好友，但我两不认识。 :twisted:
这个问题非常值得深入研究。
:sad: 某天要开始云AV
那就好了
在线电影差不多就算是云端了。
去我那里看看，是不是解决了？
IE6、IE7下有点问题，Firefox、chrome、IE8、IE9都没问题。
IE6下那个滚动条会把代码框撑宽，IE7下只看得到滚动条。
我的搞定了，IE6\7下没什么问题。
为什么你的syntax会有滚动条呢？我的就没有。。
你竟然放到左边了。。。。
明明说的放右边么~
玩赖！ :mrgreen:
长度超过边框长度之后就会有滚动条。
IE6\7下是单行的只能看到滚动条，还是所有有滚动条的都看不到代码？这个我发现了，找不到解决办法。
“点击隐藏”那几个字的位置在IE6\7下有问题吗？我用的IE8里的兼容模式测试没什么问题啊。
冤枉啊，我明明是放在右边的，怎么会在左边，我这里看到的是在右边。
IE6\7下单行只能看到滚动条，多行的正常。
“点击隐藏”那几个字的位置没什么问题，正常的。
你可以用 CSS 控制让代码自动换行，这样就不会出现滚动条了。
那我刚才也许看错了，我看咱俩的解决方法是一样的。
单行只显示滚动条解决不了么。
CSS控制会增加行号，这个操蛋的wp-snytax是用表格控制的，不是用li，而且copy不方便。
我的代码中很多是加行号的，所以还有些地方比你的麻烦一点，还好解决了~ :mrgreen:
也可以加一个+-号的图标到左边，跟我的存档页一样，那样效果应该也不错，不过不是png的。
行号不让他显示啊，我就是考虑到别人复制的时候，会把行号一起复制进去，所以每次贴代码的时候都没有加入行号的。
你把滚动条弄掉算了把，用 CSS 控制他自动换行。
这样聊起来真类，你上GTALK把，我加了你的。
带行号复制不会把行号一起复制进去啊，而且有时候说明起来比较方便。我还是先带着吧
楼上嫉妒了 :mrgreen:
新人来访。 :lol:
我操，居然用云输入法。。。
现在都流行云端了，不用云端的东西就落伍了。
你的回复界面牛叉的一塌糊涂
哪牛X了？除了换成了ajax之外就没什么特别的了啊。
朋友的朋友，就是我的熟人，丫怎么不去我博客溜达呢。 :twisted:
我去了啊，溜达完毕了。
效果不错，实现也简单，支持一下。回头我也修改一下去。
如果能再加入slideUp时显示“点击展开代码”，sildeDown时显示“点击隐藏代码”之类的提示应该会更完美~ :grin:
当初加这个效果的时候就想到了提示功能，但是我不懂 CSS ，FF下实现了效果，再 IE 下就错位了，所以就取消了。
如果你折腾出来，记得告诉我哦。
为啥你这没ping呢？
不知道。。
你后台开启了通知没啊？
标记~迟些回来看 :twisted:
Loading图标好看~再看一次~
汗，发现你博客的那个云彩很好看。。
换wlw了，直接高亮插件，不过这个效果很不错
一般都不玩代码的，呵呵，暂时还用不到