wordpress作为一个欠折腾的货，那么玩转wordpress怎么离得开代码？分享wordpress使用技巧怎么能不在文章中展示代码？很少有人会直接把黑乎乎的代码贴到文章里面，那样简直丑爆了，大部分人采用的方案是安装一个代码高亮插件，对代码进行彩色渲染。
现在的代码高亮插件很多，我也试用过两三个，但都难以解决在可视化与html模式切换过程中的乱码现象，虽然我很喜欢在html模式下写文章，但难免有些时候也会用到可视化模式下的某些功能，比如居中对齐，这个时候如果编辑框中有代码存在的话，往往会乱成一团；所以我开始考虑搞掉代码高亮插件这个问题。
促使我搞掉代码高亮插件的另一个原因，还是追求wordpress的简洁和速度，过多的插件总会拖慢加载速度的，不是吗？
很早以前就瞄上了在线代码高亮这个project，它的名字叫做CodeMirror，一个老外搞得东西，功能丰富庞杂，看过几次使用说明，但没看懂。昨天吃过晚饭开始继续研究这个东西，一边啃英文，一边研究别人的实例，作为代码小菜鸟，仍然感觉压力山大。
大概是到了晚上十一点钟的时候，基本功能已经搞定，接下来又遭遇了代码托管的难题，注册了一个google code host，那个SVN客户端愣是不知道怎么上传代码，各种折腾各种搜索教程，最后也没完全搞明白，但到凌晨一点多的时候，还是把代码磕磕绊绊的传到google code了。
早上起床之后，开始将代码向现在这个fishy主题进行整合，这一个步骤倒是没费太多力气，毕竟以前整合模块到wordpress模板的事情搞过很多次了。然后就没有然后了，具体效果可以从导航栏的代码高亮传送门进去参观。
这个代码高亮功能使用方法很简单，将你需要贴在文章中的代码复制到代码高亮框中，然后点选语言种类，html和xml个人感觉几乎没区别，然后php、css和javascript大家总能区分是什么意思吧？点选语言种类后，预览框中可以显示高亮效果，这个时候只需要把渲染好的代码复制到wordpress后台编辑框中就行了，注意要复制到html模式的编辑框中哟。
另外，受功能的限制，本服务目前不支持ie浏览器，当然代码高亮效果在各浏览器下显示均正常。贴几个范例给大家看看咯。
css代码高亮
#header{ margin:0 auto; width:100%; margin-bottom:5px; background:url(images/logo.jpg) no-repeat; height:80px; }
html代码高亮
<div id="search-from" class="clearfix"> <form name="formsearch" method="get" action="<?php bloginfo('home'); ?>"> <label><input type="text" name="s" id="search-txt" value="" /></label> <input type="submit" id="search-btn" value="搜索" /> </form> </div>
javascript代码高亮
$(function(){ $('.list-table-left').masonry({ itemSelector: '.item' }); });
发表回复