Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » php » Code Highlighting using GeSHi

Code Highlighting using GeSHi

Learn how to add code highlighting using GeSHi. A PHP script that is used to easily highlight a wide range of programming languages.

View an Example of this article before you get started.

As you continue to expand your knowledge of various programming languages you will want to begin writing your own tutorials for others to learn from. Once you start displaying code on your web site you will want to style it as many other sites do. This is achieved by using a formatter script which parses (reads) your code and styles it.

In this lesson you will learn how to work with one of the more popular syntax highlighting scripts, GeSHi. This script is an open-source PHP script which is able to highlight many syntax types and even allows you to write your own plug-ins for types that are not already included. However, in this lesson we are going to focus on adding code highlighting to start.

Start by downloading the GeSHi script, unpacking the contents and placing it in a new directory, as shown in figure 1.


Figure 1: The directory structure once you have unpacked the downloaded file.

Now open up your preferred text editor and create a new file, save it as "sample.php" in the same directory you placed the GeSHi script in the previous step.

You are now ready to write your first example. Add the following code to the PHP file which will create a new instance of the GeSHi script and output a very simple code highlighting.

<?

require('geshi/geshi.php');

$php_code_source = 'for($x=0; x < count($arr); $x++)
{
	print "val: " . $arr[$x];
}';

$geshi = new GeSHi($php_code_source, 'php');

print $geshi->parse_code();

?>

Basically the above code will create a result as shown in figure 2. You may be wondering why an image is being used to show the result. Well, Scriptplayground is not utilizing this script, which shouldn't be thought of as odd. It's actually that this site is in need of an update (in process) as it was originally developed back in 2005. The new version will be using a customized version of this syntax highlighting script.


Figure 2: The code with the syntax highlighting applied.

Now that you have the basics of using the syntax highlighter, let's look at how to customize the output and add some more bells/whistles. For one, you can enable line numbers, making it easier for your readers to follow along, which is achieved by using the enable_line_numbers(FLAG) method of the GeSHi class. The FLAG accepts one argument, which is used to determine the style of line numbers used. For this example GESHI_FANCY_LINE_NUMBERS is used.You can consult the GeSHi documentation for an explanation of the other options.

$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS);

If you looked over the example for this lesson you may have noticed the PHP functions are auto-linked, which when clicked open the PHP online help for that specific function. While this is convenient, there may be instances when you don't want the functions linked, such as when you are displaying this highlighted code for offline use. GeSHi has taken this into consideration and gives you a very easy way to remove the auto-linking using the enable_keyword_links().

$geshi->enable_keyword_links(false);

Another part you may notice is GeSHi applies the color formatting directly to the HTML code that is generated. This is surely not ideal in a larger web site or when you want to quickly change the look of code that was previously generated. Again, GeSHi is aware of this, and let's you override the style using the enable_classes() method.

$geshi->enable_classes(); // use css classes

However, one thing to note is you will now need to provide a css file in your web page, as you would any other pages. This CSS file can quickly be generated using the included cssgen.php located in the contrib/ directory.

You should now have a pretty good understanding of how GeSHi works and how you can use it in your own code. You can now expand on this example, which will also be covered in future lessons.

Here is an example script, with all of the options explained in this lesson included.

<?

require('geshi/geshi.php');

$php_code_source = 'for($x=0; x < count($arr); $x++)
{
	print "val: " . $arr[$x];
}';

$geshi = new GeSHi($php_code_source, 'php');
$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS);
$geshi->enable_keyword_links(false);
$geshi->enable_classes(); // use css classes

print $geshi->parse_code();

?>

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Code Highlighting using GeSHi

No Comments have been made. Wanna be the first?
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles