Barnaby Norman

Colored Code - How it works

Barnaby Norman Home Page | Site Map | Family Norman Genealogy Site | Contact Me

The session begins with a blank form where the user can paste in their raw PHP code. They have the options to add some sample data (a one line sample of PHP), clear the form or process the PHP code. They can also select whether the outputted code will use inline CSS style attributes or contain class identifications for an external CSS file to be used.

Coloured Code application showing buttons

Coloured Code buttons

When the user clicks to process the PHP code the javascript function colourCode() collects the user's source code and checks the style selection from the radio buttons and passes the data up to the server page colouredCodeInterface.php using AJAX.

Part of function colourCode() showing capture of values from form

// Get data from form
var phpCode = document.getElementById('phpCode').value;
var inline = document.getElementById('inline').checked;        
            
if(inline)
{
    var style = "inline";
}
else
{
    var style = "styleSheet";
}

The server file expands the data passed to it and creates an instance of ColoredCode and calls the function reader() to begin the process of colour coding the source code.

PHP file colouredCodeInterface

require_once "ColouredCode.class";

// Collect data posted back to server and put into local variables
$posted = urldecode ( implode ( file ('php://input')));
list($style, $posted) = explode(";", $posted, 2);

// Create instance of ColouredCode classs and pass variables to it
$script = new ColouredCode($data, $style);

// Call reader() method
$script->reader();

The class ColoredCode breaks the data string passed to it into an array and then loops through the array removing segments and adding them to an output file with the style or class attributes added. The class will continue to loop until the array is empty, when the new coloured code is returned to the calling AJAX at the client to be displayed on the page.

Part of ColouredCode class showing the reader() function

function reader()
{
    // Main function used to process string
        
    // Loop through each character until end of string
    while($this->line)
    {
        // Test for symbols
        if(!$this->testSymbols()){                
                
            // None found now check for special characters
            if(!$this->testSpecials()){
                    
                // No special characters now so look for a word chunk
                if($word = $this->wordFinder->find($this->line)){
                        
                    // Test if what found is a php keyword
                    $this->testWord($word);
                }
                else{
                    // Catch what is left
                    $this->addColour("blue");
                    $this->addToWord();
                }
            }
        }
    }
    
    $this->displayOutput();
}