WordPress Syntax Highlighting – Phase 2

Since recent times have suggested to me that I better start putting a good collection of code online about how the things I create work, I need to start with a better syntax highlighter which is so important to explaining how things work in this world.

I started off using google’s system, but found it too cumbersome. I shot straight through three more plugins tonight and found they also have strange issues. This last one I’m working with today has found all the problems I have had and made it nice to use, besides one large issue with the WordPress TinyMCE Editor.

The winner is
CodeViewer by elasticdog – http://elasticdog.com/2004/09/code-viewer/

Below is a Test Program – this is a C program and you download here to it:

1. #include <stdio.h>
2. #include <stdlib.h>
3.  
4. void main() {
5. return;
6. }
7. Download this code: test.c

I found that formatting is more important than the actual syntax highlighting. So what I’m doing is using CodeViewer for the display and will use a child extension for doing actual syntax highlighting.

GeSHi has given a wonderful attempt at writing a variable syntax highlighter. It works while in chunk-based highlighting too. GeSHi is a O(n) based parser for syntax highlighting, yet it works pretty quickly as it keeps its use of substr and preg_replace at a minimum where doing character based descent to speed up the system.

I’ve partially implemented GeSHi for line-based highlighting inside CodeViewer. You can download and compliment your wordpress installation by grabbing this tarball – Code Viewer with GeSHi Support.

To write a proper geshi supported tag, you must use the lang attribute.

1. <viewcode src="cv_geshi_example.html" lang="html" />

If you would like to see the changes I’ve made to the plugin, please see this diff below:

1. --- code-viewer.txt     Mon Aug 29 07:08:37 2005
2. +++ code-viewer.php     Sun Nov 18 09:33:15 2007
3. @@ -9,14 +9,15 @@
4. */
5.  
6. /* Configuration Settings */
7. -$default_path = "http://elasticdog.com/code/";  // the absolute path of your code folder
8. +$default_path = "http://{$_SERVER['HTTP_HOST']}/code/";  // the absolute path of your code folder
9.  
10. /* --- STOP EDITING ---  */
11. +require_once('geshi/geshi.php');
12.  
13. function code_viewer($text) {
14. global $default_path;
15.  
16. -       $count = preg_match_all('/<viewcode src="([^"]+)"(?: link="(?i:(yes|no))")?\s?\/>/', $text, $matches);
17. +       $count = preg_match_all('/<viewcode src="([^"]+)"(?: link="(?i:(yes|no))")?(?: lang="(?i:([a-z]+))")?\s?\/>/', $text, $matches);
18.  
19. for ($i = 0; $i < $count; $i++) {
20. // Determine if the specified path is absolute, or relative to the root path
21. @@ -29,6 +30,9 @@
22. $path = $default_path . $matches[1][$i];
23. }
24.  
25. +                if(strtolower($matches[3][$i]) != "") {
26. +                  $language = $matches[3][$i];
27. +                }
28. // Open the file
29. // If the file can't be found, print an error message
30. if ($lines = @file($path)) {
31. @@ -44,8 +48,11 @@
32. } else {
33. $numtabs = strlen($line) - strlen(ltrim($line));  // determine the number of tabs
34. $line = trim($line);                              // trim leading/trailing whitespace
35. -
36. -                                       $codelist .= "\t" . '<li class="tab' . $numtabs . ' ' . $toggle . '"><code>' . htmlspecialchars($line) . '</code></li>' . "\n";
37. +                                        if(isset($language)) {
38. +                                          $codelist .= "\t" . '<li class="tab' . $numtabs . ' ' . $toggle . '"><code>' . geshi_highlight($line, $language, null, true) . '</code></li>' . "\n";
39. +                                        } else {
40. +                                          $codelist .= "\t" . '<li class="tab' . $numtabs . ' ' . $toggle . '"><code>' . htmlspecialchars($line) . '</code></li>' . "\n";
41. +                                        }
42. }
43. }
44.  
45. @@ -76,4 +83,4 @@
46.  
47. add_filter('the_content', 'code_viewer', 9);
48. add_filter('the_content', 'fix_bad_p');
49. -?>
50. \ No newline at end of file
51. +?>
52. Download this code: code-viewer_geshi.diff