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)

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 < – 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 &amp; stuff</h1>
<p>Isn't <a href="http://kno.at/">today</a> just "beautiful"?</p>
</body>
</pre>

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>

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

<?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!';
}
?>

Masterpiece posted Monday, April 7th, 2008 at 16.26
Filed under Tools. Scroll down to leave a comment or read what others think is important. You can follow any further responses via RSS.

Previous Entry: Once again; everything new
Next Entry: Forget that whole wilderness-thing and get yourself up in the sky, Indy!

The Amazing Wisdom For Everyone Toolbox: Share!

Ozh April 7th, 2008 at 22.44

From what I see above, the plugin is not correctly displaying code: see the curly quotes in your PHP snippets, line 25 (return ‘excellent’)
Kno April 8th, 2008 at 00.15

Yep, this is a WordPress “Feature”. They automatically convert Quotes to typographical correct ones, what is annoying in terms of sourcecodes.

I’ll look into that asap, thanks for pointing it out!

[UPDATE] Released V1.1 which handles the quotes correctly (see Examples)
ProsjektBlogg 2MK: Web&Foto » Blog Archive » WebKIT: Wordpress ressurser April 13th, 2008 at 23.55

[...] fargekoding av koden slik at det er mye lettere å lese og forstå, slik som vist på denne og denne [...]
Online Seo Service » Wordpress Plugins April 29th, 2008 at 02.29

[...] Highlight Source Pro [...]
Como customizar e configurar o menu que surge ao clicar com o botão direito no Flash | Cabanoblog May 8th, 2008 at 22.22

[...] Utilizei o excelente plugin Highlight Source Pro pra mostrar o código como aparece no Flash. Demorei pra achar um plugin WordPress que funcionasse [...]
30 Essential and Advanced Wordpress Plugins | Speckyboy - Wordpress and Design May 19th, 2008 at 08.58

[...] 9. Highlight Source Pro: Sourcecode Highlighting WordPress-Plugin — blog.kno.at [...]
Duhn May 21st, 2008 at 04.27

Hi : ) Thanks for the plug-in; It works on 2.5.1? ’cause I am trying harder to make it work… thanks again for your donation to the community.
W3hobbyist » Blog Archive » Highlighting code syntax in Wordpress blog posts June 7th, 2008 at 14.38

[...] Highlight Source Pro [...]
Wordpress 2.5 versiyonu ile uyumlu Eklentiler | Fırtına 30 05 June 8th, 2008 at 12.57

[...] Highlight Source Pro [...]
Neue hilfreiche Wordpress Plugins - Web:Manual June 18th, 2008 at 10.28

[...] Highlight Source Pro: Dieses Plugin ersetzt das bisher verwendete Plugin WP_Syntax. Beide Plugins dienen im Grunde dem gleichen Zweck; dem Darstellen von HTML, PHP und anderem Code in einem Beitrag. Ohne Plugin würde WordPress beispielsweise so Dinge wie spitze Klammern herausfiltern und damit das Anzeigen von Code in vielen Programmiersprachen zunichte machen. [...]
Plugin per mostrare il codice | Tre Punti June 18th, 2008 at 17.46

[...] considerazione i miei programmi, per rendere tutto cio possibile, ho deciso di utilizzare il plugin Highlight source pro che ci permette la corretta visualizzazione del codice come nell’esempio sottostande di [...]
Gladius Sha June 19th, 2008 at 13.15

Compared with other syntax highlighting plugin, this one solved the problem of .
Good work.
Wordpress 2.5 Uyumlu Eklentiler (Liste) | Wordpress Tema Ve Eklenti June 29th, 2008 at 22.05

[...] Highlight Source Pro [...]
WordPress Working Plugins | Utricks July 4th, 2008 at 12.10

[...] Highlight Source Pro [...]
2.5 Sürümüyle Uyumlu Eklentiler | WordPress Destek July 6th, 2008 at 12.41

[...] Highlight Source Pro [...]
wordpress 2.5 Uyumlu Eklentiler Listesi | Nazlı Reklam Reklam ve Hosting July 6th, 2008 at 17.57

[...] Highlight Source Pro [...]
Wordpress 2.5 Uyumlu Eklentiler Listesi | Taha'nın Yeri July 6th, 2008 at 23.55

[...] Highlight Source Pro [...]
Olaf's Thoughts About Development » Using SyntaxHighlighter on Blogs or Web sites July 14th, 2008 at 14.39

[...] is an integrated source code formatting system – which I couldn’t get to work. The external Highlight Source Pro plugin works like a charm [...]
A`dan Z`ye Wordpress eklentileri | Aninda Yorum, Msn messenger ifadeleri, Avatar, gif, smiley, Resimli Siirler, izle, indir, Komik Resimler, programlar, Resimleri, Haberler July 18th, 2008 at 16.18

[...] Highlight Source Pro (Bir tür kod eklentisi) [...]
Работающие плагины для WordPress - Блокнот July 19th, 2008 at 16.33

[...] Highlight Source Pro [...]
The Definitive Guide on Wordpress Syntax Highligher Plugins - Cagintranet Web Design July 21st, 2008 at 03.22

[...] | Author: Christian Knoflach Coloring: #7 of 8 Ease of Install/Use: #5 of 8 Line Numbers: Optional PRE or CODE: PRE Other [...]
James Benson July 26th, 2008 at 11.16

Thank you for a decent highlighter plugin, be nice to have the function names linked to the php manual but cannot complain :)

This is like the third or fourth plugin I’ve tried over the last hour and this is the only one that works correctly so far.
워드프레스에서 소스코드 하이라이트하기 » Calm Shouting! July 29th, 2008 at 06.15

[...] 이런 목적으로 다양한 플러그인이 존재하는데 나는 Highlight Source Pro라는 플러그인을 사용하고 있다. 이 플러그인은 코드 하이라이팅 자체는 [...]
Wordpress 2.5+ Uyumlu Eklentiler (Liste) - Yorumla.Net July 29th, 2008 at 11.19

[...] Highlight Source Pro (Bir t
Wordpress eklenti listesi | h7x Software & Technology Center August 7th, 2008 at 00.51

[...] Highlight Source Pro [...]
Раскрашиваем блоки с кодом. PHP библиотеки и плагины для WordPress August 7th, 2008 at 10.39

[...] 6) Highlight Source Pro [...]
Wordpress plugin wordpress eklenti arşivi wp yüzlerce açıklamalı eklenti | Türkiyenin en büyük mail grubu August 25th, 2008 at 16.08

[...] Highlight Source Pro (Bir tür kod eklentisi) [...]
Wordpress plugin wordpress eklenti arşivi wp yüzlerce açıklamalı eklenti | Türkiyenin en büyük mail grubu August 25th, 2008 at 16.08

[...] Highlight Source Pro (Bir tür kod eklentisi) [...]
Syntax Highlighting | andybest.net September 10th, 2008 at 05.38

[...] just got a syntax highlighting plugin: Highlight Source Pro which uses GeSHi. I made a custom plugin for Processing syntax highlighting, using the same colours [...]
hyngeally September 13th, 2008 at 03.20

1993 toyota celica part dunning toyota ann arbor lithia toyota vacaville jack sherman toyota
2003 toyota matrix xrs findlay toyota las vegas 1993 toyota celica
1992 toyota mr2 colorado springs toyota accessory atlanta toyota bay area toyota dealer
Fabien Taysse November 20th, 2008 at 20.15

Good plugin, enc___ mode is a real plus as we can keep the wysiwyg this way.
Foud a bug altough.
is converted to <pre class=”1″ lang”html” when switching to the wysiwyg, thus preventing the code from being displayed correctly
Made a quick fix by changing regexp in the plugin, but it needs to be fixed (attrbutes may be in any order)

FYI Fixed regexp :
$code_regex = ‘/[\[\]([ ]*([^\n]+))?\n([\D\S]+?)[\[\]/’;
Fabien Taysse November 20th, 2008 at 20.17

lol, can’t paste code in the comments of a cde display plugin ^^ …
Please read above : <pre lang=”html” class=”1″ is converted to <pre class=”1″ lang=”html”
Sorry for the typo :)
Krzysztof Wesołowski January 8th, 2009 at 23.26

Wordpress automaticly moves first line after pre tag to the same line, so editing posts with code samples without comment is rather annoying. Maybe it’s possible to add some special char, or stop wordpres from “correcting” html?
Russ Taylor January 29th, 2009 at 12.40

Really like your plugin, have tried to use it best I can on my site.

Only feature that’d be really nice (not sure how feasible it is) is some means to list or prompt me with what languages are available. Everytime I put some code up I have to ftp in to remind myself what languages I can chose from. If this was available somewhere in the wordpress admin IDE it would be very convenient.

Thanks all the same, best code plugin I’ve found!
Wordpress Eklentileri Wp Hacks And plugin | SesliChat Siteleri, Sesli Chat, Sesli Sohbet, SesliChat, Kameralı Chat, Görüntülü Chat, Kamerali Sohbet October 8th, 2009 at 09.06

[...] Highlight Source Pro (Bir tür kod eklentisi) [...]
Apache Error Handler and Perl | Just One More Thing… October 26th, 2009 at 01.14

[...] the way, I’d like to thank Christian Knoflach for his excellent source code highlighting plug-in for WordPress. The wonderfully formatted code you see above is the result of applying his [...]
Alex December 17th, 2009 at 16.19

Does somebody know how to tell wordpress do not replace some char sequences like usual quotes to typographical quotes or double-minus to long dash?
7款WordPress代码语法高亮插件 | 李高峰个人笔记 December 18th, 2009 at 10.47

[...] Highlight Source Pro [...]
Cyberdigital webmaster & Tech Blog » Blog Archive » 30 Essential and Advanced Wordpress Plugins December 19th, 2009 at 02.31

[...] preventing ugly quotes and ‘widows’ and providing CSS hooks to style some special cases.” 9. Highlight Source Pro: Sourcecode Highlighting WordPress-Plugin — blog.kno.at Allows you to highlight any source code within a post. 10. WP-Syntax WP-Syntax provides clean [...]
30 Essential and Advanced Wordpress Plugins | Cyberdigital Webmaster & Tech blog December 20th, 2009 at 04.33

[...] wp-typogrify is a WordPress plugin that “Prettifies your web typography by preventing ugly quotes and ‘widows’ and providing CSS hooks to style some special cases.” 9. Highlight Source Pro: Sourcecode Highlighting WordPress-Plugin — blog.kno.at [...]
Kang Oedin December 24th, 2009 at 12.18

Highlight Source Pro fails to parse certain PHP syntax such as $var– which displays $var-
19 plugins WordPress incontournables | Protuts v4 December 29th, 2009 at 13.42

[...] Site officiel : blog.kno.at [...]
10 Wordpress Code Editor Plugin | WordPressPlanet.com January 12th, 2010 at 00.07

[...] Highlight Source Pro WP Plugin [...]
Adding Code Snippets to WordPress Posts @ Templature January 13th, 2010 at 19.27

[...] that use GeSHi to format code snippets and I tried out three of them yesterday: CodeColorer, Highlight Source Pro, and WP-Syntax. At the time, I was writing a tutorial on adding chapter quotes to WordPress posts, [...]
7款WordPress代码语法高亮插件 « Power by Result Search January 22nd, 2010 at 23.47

[...] Highlight Source Pro [...]
7款WordPress代码语法高亮插件 « 大尾巴狼的自留地 February 17th, 2010 at 07.58

[...] Highlight Source Pro [...]
7款WordPress代码语法高亮插件 at Chen's Blog February 18th, 2010 at 18.45

[...] Highlight Source Pro [...]
Serge March 18th, 2010 at 18.15

Thanks for this post, I was looking for information like this.
多款Wordpress代码高亮插件 « IT日志 March 20th, 2010 at 09.46

[...] Highlight Source Pro [...]
新的开始… « Matrix7's Home March 27th, 2010 at 20.29

[...] 除此之外，我还安装了两个插件，一个是Highlight Source Pro，是一款源码高亮插件，感觉挺不错的。还有一个是Google XML Sitemaps，好像是帮助搜索引擎更好地简历博客索引的插件。 [...]
12 plugin để làm nổi bật code trong WordPress April 3rd, 2010 at 16.05

[...] 10 .Highlight Source Pro [...]
Mick Knutson April 4th, 2010 at 13.42

I am trying to get the code formatting to work. When I cut-n-paste my code for a new Post, the staggering code formatting is lost. Thus all my code is flat. Is there a way to have the code inside of these PRE blocks gets formatted for readability?
wordpress代码高亮插件 « 旅程 May 9th, 2010 at 04.43

[...] Highlight Source Pro [...]
7款WordPress代码高亮插件 - Duke-历程 May 12th, 2010 at 05.44

[...] Highlight Source Pro [...]
12 plugin để làm nổi bật code trong WordPress – Jin9x's Blog June 20th, 2010 at 16.34

[...] 10 .Highlight Source Pro [...]
Carol July 3rd, 2010 at 15.25

I want to thank you for yet another great WordPress tutorial. I am always searching for super WordPress tips to suggest to my own readers. Thank you for making this tutorial . It’s exactly what I was looking for. Truly first-class post.
Select a Proper WordPress Syntax Highlighter » ZzSay.com July 8th, 2010 at 14.30

[...] 8. Highlight Source Pro [...]
مرموز – marmooz » 12 پلاگین برای مدیریت و هایلایت کردن کدها در وردپرس August 7th, 2010 at 13.48

[...] Highlight Source Pro [...]
WordPress Eklentileri - Hizirforum August 16th, 2010 at 12.51

[...] Highlight Source Pro (Bir tür kod eklentisi) [...]
7款WordPress代码语法高亮插件 - 我爱Java August 26th, 2010 at 05.01

[...] Highlight Source Pro [...]
Blog's Xuan Luat » Blog Archive » 12 WordPress Plugins to Display and Highlight Code within your Blog August 26th, 2010 at 20.00

[...] Highlight Source Pro WP Plugin [...]

Highlight Source Pro: Sourcecode Highlighting WordPress-Plugin