Posts tagged with "geshi"

GeSHi and line height fun

Being a developer, one of the major features I (and my colleagues) wanted to see in BlogBaker was syntax highlighting for code blocks. In the future, many posts will include snippets of code used to help describe problems that we are working on and how we are working to accomplish them. Additionally, many of us will be creating personal blogs outside of work, and will want to be able to insert code snippets.

It's fairly straight forward to turn some code into a snippet, and is entirely based on custom <pre> tags.

For example, if I wanted to paste the contents of a simple Hello World PHP script, I would edit the HTML view of my post, and enter <pre lang="php">, paste my PHP script, and close </pre>. See below example:

1
2
3
4
5
6
7
8
9
10
class foobar
{
    public function greetings()
    {
        echo "Hello World!";
    }
}
 
$foo = new foober;
$foo->greetings(); // prints "Hello World!"

Tada!

During the addition of this feature, however, I ran into an unexpected hiccup regarding line heights. I had seen GeSHi used before on a friends blog, and noticed that the height of the line numbers did not match up with the height of the code. See below screenshot:

Line Height Example 1

Very odd... and to top it off, I noticed the same issue on my development blog and during testing. At first, I thought that I had conflicting CSS changing the line-heights, height of the parent element, or something of that nature. Other alternatively possibilities included that the error might be a browser rendering bug.

A breakthrough came when I had one of my coworkers (Brendan) test out what I was working on in his browsers. Brendan noted that it was correct in one of his browsers, but out of alignment in another browser. Further investigation revealed that no explicit monospace font family style was being applied to the

<pre&gtl tags surrounding the code, and as a result the browser used whatever default had been selected. In most browsers this appears to be Courier New, which appears render differently in different situations.

Before concluding anything about Courier New itself, I checked and doublechecked that there were no styles affecting elements inside the columns which might change their height (ie. 1px padding or margin on elements), but I was unable to find anything. To matters more interesting, the columns were not even out of alignment by a uniform amount. For example, 150 lines of code were maybe 19 px off by the end -- VERY odd, and suggests that there are likely not any errant styles.

After that, I tried changing the font family of the monospace tags, forcing it to Consolas and Courier in CSS. After that, all my tests started showing up in perfect alignment across all browsers.

Line Height Example 2

So, a word to those using GeSHi: if you run into line-height issues, check what font family is being used to render the preformatted tags!

Theme: Fresh Print by BlogBaker. Powered by BlogBaker.