不用插件让代码高亮显示

2010年01月28日 Wordpress 评论 5 条 阅读 8,515 views 次

我们写文章的时候,需要插入代码,通常这些代码都是和其它文本一个颜色,容易产生混淆。为了避免这种情况发生,就产生了代码高亮插件。但插件太多终纠不好,能不能不用代码高亮插件就能使文本高亮呢?
下面就看我是如何实现的。
其实原理很简单,把代码加入一个span里面,然后在CSS里面定义一下这个span的样式,就行了。
具体操作如下:
修改你对应主题里面的style.css文件,找到这一行:
.s-hui b.top b,.s-hui b.bottom b{background:#f4f4f4;}
在下面加入以下代码:
.mycode{position:relative;width:585px;height:auto;z-index:auto;font-size: 13px;color: #00ff00;background-color: #2E2E2E;text-align: left;display: inline;margin: auto;clear: none;border: thin inset #FFFFFF;visibility: inherit;float: left;}

然后在文章里要加入代码的地方在html模式下插入< span class="mycode" >您的代码< /span >就可以了!
是不是很方便啊?如果你觉得这也还不方便,要是能加到wordpress文章编辑器上面的常用按钮中对不就更方便了吗?
OK,没有问题,下面来看如何实现!(在HTML模式下才有该按钮)
找到\wp-includes\js\quicktags.js这个文件

edButtons[edButtons.length]=new edButton("ed_code","code","","","c");
这个的后面加入
edButtons[edButtons.length]=new edButton("ed_mycode","mycode","< span class='mycode' >","< /span >","z");
为了让代码显示,上面的"<"后与">"前我都加了空格,使用中,去掉就OK了。
现在可以进入后台,看看在文章编辑的窗口上面多了一个"mycode"按钮。
哈哈,这个功能完全实现了!!

Technorati : , , ,
Del.icio.us : , , ,
Zooomr : , , ,
Flickr : , , ,

5 条留言  访客:2 条  博主:3 条

  1. 老大,太强了。啥效果啊。我也想弄个。

  2. 貌似每个人的 style.css 应该都是不一样的啊 …..

给我留言

Copyright © 羽飞博客 保留所有权利.   Ality主题 皖ICP备14013844号-1

用户登录