让 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代码框增加滑动效果》，他碰到了滚动条的问题，说不定对你有帮助。

THE-END

PREVIOUS 白天晚上不同的背景

NEXT 站内的 Box.net 外链网盘

你这篇日志折腾得真欢脱，不仅改代码还加了 jQuery，连 CSS 都没放过。不过，你的折腾是有意义的，让 WP-Syntax 代码高亮插件变得更好用了。特别是那个点击标题可以隐藏或显示代码的功能，真的很方便。不过，我也发现了一个小问题，在 IE 浏览器下，标题旁边的显示/隐藏提示会跑到下一行去。希望你能早点解决这个问题，这样大家用起来就更爽了。

已有 56 条评论

小峰JoysBoy 浙江 2010-07-10 03:57

回复

哈哈，搞了个嘀咕皮肤，只是侧边的嘀咕标志掉的太往下了，几乎看不到
- 冰剑 MOD 湖南 2010-07-10 13:08
  
  回复
  
  这个我也不知道怎么回事，在Firefox下，强制刷新的话，那个logo就会向下多移动 30px ，如果是点击某个连接进入另外一个页面，那么就是正常的，那 js 代码看了N遍，没发现有问题。

万戈上海 2010-07-10 06:49

回复

这个效果不错啊，很人性化
IE下错位的话，我估计是没有限宽吧
- 冰剑 MOD 湖南 2010-07-10 13:08
  
  回复
  
  好像以前别人和我说过限制宽度的问题，一会再折腾一下。

丕子山东 2010-07-10 06:58

回复

嗯这个很实用

逸冰浙江 2010-07-10 10:15

回复

我觉得我折腾代码的比较少，不是很适合我，我想把引用的折腾好看点就是了....
- 冰剑 MOD 湖南 2010-07-10 13:08
  
  回复
  
  你那个主题也不好看，太不适合中文了，感觉怪怪的。
  你还是找个好点的中文主题吧。。

平平江苏 2010-07-10 15:45

回复

我感觉这个速度还是和我期待的有点偏差嘛 :grin:
- 冰剑 MOD 湖南 2010-07-10 15:49
  
  回复
  
  我这里感觉还不错，机房是在洛杉矶，这里 PING 值在190-230 之间，已经很不错了。

海天无影江苏 2010-07-10 16:55

回复

不错不错隐藏代码美观度也不笑
- 冰剑 MOD 湖南 2010-07-10 22:04
  
  回复
  
  什么叫美观度也不笑？求赐教。
  
  海天无影江苏 2010-07-10 22:53
  
  回复
  
  额不小……
  
  浩子窝窝云南 2010-07-11 01:58
  
  回复
  
  原来是这样啊，和曾经的套套差不多，谢谢提醒。我去玩玩
  
  冰剑 MOD 湖南 2010-07-11 02:08
  
  回复
  
  滔滔以前用的时候，js输出好像里面都没有id、class样式的，根本无从下手。
  嘀咕秀到是不错，都已经写好了id、class的值，我们要做的只是编写 CSS 就可以了。

浩子窝窝云南 2010-07-10 20:43

回复

这个效果看起来还很不错也，有空研究下，我想问下你嘀咕怎么做到的。可以赐教下吗？
- 冰剑 MOD 湖南 2010-07-10 22:04
  
  回复
  
  就是用嘀咕秀的 JS 输出，然后修改 CSS 样式就可以了。
  http://www.wudishow.com/

猪八戒辽宁 2010-07-10 23:47

回复

原来又是一个玩代码的高手啊。
- 冰剑 MOD 湖南 2010-07-11 02:08
  
  回复
  
  我也是菜鸟，这些只是瞎折腾。

changli 河南 2010-07-11 01:42

回复

第一次来留个记号
你说的对无友情不连接我也不能再随随便便做连接了。。你是老鸟难怪博客人气这么旺还有这么多教程我会经常来访的。
- 冰剑 MOD 湖南 2010-07-11 02:08
  
  回复
  
  我玩博客是老鸟，但是玩WP还是个菜鸟。

FORECE 加拿大 2010-07-12 03:44

回复

-_-!! 最近你很闲啊，折腾这么起劲
- 冰剑 MOD 湖南 2010-07-14 02:21
  
  回复
  
  确实很闲，电网的文件没下来，想出去找工作又被限制住了。

woyigui 浙江 2010-07-13 17:10

回复

搞点有用的吧，别天天折腾这些。。。没啥产出。。。
- 冰剑 MOD 湖南 2010-07-14 02:21
  
  回复
  
  也是在学习啊，折腾 jQuery 的同时也可以学到东西的。
  只不过我不是专门的在学习而已。

拆墙部队上海 2010-07-17 08:52

回复

为什么存在这个问题：你和 A 是好友，我也和 A 是好友，但我两不认识。 :twisted:
- 冰剑 MOD 湖南 2010-07-18 17:03
  
  回复
  
  这个问题非常值得深入研究。
  
  成叔叔福建 2010-07-18 20:07
  
  回复
  
  :sad: 某天要开始云AV
  
  knife 江苏 2010-07-19 09:02
  
  回复
  
  那就好了
  
  冰剑 MOD 湖南 2010-07-19 13:30
  
  回复
  
  在线电影差不多就算是云端了。
  
  zchiy2k 黑龙江 2010-07-19 21:50
  
  回复
  
  去我那里看看，是不是解决了？
  
  冰剑 MOD 湖南 2010-07-19 21:57
  
  回复
  
  IE6、IE7下有点问题，Firefox、chrome、IE8、IE9都没问题。
  IE6下那个滚动条会把代码框撑宽，IE7下只看得到滚动条。
  
  冰剑 MOD 湖南 2010-07-19 22:21
  
  回复
  
  我的搞定了，IE6\7下没什么问题。
  为什么你的syntax会有滚动条呢？我的就没有。。
  
  zchiy2k 黑龙江 2010-07-19 23:10
  
  你竟然放到左边了。。。。
  明明说的放右边么~
  玩赖！ :mrgreen:
  长度超过边框长度之后就会有滚动条。
  IE6\7下是单行的只能看到滚动条，还是所有有滚动条的都看不到代码？这个我发现了，找不到解决办法。
  “点击隐藏”那几个字的位置在IE6\7下有问题吗？我用的IE8里的兼容模式测试没什么问题啊。
  
  冰剑 MOD 湖南 2010-07-19 23:14
  
  冤枉啊，我明明是放在右边的，怎么会在左边，我这里看到的是在右边。
  IE6\7下单行只能看到滚动条，多行的正常。
  “点击隐藏”那几个字的位置没什么问题，正常的。
  你可以用 CSS 控制让代码自动换行，这样就不会出现滚动条了。
  
  zchiy2k 黑龙江 2010-07-19 23:19
  
  那我刚才也许看错了，我看咱俩的解决方法是一样的。
  单行只显示滚动条解决不了么。
  CSS控制会增加行号，这个操蛋的wp-snytax是用表格控制的，不是用li，而且copy不方便。
  我的代码中很多是加行号的，所以还有些地方比你的麻烦一点，还好解决了~ :mrgreen:
  
  zchiy2k 黑龙江 2010-07-19 23:21
  
  也可以加一个+-号的图标到左边，跟我的存档页一样，那样效果应该也不错，不过不是png的。
  
  冰剑 MOD 湖南 2010-07-19 23:22
  
  行号不让他显示啊，我就是考虑到别人复制的时候，会把行号一起复制进去，所以每次贴代码的时候都没有加入行号的。
  你把滚动条弄掉算了把，用 CSS 控制他自动换行。
  
  冰剑 MOD 湖南 2010-07-19 23:23
  
  这样聊起来真类，你上GTALK把，我加了你的。
  
  zchiy2k 黑龙江 2010-07-19 23:25
  
  带行号复制不会把行号一起复制进去啊，而且有时候说明起来比较方便。我还是先带着吧

美国优洛江西 2010-07-17 14:31

回复

楼上嫉妒了 :mrgreen:

falayette 浙江 2010-07-17 22:45

回复

新人来访。 :lol:

成叔叔福建 2010-07-18 01:11

回复

我操，居然用云输入法。。。
- 冰剑 MOD 湖南 2010-07-18 17:03
  
  回复
  
  现在都流行云端了，不用云端的东西就落伍了。

knife 江苏 2010-07-18 19:02

回复

你的回复界面牛叉的一塌糊涂
- 冰剑 MOD 湖南 2010-07-18 19:17
  
  回复
  
  哪牛X了？除了换成了ajax之外就没什么特别的了啊。

拆墙部队台湾 2010-07-19 10:28

回复

朋友的朋友，就是我的熟人，丫怎么不去我博客溜达呢。 :twisted:
- 冰剑 MOD 湖南 2010-07-19 13:30
  
  回复
  
  我去了啊，溜达完毕了。

zchiy2k 黑龙江 2010-07-19 12:11

回复

效果不错，实现也简单，支持一下。回头我也修改一下去。
如果能再加入slideUp时显示“点击展开代码”，sildeDown时显示“点击隐藏代码”之类的提示应该会更完美~ :grin:
- 冰剑 MOD 湖南 2010-07-19 13:30
  
  回复
  
  当初加这个效果的时候就想到了提示功能，但是我不懂 CSS ，FF下实现了效果，再 IE 下就错位了，所以就取消了。
  如果你折腾出来，记得告诉我哦。

zchiy2k 黑龙江 2010-07-20 18:15

回复

为啥你这没ping呢？
- 冰剑 MOD 湖南 2010-07-20 18:17
  
  回复
  
  不知道。。
  你后台开启了通知没啊？

MOPVHS 浙江 2010-07-26 23:55

回复

标记~迟些回来看 :twisted:

MOPVHS 浙江 2010-07-26 23:57

回复

Loading图标好看~再看一次~
- 冰剑 MOD 湖南 2010-07-27 03:14
  
  回复
  
  汗，发现你博客的那个云彩很好看。。

winy 新疆 2010-07-28 19:11

回复

换wlw了，直接高亮插件，不过这个效果很不错

艾可优云南 2011-04-19 11:10

回复

一般都不玩代码的，呵呵，暂时还用不到

让 WP-Syntax 滑动显示隐藏

看看博友

AI 评论

添加评论

已有 56 条评论