Highlight Source Pro: Sourcecode Highlighting WordPress-Plugin

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)

Donate (PayPal)

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 &lt; – 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 (&amp;), even twice (&amp;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 &amp; stuff</h1>
<p>Isn't <a href="http://kno.at/">today</a> just "beautiful"?</p>
</body>
</pre>
Some Demo-HTML-Markup
  1. <body>
  2. <h1 class="a_class">What a great afternoon &amp; stuff</h1>
  3. <p>Isn't <a href="http://kno.at">today</a> just "beautiful"?</p>
  4. </body>

Example #2: PHP

<pre lang="enc__php" class="17"> now <strong>with</strong> headline: <h3>a PHP-Filename</h3>
&lt;?php
/**
 *  Here is a comment! Weeeeeeeee.
 */
function demonstrate_stuff ( $me_so_horny )
{
    $a = 17;
    print ( "$a: $me_so_horny". $a * 3 + $this-&gt;testvar );
    return 'excellent!';
}
?&gt;
</pre>
now with headline:

a PHP-Filename

  1. <?php
  2. /**
  3.  *  Here is a comment! Weeeeeeeee.
  4.  */
  5. function demonstrate_stuff ( $me_so_horny )
  6. {
  7.     $a = 17;
  8.     print ( "$a: $me_so_horny". $a * 3 + $this->testvar);
  9.     return 'excellent!';
  10. }
  11. ?>