让 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
wordpressjqueryWP-Syntaxhack
白天晚上不同的背景
站内的 Box.net 外链网盘

添加评论

已有 56 条评论

由 Google AI Gemini Pro 生成

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

小峰JoysBoy
小峰JoysBoy 2010-07-10 03:57 回复
浙江 Windows XP Chrome

哈哈,搞了个嘀咕皮肤,只是侧边的嘀咕标志掉的太往下了,几乎看不到

冰剑
冰剑 MOD 2010-07-10 13:08 回复
湖南 Windows 7 Firefox

这个我也不知道怎么回事,在Firefox下,强制刷新的话,那个logo就会向下多移动 30px ,如果是点击某个连接进入另外一个页面,那么就是正常的,那 js 代码看了N遍,没发现有问题。

万戈
万戈 2010-07-10 06:49 回复
上海 Windows XP Firefox

这个效果不错啊,很人性化
IE下错位的话,我估计是没有限宽吧

冰剑
冰剑 MOD 2010-07-10 13:08 回复
湖南 Windows 7 Firefox

好像以前别人和我说过限制宽度的问题,一会再折腾一下。

丕子
丕子 2010-07-10 06:58 回复
山东 Windows XP Firefox

嗯 这个很实用

逸冰
逸冰 2010-07-10 10:15 回复
浙江 Windows XP Firefox

我觉得我折腾代码的比较少,不是很适合我,我想把引用的折腾好看点就是了....

冰剑
冰剑 MOD 2010-07-10 13:08 回复
湖南 Windows 7 Firefox

你那个主题也不好看,太不适合中文了,感觉怪怪的。
你还是找个好点的中文主题吧。。

平平
平平 2010-07-10 15:45 回复
江苏 Windows XP Internet Explorer

我感觉这个速度还是和我期待的有点偏差嘛 :grin:

冰剑
冰剑 MOD 2010-07-10 15:49 回复
湖南 Windows 7 Firefox

我这里感觉还不错,机房是在洛杉矶,这里 PING 值在190-230 之间,已经很不错了。

海天无影
海天无影 2010-07-10 16:55 回复
江苏 Windows XP Firefox

不错不错 隐藏代码 美观度也不笑

冰剑
冰剑 MOD 2010-07-10 22:04 回复
湖南 Windows 7 Firefox

什么叫美观度也不笑?求赐教。

海天无影
海天无影 2010-07-10 22:53 回复
江苏 Windows XP Chrome

额 不小……

浩子窝窝
浩子窝窝 2010-07-11 01:58 回复
云南 Windows XP Internet Explorer

原来是这样啊,和曾经的套套差不多,谢谢提醒。我去玩玩

冰剑
冰剑 MOD 2010-07-11 02:08 回复
湖南 Windows 7 Firefox

滔滔以前用的时候,js输出好像里面都没有id、class样式的,根本无从下手。
嘀咕秀到是不错,都已经写好了id、class的值,我们要做的只是编写 CSS 就可以了。

浩子窝窝
浩子窝窝 2010-07-10 20:43 回复
云南 Windows XP Internet Explorer

这个效果看起来还很不错也,有空研究下,我想问下你嘀咕怎么做到的。可以赐教下吗?

冰剑
冰剑 MOD 2010-07-10 22:04 回复
湖南 Windows 7 Firefox

就是用嘀咕秀的 JS 输出,然后修改 CSS 样式就可以了。
http://www.wudishow.com/

猪八戒
猪八戒 2010-07-10 23:47 回复
辽宁 Windows XP Firefox

原来又是一个玩代码的高手啊。

冰剑
冰剑 MOD 2010-07-11 02:08 回复
湖南 Windows 7 Firefox

我也是菜鸟,这些只是瞎折腾。

changli
changli 2010-07-11 01:42 回复
河南 Windows XP Internet Explorer

第一次来 留个记号
你说的对 无友情 不连接 我也不能再随随便便做连接了。。你是老鸟 难怪博客人气这么旺 还有这么多教程 我会经常来访的。

冰剑
冰剑 MOD 2010-07-11 02:08 回复
湖南 Windows 7 Firefox

我玩博客是老鸟,但是玩WP还是个菜鸟。

FORECE
FORECE 2010-07-12 03:44 回复
加拿大 Windows XP Firefox

-_-!! 最近你很闲啊,折腾这么起劲

冰剑
冰剑 MOD 2010-07-14 02:21 回复
湖南 Windows 7 Firefox

确实很闲,电网的文件没下来,想出去找工作又被限制住了。

woyigui
woyigui 2010-07-13 17:10 回复
浙江 Windows XP Firefox

搞点有用的吧,别天天折腾这些。。。没啥产出。。。

冰剑
冰剑 MOD 2010-07-14 02:21 回复
湖南 Windows 7 Firefox

也是在学习啊,折腾 jQuery 的同时也可以学到东西的。
只不过我不是专门的在学习而已。

拆墙部队
拆墙部队 2010-07-17 08:52 回复
上海 Windows 7 Chrome

为什么存在这个问题:你和 A 是好友,我也和 A 是好友,但我两不认识。 :twisted:

冰剑
冰剑 MOD 2010-07-18 17:03 回复
湖南 Windows 7 Firefox

这个问题非常值得深入研究。

成叔叔
成叔叔 2010-07-18 20:07 回复
福建 Windows XP Internet Explorer

:sad: 某天要开始云AV

knife
knife 2010-07-19 09:02 回复
江苏 Windows XP Internet Explorer

那就好了

冰剑
冰剑 MOD 2010-07-19 13:30 回复
湖南 Windows 7 Firefox

在线电影差不多就算是云端了。

zchiy2k
zchiy2k 2010-07-19 21:50 回复
黑龙江 Windows 7 Internet Explorer

去我那里看看,是不是解决了?

冰剑
冰剑 MOD 2010-07-19 21:57 回复
湖南 Windows 7 Firefox

IE6、IE7下有点问题,Firefox、chrome、IE8、IE9都没问题。
IE6下那个滚动条会把代码框撑宽,IE7下只看得到滚动条。

冰剑
冰剑 MOD 2010-07-19 22:21 回复
湖南 Windows 7 Firefox

我的搞定了,IE6\7下没什么问题。
为什么你的syntax会有滚动条呢?我的就没有。。

zchiy2k
zchiy2k 2010-07-19 23:10
黑龙江 Windows 7 Firefox

你竟然放到左边了。。。。
明明说的放右边么~
玩赖! :mrgreen:

长度超过边框长度之后就会有滚动条。
IE6\7下是单行的只能看到滚动条,还是所有有滚动条的都看不到代码?这个我发现了,找不到解决办法。

“点击隐藏”那几个字的位置在IE6\7下有问题吗?我用的IE8里的兼容模式测试没什么问题啊。

冰剑
冰剑 MOD 2010-07-19 23:14
湖南 Windows 7 Firefox

冤枉啊,我明明是放在右边的,怎么会在左边,我这里看到的是在右边。

IE6\7下单行只能看到滚动条,多行的正常。
“点击隐藏”那几个字的位置没什么问题,正常的。

你可以用 CSS 控制让代码自动换行,这样就不会出现滚动条了。

zchiy2k
zchiy2k 2010-07-19 23:19
黑龙江 Windows 7 Firefox

那我刚才也许看错了,我看咱俩的解决方法是一样的。
单行只显示滚动条解决不了么。
CSS控制会增加行号,这个操蛋的wp-snytax是用表格控制的,不是用li,而且copy不方便。
我的代码中很多是加行号的,所以还有些地方比你的麻烦一点,还好解决了~ :mrgreen:

zchiy2k
zchiy2k 2010-07-19 23:21
黑龙江 Windows 7 Firefox

也可以加一个+-号的图标到左边,跟我的存档页一样,那样效果应该也不错,不过不是png的。

冰剑
冰剑 MOD 2010-07-19 23:22
湖南 Windows 7 Firefox

行号不让他显示啊,我就是考虑到别人复制的时候,会把行号一起复制进去,所以每次贴代码的时候都没有加入行号的。

你把滚动条弄掉算了把,用 CSS 控制他自动换行。

冰剑
冰剑 MOD 2010-07-19 23:23
湖南 Windows 7 Firefox

这样聊起来真类,你上GTALK把,我加了你的。

zchiy2k
zchiy2k 2010-07-19 23:25
黑龙江 Windows 7 Firefox

带行号复制不会把行号一起复制进去啊,而且有时候说明起来比较方便。我还是先带着吧

美国优洛
美国优洛 2010-07-17 14:31 回复
江西 Windows XP Chrome

楼上嫉妒了 :mrgreen:

falayette
falayette 2010-07-17 22:45 回复
浙江 Windows 7 Firefox

新人来访。 :lol:

成叔叔
成叔叔 2010-07-18 01:11 回复
福建 Windows XP Firefox

我操,居然用云输入法。。。

冰剑
冰剑 MOD 2010-07-18 17:03 回复
湖南 Windows 7 Firefox

现在都流行云端了,不用云端的东西就落伍了。

knife
knife 2010-07-18 19:02 回复
江苏 Windows Vista Internet Explorer

你的回复界面牛叉的一塌糊涂

冰剑
冰剑 MOD 2010-07-18 19:17 回复
湖南 Windows 7 Firefox

哪牛X了?除了换成了ajax之外就没什么特别的了啊。

拆墙部队
拆墙部队 2010-07-19 10:28 回复
台湾 Windows 7 Chrome

朋友的朋友,就是我的熟人,丫怎么不去我博客溜达呢。 :twisted:

冰剑
冰剑 MOD 2010-07-19 13:30 回复
湖南 Windows 7 Firefox

我去了啊,溜达完毕了。

zchiy2k
zchiy2k 2010-07-19 12:11 回复
黑龙江 Windows 7 Firefox

效果不错,实现也简单,支持一下。回头我也修改一下去。
如果能再加入slideUp时显示“点击展开代码”,sildeDown时显示“点击隐藏代码”之类的提示应该会更完美~ :grin:

冰剑
冰剑 MOD 2010-07-19 13:30 回复
湖南 Windows 7 Firefox

当初加这个效果的时候就想到了提示功能,但是我不懂 CSS ,FF下实现了效果,再 IE 下就错位了,所以就取消了。
如果你折腾出来,记得告诉我哦。

zchiy2k
zchiy2k 2010-07-20 18:15 回复
黑龙江 Windows 7 Firefox

为啥你这没ping呢?

冰剑
冰剑 MOD 2010-07-20 18:17 回复
湖南 Windows 7 Firefox

不知道。。
你后台开启了通知没啊?

MOPVHS
MOPVHS 2010-07-26 23:55 回复
浙江 Windows XP Chrome

标记~迟些回来看 :twisted:

MOPVHS
MOPVHS 2010-07-26 23:57 回复
浙江 Windows XP Chrome

Loading图标好看~再看一次~

冰剑
冰剑 MOD 2010-07-27 03:14 回复
湖南 Windows 7 Firefox

汗,发现你博客的那个云彩很好看。。

winy
winy 2010-07-28 19:11 回复
新疆 Windows 7 Chrome

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

艾可优
艾可优 2011-04-19 11:10 回复
云南 Windows XP Internet Explorer

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

移动设备上继续阅读