Line Numbers

GeSHi has the ability to add line numbers to your code (see the demo available at http://qbnz.com/highlighter/demo.php to see what can be achieved). Line numbers are a great way to make your code look professional, especially if you use the fancy line numbers feature.

There are multiple methods for highlighting line numbers, but none of them is perfect. Of the various ways to highlight line numbers GeSHi itself implements 2 different approaches, but allows you by the way it generates the code to do the line numbers yourself if necessary - but more on this case later.

The easiest approach is using the <ol>-tag for generating the line numbers, but even though this is the easiest one there’s a big drawback with this one when using Gecko-engine based browsers like Firefox or Konqueror. In these browsers this approach will select the line numbers along with the code or will include extra markup in the selection.

The other approach has been implemented in the 1.0.8 release of GeSHi with the GESHI_HEADER_PRE_TABLE header type. When using this header type the line numbers are rendered apart from the source in a table cell while the actual source is formatted as if the GESHI_HEADER_PRE header had been used. This approach works with Firefox and other Gecko-based browsers so far although extreme care has to be taken when applying styles to your source as Windows has some fonts where bold font is of different height than normal or italic text of the same fontface.

Enabling Line Numbers

To highlight a source with line numbers, you call the enable_line_numbers() method:

$geshi->enable_line_numbers($flag); Where $flag is one of the following:

• GESHI_NORMAL_LINE_NUMBERS - Use normal line numbering
• GESHI_FANCY_LINE_NUMBERS - Use fancy line numbering
• GESHI_NO_LINE_NUMBERS - Disable line numbers (default)

Normal line numbers means you specify a style for them, and that style gets applied to all of them. Fancy line numbers means that you can specify a different style for each n^th line number. You change the value of n (default 5):

$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, 37);

The second parameter is not used in any other mode. Setting it to 0 is the same as simply using normal line numbers. Setting it to 1 applies the fancy style to every line number.

👉 Note:

The values above are CONSTANTS - so don’t put them in strings!

Styling Line Numbers

As of GeSHi 1.0.2, line numbers are added by the use of ordered lists. This solves the old issues of line number styles inheriting from styles meant for the code. Also, this solves an important issue about selecting code. For example, line numbers look nice, but when you go to select the code in your browser to copy it? You got the line numbers too! Not such a good thing, but thankfully this issue is now solved. What is the price? Unfortunately the whole way that styles are inherited/used has changed for those of you who were familiar with 1.0.1, and there is quite a bit more HTML involved. So think carefully about these things before you enable line numbers.

Now, onto how to style line numbers:

Styles are set for line numbers using the set_line_style() method:

$geshi->set_line_style('background: #fcfcfc;');

If you’re using Fancy Line Numbers mode, you pass a second string for the style of the n^th line number:

$geshi->set_line_style('background: #fcfcfc;', 'background: #f0f0f0;');

The second style will have no effect if you’re not using Fancy Line Numbers mode.

By default, the styles you pass overwrite the current styles. Add a boolean “true” after the styles you specify to combine them with the current styles:

$geshi->set_line_style('background: red;', true);
 
// or, for fancy line numbers
$geshi->set_line_style('background: red;', 'background: blue;', true);

👉 Note:

Due to a bug with Firefox the issue that should have been fixed with 1.0.2 has reappeared in another form as Firefox includes extra text\markup into plaintext versions of webpage copies. This can sometimes be useful (actually it’s used to get the plaintext version of this documentation), but more often is quite annoying. Best practice so far is to either not use line numbers, or offer the visitor of your page a plaintext version of your source. To learn more have a look at the SF.net BugTracker Issue #1651996. This will hopefully be fixed in GeSHi version 1.2 or as soon as Firefox provides webdevelopers with adequate ways to control this feature - whichever comes first!

❗ Caution:

When you set line number styles, the code will inherit those styles! This is the main issue to come out of the 1.0.2 release. If you want your code to be styled in a predictable manner, you’ll have to call the set_code_style() method to rectify this problem.

Note also that you cannot apply background colours to line numbers unless you use set_overall_style(). Here’s how you’d style:

1. Use set_overall_style() to style the overall code block. For example, you can set the border style/colour, any margins and padding etc. using this method. In addition: set the background colour for all the line numbers using this method.
2. Use set_line_style() to style the foreground of the line numbers. For example, you can set the colour, weight, font, padding etc. of the line numbers using this method.
3. Use set_code_style() to explicitly override the styles you set for line numbers using set_line_style. For example, if you’d set the line numbers to be bold (or even if you’d only set the fancy line number style to be bold), and you didn’t actually want your code to be bold, you’d make sure that font-weight: normal; was in the stylesheet rule you passed to set_code_style().

This is the one major change from GeSHi 1.0.1 - make sure you become familiar with this, and make sure that you check any code you have already styled with 1.0.1 when you upgrade to make sure nothing bad happens to it.

Choosing a Start Number

As of GeSHi 1.0.2, you can now make the line numbers start at any number, rather than just 1. This feature is useful if you’re highlighting code from a file from around a certain line number in that file, as an additional guide to those who will view the code. You set the line numbers by calling the start_line_numbers_at() method:

$geshi->start_line_numbers_at($number);

$number must be a positive integer (or zero). If it is not, GeSHi will convert it anyway.

If you have not enabled line numbers, this will have no effect.

❗ Caution:

Although I’d like GeSHi to have XHTML strict compliance, this feature will break compliancy (however transitional compliancy remains). This is because the only widely supported way to change the start value for line numbers is by using the start=”number” attribute of the <ol> tag. Although CSS does provide a mechanism for doing this, it is only supported in Opera versions 7.5 and above (not even Firefox supports this).