Wednesday, 4 March 2009

Syntax highlighter toolbar covers first code line

As mentioned in my previous post I'm using Syntax Highlighter now to display code snippets. Appart slow loading it's working fine and it's doing its job. The only thing that was annoying to me was that the highlighter's toolbar was covering part of the first code line if it was too long:


Solution:
Solution is quite simple: I decided to lift it up a bit by overwritting toolbar's style:

Place this style definition anywhere in <head> and the result should be similar to that:

To be honest, I would like the toolbar to be displayed below the code snippet, aligned to the bottom border but this would require bit more styling. Let me know if you achieve that!

2 comments:

Vincent said...

Thanks for the trick.

codeman862 said...

<style>
.syntaxhighlighter .toolbar
{
bottom: 33px !important;
}
</style>