Monday, April 4, 2011

SyntaxHighlighter hints

SyntaxHighlighter provides a simple method to highlight the code:

SyntaxHighlighter.all();

But this method is actually hooked with body's onload() event. When I use some ajax call and want to format the page dynamically, this method won't work. It is actually easy to fix that: use highlight method directly.

SyntaxHighlighter.highlight();

And default font size of SyntaxHighlighter is too small. Found this page by googling

http://www.kerrywong.com/2009/04/05/changing-syntaxhighlighter-font-size/

it works, but there is an issue that the line numbers in gutter won't match the lines. You can fix this use the same font-size as below:

.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
...
font-size: 1.01em;
...
}

.syntaxhighlighter table td.gutter .line {
text-align: right !important;
padding: 0 0.5em 0 1em !important;
font-size: 1.01em;
}

No comments:

Post a Comment