Eric @ EricBess WebHome

胜不骄,败不馁,胸有激雷而面如平湖

Chinese (Simplified) flagItalian flagKorean flagPortuguese flagEnglish flagGerman flagFrench flagSpanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flagCroat flagDanish flagFinnish flagHindi flagPolish flagRumanian flagSwedish flagNorwegian flag

WP-CODEBOX Plugin (代码高亮插件)

Author:Eric.Wang
Plugin URL:http://wordpress.org/extend/plugins/wp-codebox/
Tags: syntax highlighting, syntax, highlight, code, formatting
Requires at least: 2.0
Tested up to: 2.3.3
Stable tag: 1.2.2.1
Download

Donate for supporting author to obtain New Hosting, Thanks!

== Description ==

WP-CODEBOX代码高亮插件,支持多种语言、代码下载、复制到剪贴板、代码框收放及后台默认属性设置。本插件还在持续开发中,欢迎使用及报告bugs.
Wp-CodeBox provides clean syntax highlighting and advanced feature for embedding source code within pages or posts. It support a wide range of popular languages highlighting with line numbers, code download, Copy to clipboard, collapse codebox and maintains formatting while copying snippets of code from the browser.

It's provide simple background configuration for highlighter style/formatting customization.
Since the plugin is developing, in the future it will support more options.(CSS option,Keyword display style,Auto Caps/Nocaps,Case Sensitivity etc. )

== Basic Usage ==

Wrap code blocks with `<pre lang="LANGUAGE" line="1" file="download.txt" colla="+">` and `</pre>` where `LANGUAGE` is a [GeSHi] supported language syntax; the `file` will create a code downloading attribute.;`line="n"` will hide the single codebox; `colla="+/-"` will expand/collapse the codebox.`line,file,colla` is optional.

== Installation ==

1. Upload WP-CodeBox.zip to your Wordpress plugins directory, usually `wp-content/plugins/` and unzip the file.  It will create a `wp-content/plugins/WP-CodeBox/` directory.
2. Activate the plugin through the 'Plugins' menu in WordPress.
3. Go to Option->Wp-CodeBox set default setting.
4. Create a post/page that contains a code snippet following the [proper usage syntax]

== Frequently Asked Questions ==

When activate the plugin, popup the error: "Fatal error: Cannot redeclare class GeSHi in ##/wp-content/plugins/wp-codebox/geshi/geshi.php on line 158"?
Answer:disactivate other Gashi based syntax highlighter plugin first.

== Screenshots ==

1. PHP, no line numbers.

<div id="foo">
<?php
  function foo() {
    echo "Hello World!\\n";
  }
  for (\$i = 0; \$i < 10 $i++) {
    foo();
  }
?>
</div>

2. Java, with line numbers, collapse codebox.

3. Ruby, with line numbers starting at 18,downloading feature.

18
19
20
21
22
class Example
     def example(arg1)
    return "Hello: " + arg1.to_s
  end
end

4. Administration interface in WordPress 2.

screenshot-1.gif

== Usage ==

**Example 1: PHP, no line numbers**
    <pre lang="php">
    <div id="foo">
    <?php
      function foo() {
        echo "Hello World!\\n";
      }
      for (\$i = 0; \$i < 10 $i++) {
        foo();
      }
    ?>
    </div>
    </pre>
**Example 2: Java, with line numbers, collapse codebox**
    <pre lang="java" line="1" colla="-">
    public class Hello {
      public static void main(String[] args) {
        System.out.println("Hello World!");
      }
    }
    </pre>
**Example 3: Ruby, with line numbers starting at 18, code downloading(ruby.txt)**
    <pre lang="ruby" line="18" file="ruby.txt">
    class Example
      def example(arg1)
        return "Hello: " + arg1.to_s
      end
    end
    </pre>

== Supported Languages ==

The following languages are supported in the `lang` attribute:

Actionscript,ADA,Apache Log,AppleScript,ASM,ASP,AutoIT,Backus-Naur form,Bash,BlitzBasic,C,C for Macs,C#,C++,CAD DCL,CadLisp,CFDG,CFDG,ColdFusion,CSS,Delphi,DIV,DOS,Eiffel,Fortran,Fortran,FreeBasic,GML,Groovy,HTML,Inno,IO,Java,Java 5,Javascript,LaTeX,Lisp,Lua,Microprocessor ASM,mIRC,MySQL,NSIS,Objective C,OCaml,OpenOffice BASIC,Oracle 8 SQL,Pascal,Perl,PHP,PL/SQL,Python,Q(uick)BASIC,robots.txt,Ruby,SAS,Scheme,SDLBasic,Smalltalk,Smarty,SQL,T-SQL,TCL,thinBasic,Uno IDL,VB.NET,Visual BASIC,Visual Fox Pro,Winbatch,X++,XML,Z80 ASM

==Release Notes==

**1.0** : First internal release; Uses GeSHi v1.0.7.20;
**1.0.1** : Add View Code AJAX feature;
**1.1** : Add simple background configuration for highlighter style/formatting customization;
**1.2** : css tuning and option i18n compatible;
**1.2.1** : Uses GeSHi v1.0.7.21;
**1.2.2** : WP 2.5 compatible;
**1.2.2.1** : Correct small bugs;Improve the css layout to stick the code header; Contributor:YiXia.

== Donate ==

== Future Feature==

It will provide backgroud option for highlighter style customization(CSS option,keyword display style,Auto Caps/Nocaps,Case Sensitivity etc.) in the future version.

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5 out of 5)
Loading ... Loading ...
-欢迎为本文评级

相关日志

本文读者也关心以下内容:

  • N/A

03月 3rd, 2008 | 作者: eric | WordPress | Trackback ? | 43 评论| Email This Post Print This Post | 1,030 views

Add a Comment

Leave a reply

:mrgreen: :| :twisted: :arrow: 8O :) :? 8) :evil: :D :idea: :oops: :P :roll: ;) :cry: :o :lol: :x :( :!: :?:

  1. You will post the following soon.
    Go ahead and start typing.
Hide Post Comments
  1. 沙渺 posted the following on 2008-06-05 at 2:56 pm.

    &gt ; 的意思是说pre标签中出现><号必须使用&gt ;和&lt ;。本来在pre标签中使用&gt ;和&lt ;是能正确显示的,但加上GESHI之后就不能正确解析。这个问题是GESHI的问题,不是插件的问题。但的确希望作者能尽量修正。在pre标签中直接使用><可以解决这个问题,并且在ie67和ff中都正确。但造成的后果是不能通过xhtml1.0验证。我想这虽然可行,但不是件好事。

    Reply
    1. bochgoch posted the following on 2008-06-11 at 12:12 am.

      Excellent plugin - I need to override some CSS to tidy things up, but excellent - thanks!

      Reply
  2. Ender Xie posted the following on 2008-05-16 at 10:04 pm.

    I finnaly get it worked in my WP blog.We are supposed to edit the code in "Code" view, not in "Visual", then everything works fine.Nice work, pal.

    Reply
  3. yixia posted the following on 2008-05-16 at 11:19 am.

    $hHead .= "<!--[if IE]>\n<style type\"text/css\">\n"; $hHead .= ".wp_codebox { overflow-x: auto; overflow-y: hidden; padding-bottom: expression(this.scrollWidth > this.offsetWidth ? \"15px\" : 0); width: 100%; }\n"; $hHead .= "</style>\n<![endif]-->";
    把这个加到
    function codebox_header()
    并删掉css中的/*ie hack*/部分来通过css校验

    Reply
  4. yixia posted the following on 2008-05-16 at 9:56 am.

    再来,如果在后台settings-writing中开启了WordPress should correct invalidly nested XHTML automatically
    那么像<?php 就会变成< ?php多了一个空格,<!-会变成< !-能不能自动把这个filter跳过去 :?:

    Reply
  5. yixia posted the following on 2008-05-13 at 10:40 pm.

    重新修改了一点点代码,为了精简输出的html,去掉不需要的id地址还是在http://www.e-xia.com/2008/05/wp-codebox-122-bug-fix/不过不理解的就是为什么要放cookie呢?是不是以后想保持开关的状态?做的时候碰到一点点小问题,真是哭笑不得,平时都是onclick="javascript:function()",然后在function里就可以直接用this来获得调用这个function的object,我首页的achive list前面的[+]也是这么做的,基本上是一样的javascript,一样的html,但是在wpcd_toggle_collapse里调用this就是不对,最后只能把this当一个参数传进来了,相当郁闷,你知道是为什么吗?上次压缩包里面的js好像放错folder了,这次的也改正了,有兴趣的话就再下一次吧。还有你说的"n"不能copy没试出来,反正用你给的3个例子,都能成功copy,可能是我理解有误,也有可能是js放错的关系。

    Reply
  6. yixia posted the following on 2008-05-09 at 11:54 pm.

    不知道为什么这个插件在我的blog上就是不起作用,在active插件时不报错,更改设置也不报错,在html源文件里能看到引用了codebox的js和css
    我在html编辑状态下添加的<pre...,在可见即可得模式下也试过,都失败了,我还禁用了所有插件,同样不起作用。我直接copy了这里的示例代码,也没用
    怎样才能确切知道这个插件是不是起作用了呢,在html源文件会有什么变化?

    Reply
    1. yixia posted the following on 2008-05-10 at 12:23 am.

      原因找到,是因为下载的版本不正确引起的
      http://downloads.wordpress.org/plugin/wp-codebox.zip
      这里下载的,没敢用迅雷,右键直接下载的
      另外,报告bug一个:在main.php里的get_settings('home')请改成get_settings('siteurl'),因为我的index.php不在安装目录,如果用home的话引用js和css会报错。
      另一个bug是<和>都显示&lt;和&gt;这个不知道是不是和别的插件冲突,明天继续测试。
      谢谢提供那么好的插件

       

      Reply
      1. yixia posted the following on 2008-05-11 at 7:30 pm.

        把我前面写得留言都删掉吧,谢谢,自己都觉得太罗嗦了 :oops: 不过今天又继续抓虫,因为真的很喜欢这个插件。
        主要是copy to clipboard这个方法,因为只能在ie而且是在expand的时候才能用,所以在php代码里面加了如果不是ie隐藏这个链接,在javascript里面加了如果显示[-]的时候隐藏这个链接
        还有,现在的view和download都把代码第一行最前面的空格去掉了,不是很舒服,所以把trim都去掉了,download的正则表达式加了<pre....>.*\n(来去掉最前面的一个空行。
        发在http://www.e-xia.com/?p=58,如果有兴趣的话可以看一下。
        另外我找到了http://www.jeffothy.com/weblog/clipboard-copy/这个写了如何在firefox下实现copy to clipboard,不过因为当中要引用了一个swf,不知道怎么把这个的地址放到js里,能想到的只能是参数传递,不太舒服,所以也就没有用了。

        Reply
        1. eric posted the following on 2008-05-12 at 9:23 pm.

          感想您对WPCD的支持, 你所做的修改正是WPCD所欠缺的。我正在逐个把你做的修改做测试并加到发布版,在changlog日志中加上了贡献人信息。
          同时也向你报告你的修改文件的一个bug. line="n" 时 copy to clipboard无作用。
          &lt,&gt问题是wordpress editor hooks 在捣鬼,应该是可以解决的。

          Reply
          1. yixia posted the following on 2008-05-13 at 5:09 pm.

            没想到你真的会看哦,很感动的说,其实我从来都不用copy to clipboard也就没有好好测试,我用firefox的,对ie的测试做得不好 :redface:

            Reply
  7. Michael posted the following on 2008-05-08 at 12:47 am.

    Very nice plugin, thank you.
    This is another vote to keep the [Copy to Clipboard][+] visible at all times (with either word wrap or cleverer use of CSS)
    Thanks, I'm finding it very useful.

    Reply
  8. KimHoon posted the following on 2008-04-19 at 5:37 pm.

    Wonderful plugin ! but 1 more thing.
    How can I make word-wrap(no auto scrollbar) ?

    Reply
  9. Frank Wang posted the following on 2008-04-17 at 6:39 pm.

    can't work with wordpress 2.5
    不能在2.5版下使用哦..
    希望早日更新

    Reply
    1. eric posted the following on 2008-05-07 at 9:37 pm.

      Try it again!

      Reply
  10. Becca posted the following on 2008-03-28 at 2:07 am.

    When I wrap (without the spaces) around basic html, it breaks and doesn't work.

    Reply
    1. Jeff posted the following on 2008-04-04 at 8:12 pm.

      You need to move the 'copy to clipboard' to the left sign. I use this for SQL scripts. When they are too long (and most are), you can't see the 'copy to clipboard' unless you go to the bottom of the script and then use the scrollbar to scroll to the right. Most users don't even realize it's there as a result.

      Great plugin otherwise.

      Reply
      1. Jeff posted the following on 2008-04-04 at 8:13 pm.

        Oopss.. I meant left "side" obviously. Thx!

        Reply
  11. Chris posted the following on 2008-03-25 at 11:20 pm.

    Nice plugin but it breaks the Lightbox-2 plugin (http://wordpress.org/extend/plugins/lightbox-2/). If your WP-CODEBOX plugin is enabled at the same time as Lightbox-2, Lightbox-2 doesn't work (it just shows the images in the browser window, i.e. the Ajax calls fail).

    FYI ...

    Reply
  12. codefrenzy posted the following on 2008-03-23 at 2:43 pm.

    Hi there,

    Thanks for an awesome plugin.

    I've got it working by writing my posts in 'code' view in wordpress. However, when I edit the article, it goes back to the 'visual' view on wordpress. When I switch back to the 'code' view, the following happens:

    For php:
    1. becomes ?>
    3. ' becomes \' and each time I edit the article, another \ (slash) is added

    Do you have any idea why this might be happening or am I doing something wrong?

    Cheers and thanks for the plugin!

    Reply
    1. codefrenzy posted the following on 2008-03-23 at 2:46 pm.

      Oops! Looks like my comment didn't come through properly. I'll try again.

      1. <?php disappears
      2. ?> becomes ?& gt; (without the space between & and gt; - I just can't post that in this comment)
      3. ‘ becomes \’ and each time I edit the article, another \ (slash) is added

      Thanks again :)

      Reply
  13. EcApS posted the following on 2008-03-12 at 2:54 am.

    Does no work with ">"
    exemple:

    echo aes >> /etc/modules
    echo dm_mod >> /etc/modules
    echo dm_crypt >> /etc/modules

    shown:

    echo aes &gt;&gt; /etc/modules
    echo dm_mod &gt;&gt; /etc/modules
    echo dm_crypt &gt;&gt; /etc/modules

    Reply
    1. eric posted the following on 2008-03-12 at 9:47 am.
      1
      2
      3
      
      echo aes >> /etc/modules
      echo dm_mod >> /etc/modules
      //no problem!
      Reply
      1. Vladimir posted the following on 2008-06-02 at 2:56 am.

        If Prototype or LightBox or ProtoBox or whatever does not work with WP CodeBox, you will have to do the following:
        Open /wp-content/plugins/wp-codebox/js/codebox.js and find these lines:
        function $(id) {
        return document.getElementById(id);
        }

        Then replace it with
        if ('undefined' == typeof $) {
        function $(id)
        {
        return document.getElementById(id);
        }
        }

        Since Prototype's $ function is extented with respect to CodeBox's one, the code should work fine.
        Hope this helps.

        Reply
        1. Vladimir posted the following on 2008-06-02 at 3:10 am.

          Eric, there is one more bug in the code: when creating a download link, you are using htmlspecialchars() function to screen special characters. However, by default, htmspecialchars() assumes iso-8859-1 charset, which is wrong for the most of blogs. So it would be more correct to use wp_specialchars() instead.

          Reply
          1. Ralph posted the following on 2008-06-04 at 9:32 pm.

            I get:
            Warning: Invalid argument supplied for foreach() in /home/xxx/public_html/wp-content/plugins/wp-codebox/geshi/geshi.php on line 2281 Warning: Invalid argument supplied for foreach() in /home/xxx/public_html/wp-content/plugins/wp-codebox/geshi/geshi.php on line 2281 Warning: Invalid argument supplied for foreach() in /home/xxx/public_html/wp-content/plugins/wp-codebox/geshi/geshi.php on line 2281 Warning: Invalid argument supplied for foreach() in /home/xxx/public_html/wp-content/plugins/wp-codebox/geshi/geshi.php on line 2281
            Any ideas?

            Reply
      2. cc posted the following on 2008-05-28 at 12:40 am.

        还是楼上说的 <  > 问题
        我发现当在源代码模式写时,比如 <pre lang="C"> p->q ……    如果立刻发布就没有问题
        可一旦我切回可视模式后,就会被转成  <pre lang="C"> p-&gt;q …… 而这时发布就只能看到错误的形式了
        而且我试了其他几个代码高亮插件,同一个编辑器下,虽然编辑时显示的是 p-&gt;q  但发布后没有问题,可以看到 p->q
        所以应该不是编辑器的问题,希望老大解决
        还有一个就是行号这一栏有时莫名其妙的非常宽,包括您这里的几个例子也是,应该不是我浏览器的问题吧(我用的是firefox)
         

        Reply
        1. cc posted the following on 2008-05-28 at 12:41 am.

          贴个图给您看看 http://i264.photobucket.com/albums/ii169/coffeecat10/code.jpg

          Reply
      3. kyle posted the following on 2008-05-17 at 1:02 pm.

        I cannot get to work, can you help me?
         
         
        Fatal error: Call to undefined function do_action_ref_array() in /mnt/w0504/d41/s46/b02cd2c3/www/kylecai.com/flash/wp-content/plugins/wp-codebox/main.php on line 104

        Reply

Trackbacks and Pingbacks

  1. Pingback from CodeBox 0.5 для WordPress | Ars Longa, Vita Brevis

    [...] постоянно исправлять старые и новые баги в плагине WP CodeBox, я сделал форк, который будет жить своей жизнью, но при [...]

  2. Pingback from Sumali » Blog Archive » Upgraded to Wordpress 2.5

    [...] WP-CodeBox - 1.2 - “WP-CodeBox provides clean syntax highlighting and AJAX advanced features for embedding source code within pages or posts. By Eric Wang.“ [...]

  3. Pingback from Sumali » Blog Archive » Gravatars and Code Boxes Added

    [...] decided to keep the code formatting plugin I’m currently using WP-Codebox, it seems to work the best out of all the ones I’ve tried and changing colours is doable [...]

  4. Pingback from W3hobbyist » Blog Archive » Highlighting code syntax in Wordpress blog posts

    [...] Wp-CodeBox This is the one I use on w3hobbyist.com and would recommend the same to you [...]

  5. Pingback from LunaBlog » Les 35 plugins Wordpress pour améliorer votre expérience de bloggueur

    [...] WP-CodeBox : pour intégrer du code source élégamment et avec quelques fonctionnalités bien étudiées (coloration syntaxique, notamment, un bonheur !) [...]

  6. Pingback from 30 Essential and Advanced Wordpress Plugins | Speckyboy - Wordpress and Design

    [...] 1. WP-CODEBOX Plugin | Eric @ EricBess WebHome [...]

  7. Pingback from candescence.org » Blog Archive » Not Quite Lorem Ipsum

    [...] output in the world but it looks fairly believable. Really this whole post is a test of the WP-Codebox plugin i just [...]

  8. Pingback from CodeBox: подсветка синтаксиса для WordPress | Ars Longa, Vita Brevis

    [...] многие знают о плагине WP-CodeBox, написанном Eric Wang. Данный плагин provides clean syntax highlighting and [...]

  9. Pingback from sanalduvar » Wp-Codebox [Tr] (Kod Kutusu)

    [...] Actionscript,ADA,Apache Log,AppleScript,ASM,ASP,AutoIT,Backus-Naur form,Bash,BlitzBasic,C,C for Macs,C#,C++,CAD DCL,CadLisp,CFDG,CFDG,ColdFusion,CSS,Delphi,DIV,DOS,Eiffel,Fortran,Fortran,FreeBasic,GML,Groovy,HTML,Inno,IO,Java,Java 5,Javascript,LaTeX,Lisp,Lua,Microprocessor ASM,mIRC,MySQL,NSIS,Objective C,OCaml,OpenOffice BASIC,Oracle 8 SQL,Pascal,Perl,PHP,PL/SQL,Python,Q(uick)BASIC,robots.txt,Ruby,SAS,Scheme,SDLBasic,Smalltalk,Smarty,SQL,T-SQL,TCL,thinBasic,Uno IDL,VB.NET,Visual BASIC,Visual Fox Pro,Winbatch,X++,XML,Z80 ASM [...]

  10. Pingback from 35 (New) WordPress Plugins for an Effective Blogging Experience

    [...] WP-CodeBox- WP-CodeBox provides clean syntax highlighting and AJAX advanced features for embedding source code [...]

  11. Pingback from Sven Welzel’s Blog » Blog Archive » WP Codeblock

    [...] Actionscript,ADA,Apache Log,AppleScript,ASM,ASP,AutoIT,Backus-Naur form,Bash,BlitzBasic,C,C for Macs,C#,C++,CAD DCL,CadLisp,CFDG,CFDG,ColdFusion,CSS,Delphi,DIV,DOS,Eiffel,Fortran,Fortran,FreeBasic,GML,Groovy,HTML,Inno,IO,Java,Java 5,Javascript,LaTeX,Lisp,Lua,Microprocessor ASM,mIRC,MySQL,NSIS,Objective C,OCaml,OpenOffice BASIC,Oracle 8 SQL,Pascal,Perl,PHP,PL/SQL,Python,Q(uick)BASIC,robots.txt,Ruby,SAS,Scheme,SDLBasic,Smalltalk,Smarty,SQL,T-SQL,TCL,thinBasic,Uno IDL,VB.NET,Visual BASIC,Visual Fox Pro,Winbatch,X++,XML,Z80 ASM [...]

  12. Trackback from 轶侠的网上小窝

    WP插件codebox...

    WP-CODEBOX是一个作得相当漂亮,非常实用的插件,高亮代码,而且代码不会把页面撑破。
    不过还是有小bug(为啥我总能找到bug,不管是代码的bug还是真的bug,sigh~~~~),给作者留了无数留言,.....

  13. Pingback from Yang Yubo Personal Blog » Blog Archive » 本站 WordPress 插件列表 (持续更新)

    [...] WP-CODEBOX -- 国人开发的代码高亮插件, 基于流行的 GeSHi (PHP 语法高亮库), 相比其它类似插件非常实用; [...]

  14. Pingback from xxxxxxx » WP-CODEBOX新代码高亮插件

    [...] http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/ [...]