CodeX


Introduction

I wanted a colour syntax highlighter for my website, it needed to support both PHP and C++ and be extensible through the use of syntax files to support other languages such as CSS, XHTML, SQL, etc.


I found several good examples on the web but none did exactly what I needed; so being a software engineer I decided to write my own...


What does CodeX do?

CodeX allows you to display colour syntax highlighted code on your web site, it can convert some rather dull looking C++ code from the following;

    int main(int argc, char** argv)
    {
        int i = 5;
        cout << "The answer is " << /* (j * 9) */ (i * 5) + 9; // Comment
        return 1;
    }

to this:

    int main(int argc, char** argv)
    {
        int i = 5;
        cout << "The answer is " <<  /* (j * 9) */ (i * 5) + 9; // Comment
        return 1;
    }

It also works with PHP code:

            // Output the code with syntax highlights
    function DisplayCode($szCode, $iLanguage)
    {
        switch($iLanguage)
        {
            case "PHP" : // Process PHP Code
                $szSyntaxFile = "php.syntax.php";
            break;
            
            case "CPP" : // Process C++ Code
                $szSyntaxFile = "cpp.syntax.php";
            break;

            default: // The user specified an invalid language type
            return false;
        }
        
        $this->OutputXHTML($szCode, $szSyntaxFile);
        return true;
    }

CodeX now supports Python:

    def main():
        print "\n\tHello, World!"
    
        # Call the main function when the program starts
    if __name__ == "__main__": main()

You can modify the style/colours that CodeX uses by editing the codex.css style sheet.


Installing CodeX

Simply download the CodeX files and place them in the following locations on your web server.


This example assumes your web server is running Apache on a Unix/Linux operating system; CodeX will also run on Windows running IIS.

  • codex.css - Place this file in your website's root folder (DocumentRoot). This is the style sheet that CodeX uses to style it's output.
  • codex.php - This is the CodeX application itself, this should go in your cgi-bin folder.
  • syntax - This folder contains the language syntax files for CodeX, it currently supports C++, C#, PHP and plain text. This should be placed as a subfolder under cgi-bin.

That's it, CodeX is fully installed and can now be used.


Using CodeX

Follow these instructions to use CodeX to display syntax highlighted code on your own website.


Step 1 - Create your XHTML file and add CodeX to it

The first step is to create your web page, this is the page that the user will see with your (soon to be) colour syntax highlighted code on it.


You then add some code so that we can use CodeX; this includes adding a reference to the CodeX style sheet and creating a new instance of the CodeX class.


You do not need to delete the CodeX class, PHP will automatically delete it when it is no longer needed.


Here is an example file using XHTML (You could of course use PHP to generate your entire page):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >    
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
        <title>CodeX Sample Page</title>
        
            // The CodeX style sheet
        <link rel="stylesheet" type="text/css" media="screen" href="codex.css"/>
    </head>
    <body>

    <?php
            // Load the CodeX utility and instantiate it
        require "./cgi-bin/codex.php";
        $codeX = new CodeX();
    ?>

    </body>
    </html>

Step 2 - Getting your code ready to display

We need to place the code that we want to display into a PHP variable, for now we will call it $code.

    $code = "
        function DisplayCode($szCode, $iLanguage)
        {
            // Deliberately empty for this example
        }";

You need to ensure that you have the correct number of single/double quotes matching each other so that we don't end up with a syntax error from the PHP parser.

In the previous example, our variable $code is enclosed by single quote characters. The code that we will put into this variable should not have any single quote characters in it else the PHP parser will not correctly parse it.


Step 3 - Displaying the syntax highlighted code

Telling CodeX to display the code with colour highlighting is as simple as calling its DisplayCode() method passing the variable containing the code to it, as shown here:

    $codeX->DisplayCode($code, "PHP"); // PHP
    $codeX->DisplayCode($code, "PY"); // Python
    $codeX->DisplayCode($code, "CPP"); // C++
    $codeX->DisplayCode($code, "C#"); // C#
    $codeX->DisplayCode($code, "TXT"); // Text

When calling this method you need to tell CodeX the language that the code was written in; this ensures the correct syntax file is loaded, e.g. PHP, CPP (C++), C# or TXT.


Step 4 - The Complete Example

This sample shows all of the code from the preceding steps in a single page.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >    
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
        <title>CodeX Sample Page</title>
        
            // The CodeX style sheet
        <link rel="stylesheet" type="text/css" media="screen" href="codex.css"/>
    </head>
    <body>

    <?php
            // Load the CodeX utility and instantiate it
        require "./cgi-bin/codex.php";
        $codeX = new CodeX();
        
            // Display the code
        $code = "
            function DisplayCode($szCode, $iLanguage)
            {
                // Deliberately empty for this sample
            }
        ";
        
        $codeX->DisplayCode($code, "PHP");            
    ?>

    </body>
    </html>

Options

The DisplayCode method has the following format, which includes the two arguments we have already covered and two optional ones.

    function DisplayCode($szCode,    // The code to display
            $iLanguage,            // The language
            $replaceTabs = true,    // Replace all tabs with spaces
            $tabsSpacesCount = 4)    // Number of spaces to replace each tab with

$replaceTabs and $tabsSpacesCount

These two arguments let you decide if you want the tab characters within the code replacing by spaces so that you can vary the indenting of the code when it's displayed.


This is best shown by an example:


Tabs not replaced

        int main(int argc, char** argv)
        {
            int i = 5;
            cout << "The answer is " <<  /* (j * 9) */ (i * 5) + 9; // Comment
            return 1;
        }

Tabs replaced by 4 spaces

    int main(int argc, char** argv)
    {
        int i = 5;
        cout << "The answer is " <<  /* (j * 9) */ (i * 5) + 9; // Comment
        return 1;
    }

Tabs replaced by 2 spaces

  int main(int argc, char** argv)
  {
    int i = 5;
    cout << "The answer is " <<  /* (j * 9) */ (i * 5) + 9; // Comment
    return 1;
  }

Change History ([New]New, [BugFix]BugFix, [Update]Updated)

[Update] Jan 2011 (v2.1) - Added support for Phython 2.6, and updated the C++ language file for C++0x keywords.
[Update] Jun 2010 (v1.3) - Tidied up and reorganised the article's content, no code changes.
[Update] Feb 2008 (v1.3) - Added a new syntax file for the C# language.
[BugFix] Jan 2007 (v1.2) - The correct language is now used if you have several on a page, e.g. CPP then PHP.
[BugFix] Nov 2006 (v1.1) - Now converts HTML special characters correctly.
[New] May 2006 (v1.0) - Initial Public Release.