WP-CODEBOX: Clean Syntax Highlighting

As programmers, we spend our working lives discovering code. We want it shown legibly and beautifully. One tool to support here is ‘syntax highlighting.’ Text editors, web viewers, and command-line software do this. We’re so used to highlighting syntax that looking at the code in uniform black-on-white can jarring.

But what do we paint with and what colors? Initially, this decision appears shallow. But the syntax we choose makes essential value decisions about our code. Some questionable ideas are implicit in those color schemes, and the continued use of those themes perpetuates those dubious ideas. I take two of those questionable ideas in this article, demonstrate how our syntax highlighters strengthen those ideas and suggest how to modify them.

Wp-CodeBox provides clean syntax highlighting and advanced features for embedding source code within pages or posts. It supports a wide range of popular languages highlighting with line numbers, code download, Copies to clipboard, collapse code box, automatic keywords link to API manual and maintains formatting while copying snippets of code from the browser

It provides a 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/No caps, Case Sensitivity, etc. )

Basic Usage

Wrap code blocks with <pre lang="LANGUAGE" line="1" file="download.txt" colla="+"> and </pre>

Possible Parameters:

  • lang="LANGUAGE" – LANGUAGE is a GeSHi supported language syntax.
  • file="download.txt" – The file will create a code downloading attribute.
  • line="N" – The N is the starting line number.
  • colla="+/-" – The +/- will expand/collapse the codebox.
  • line,file,colla is optional.


1. Upload 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 activating 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.


1. PHP, no line numbers. View Code PHP

<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.View Code JAVA

1 2 3 4 5public class Hello { public static void main(String[] args) { System.out.println(“Hello World!”); } }

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

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

4. Administration interface in WordPress.


**Example 1: PHP, no line numbers**  

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

**Example 2: Java, with line numbers, collapse codebox**   

<pre lang="java" colla="-">
    public class Hello {
      public static void main(String[] args) {
        System.out.println("Hello World!");

**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


Highlighting can serve various purposes. I can’t remember that highlighting certainly helped me write clean, correct code, or even prevented me from making a mistake or typing. It can surely provide a pleasant feeling, however in which you can ‘feel good’ about your code differently. For languages such as English and Chinese, learning can help.

Leave a Reply

Your email address will not be published. Required fields are marked *