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

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

评论

  1. 11 年前
    2013-5-18 20:12:21

    那些插件大多也是这样的,我用了19+插件

    • 啄木游弋
      博主
      kslr
      11 年前
      2013-5-18 20:13:32

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

      • 啄木游弋
        11 年前
        2013-5-27 13:15:01

        @啄木游弋: 你用的都是那个?

        • 啄木游弋
          博主
          kslr
          11 年前
          2013-5-27 23:06:09

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

          • 啄木游弋
            11 年前
            2013-5-28 0:37:51

            @啄木游弋: ©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

            大部分都是一些小功能

          • 啄木游弋
            博主
            kslr
            11 年前
            2013-5-28 9:35:52

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

  2. 12 年前
    2012-8-21 18:19:02

    我每次都是黑糊糊的直接CTRL+C/+V~搞得版面面目全非

    • 啄木游弋
      博主
      我們30歲
      12 年前
      2012-8-21 18:25:34

      @我們30歲: 下次来咱这里,试试代码高亮。

      • 啄木游弋
        12 年前
        2012-8-21 18:33:46

        @啄木游弋: 哈.要是可以,還真想找你幫忙解決.俺折騰不起~

        • 啄木游弋
          博主
          我們30歲
          12 年前
          2012-8-21 18:57:26

          @我們30歲: 近期实在是不方便哈。

  3. 12 年前
    2012-8-21 11:16:02

    ……我就是黑乎乎的直接插入的人

    • 啄木游弋
      博主
      死亡之鹰
      12 年前
      2012-8-21 13:35:29

      @死亡之鹰: 欢迎以后来使用我的代码高亮服务。

  4. 12 年前
    2012-8-20 17:21:09

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

    • 啄木游弋
      博主
      De
      12 年前
      2012-8-20 20:46:34

      是的,老是折腾也怪没意思的。不如安心的写点文章。

      • 啄木游弋
        12 年前
        2012-8-21 14:50:21

        @啄木游弋: 你这回复跟给晓伍的回复自相矛盾,呵呵…

        • 啄木游弋
          博主
          De
          12 年前
          2012-8-21 14:53:19

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

          • 啄木游弋
            12 年前
            2012-8-21 14:56:02

            @啄木游弋: 咦?我还以为你是北大学生呢。

          • 啄木游弋
            博主
            De
            12 年前
            2012-8-21 14:58:39

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

          • 啄木游弋
            12 年前
            2012-8-21 15:00:17

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

          • 啄木游弋
            博主
            De
            12 年前
            2012-8-21 16:11:50

            @De: 帝都是一个压力山大的地方啊,亲。

          • 啄木游弋
            12 年前
            2012-8-22 10:53:30

            @啄木游弋: 北大最近很风波~

          • 啄木游弋
            博主
            死亡之鹰
            12 年前
            2012-8-22 12:43:49

            @死亡之鹰: 邹恒甫事件,风起云涌。

  5. 12 年前
    2012-8-20 16:41:56

    折腾无处不在啊,不过折腾很费时间哟

    • 啄木游弋
      博主
      晓伍
      12 年前
      2012-8-20 20:46:00

      乐在其中。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇