Highlight Source Pro: Sourcecode Highlighting WordPress-Plugin
April 7th, 2008 |Yeah, there’s that WordPress-Blog we have and there are these tools we develop, and when we blog about our ingeniousity we have to go through all those painful code-markup-problems. I hate that. But fear no more, my furry friends, for this is our path to salvation.
Highlight Source Pro
Based upon this Posting I found on my research I tweaked and improved things a little and here it is, in it’s full glory, flexible, automatic, degrading – amazing.
Download Current Version (from wordpress.org)
Features
- Highlight sources of any language
- automatically, server-side (no javascripts)
- XHTML-Compliant, <div>, <ul> & <span>’s with class-attributes and a css-file are used for styling
- optionally add a heading for every code-block
- optionally specify line-number offset (BREAKS XHTML COMPLIANCE)
- optionally don’t display line-numbers
- set per-codeblock if the code is html_entity_encoded or not
- only parses <pre>-tags with the lang-attribute, thus does not interfere with any regular preformatted contents you might have
- degrades beautifully through <pre>-tags (if you keep the sources clean, that is)
- all settings through logical, valid arguments for the main container
- comes with generic cross-browser (IE5/Mac, IE5.5+, FF, Safari, Opera) default CSS-styles
- see screenshot for preview
How to use
Set your code-blocks as <pre>-tags. If the language is supported by GeSHi (see filelist in the /geshi-directory) use the filename (without extension) as language-attribute. If your code is encoded (html-entities; e.g. < is displayed as < – most likely the case if you write in the visual editor) add the ‘enc__’ – prefix. For example for a php-codeblock you would start as follows:
<pre lang="php">
You can control various things:
- Start of Line-Offset, e.g. for #17:
<pre class="17"> - define entity-encoded blocks, e.g. for php:
lang="enc__php" - Define a title for your code-block that appears inside the block, but above the code lines. Everything in the same line as the opening
<pre>tag will be considered the title, including HTML. Example:<pre lang="php"><strong>This is</strong> an <em>example</em> with a <h3>headline</h3> - disable line numbers by not specifying an offset
Known Issues
- While the plugin is basically XHTML 1.0 Strict compliant there’s just no way of getting the offset-based line-numbering to display without inadequate (ab)use of javascript & css hacks, so be warned that IF you use the line-number offset, your documents will NOT validate because of the forbidden start-attribute for the
<ol>! - Watch out for your ampersands (
&) for HTML-listings: Those little friends ALWAYS have to be encoded (&), even twice (&amp;) if your source is encoded. This is because GeSHi only checks for HTML 4 Strict.
Example #1: HTML
<pre lang="html"> Some Demo-HTML-Markup <body> <h1 class="a_class">What a great afternoon & stuff</h1> <p>Isn't <a href="http://kno.at/">today</a> just "beautiful"?</p> </body> </pre>
-
<body>
-
<h1 class="a_class">What a great afternoon & stuff</h1>
-
<p>Isn't <a href="http://kno.at">today</a> just "beautiful"?</p>
-
</body>
Example #2: PHP
<pre lang="enc__php" class="17"> now <strong>with</strong> headline: <h3>a PHP-Filename</h3>
<?php
/**
* Here is a comment! Weeeeeeeee.
*/
function demonstrate_stuff ( $me_so_horny )
{
$a = 17;
print ( "$a: $me_so_horny". $a * 3 + $this->testvar );
return 'excellent!';
}
?>
</pre>
a PHP-Filename
-
<?php
-
/**
-
* Here is a comment! Weeeeeeeee.
-
*/
-
function demonstrate_stuff ( $me_so_horny )
-
{
-
$a = 17;
-
print ( "$a: $me_so_horny". $a * 3 + $this->testvar);
-
return 'excellent!';
-
}
-
?>