本站推出免插件代码高亮服务

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'
    });
  });

81 comments

    • 插件拖慢网站加载速度哦,我现在只有四个插件。能砍就砍,能删就删。

        • @kslr: 百度地图,谷歌地图,无觅,wp clean up。足够满足我的需求了。

          • @啄木游弋: ©Feed,Akismet,All In One SEO Pack,Analytics360,Baidu Sitemap Generator,失效链接检查器,Configure SMTP
            Crayon Syntax Highlighter
            Executable PHP widget
            Google XML Sitemaps
            Hacklog DownloadManager
            NIX Gravatar Cache
            W3 Total Cache
            Watermark RELOADED
            Widget Logic
            WP-Memory-Usage
            wp-Monalisa
            WordPress表格
            wp auto top
            WP RC Reply AJAX

            大部分都是一些小功能

          • 哎,你确定这些功能都是必需的?我的主机不是很强劲,插件用多了会影响加载速度和访客体验,所以我的原则是插件能删除就删除。话说你这里面有些插件我都没听说过

  • 曾经使用过代码高亮,写过几篇貌似技术的文章,不过换Typecho后就不准备写代码类的文章了。

        • @De: 字面上是互相矛盾的,但表达的意思却是想通的。一方面,让我放弃折腾实在是难以割舍,本身就喜欢鼓捣;另一方面,从理性的角度讲,我又不得不放弃一段时间,近来有大事情要做,所以又要安心工作。

          • 咦?我表述有问题么?我真是北大的学生,现在是研究生三年级,我所谓的工作其实就是论文工作,我们习惯上这样讲,还有就是面临找工作的压力呀。嘿嘿,这回肯定讲清楚了。

          • @啄木游弋: 明白,终于明白了。你这专业研究生出来很吃香的啊,怎么会有压力呢?

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload CAPTCHA.