Syntax Highlighting with States in WordPress

I’m stuck at home this weekend with my car in the shop. Lacking transportation, and being a programmer, I decided to start hacking on my weblog. Since I plan on posting code here (sporadically), having some way to present it all gussied up with syntax highlighting will come in handy, provided it’s not a big hassle.

I’ve recently come to appreciate the GNU enscript project. It’s a great example of a Unix program which solves a specific problem in a very general way. This generality is provided by the states language and interpreter which is part of the project. Since GNU enscript ships with OS X, I’ve started using states for a few little text processing tasks which require some light parsing work.

As such, I recently hacked up a version of the enscript.st states file that ships with GNU enscript to output XHTML in addition to its HTML 2.0 output “face”. Today I added a PHP highlighter to my enscript.st file and, cribbing heavily from Scott Yang’s enscript syntax highlighter for WordPress, cooked up a WordPress plugin which uses states to do the syntax highlighting.

So, feel free to go ahead and download and install my States Syntax Highlighter plugin and my enscript.st file.

Once installed, one can either include source code like so:
<code lang="sh"> #!/bin/sh echo "Hello world!"; </code> Download this code: /code/10a.txt

Which produces output like:
#!/bin/sh echo "Hello world!";

Or like so:
<code lang="html" file="10c.txt" /> Download this code: /code/10b.txt

Which looks like:
#!/bin/sh echo "Hello world!"; Download this code: /code/10c.txt

The first method attempts to highlight code between the code tags. There are various reasons why this way doesn't work very well. Hence the second method, which highlights code from files in a predefined directory on the server. This actually solves a whole bunch of problems, and makes posting code a lot easier. It also has the nice side effect of enabling me to provide a link to the raw code, an idea I've blatantly stolen from Dunstan Orchard.

Valid values for lang are: ada, asm, awk, c, changelog, cpp, diff, diffu, delphi, elisp, fortran, haskell, html, idl, java, javascript, mail, makefile, nroff, objc, pascal, perl, postscript, php, python, scheme, sh, sql, states, synopsys, tcl, verilog, vhdl, and vba. These correspond, with my own addition of php, to the descriptions on enscript's highlightings page.

If you feed the plugin a lang attribute it doesn't recognize, it will just ignore it and pass the code on through unchanged. The lang attribute should be case insensitive, so don't worry about typing "PHP" instead of "php".

One last example:
- (void) andrewDidFinishCoding: (NSNotification *) aNotification andItsReallyLate: (BOOL) isLate orIsItJustReallyEarly: (BOOL) yupEarly { if (isLate && !yupEarly) { NSLog(@"Bah, humbug, I just need more caffeine."); [self maybeIShouldGoToSleep]; } // ... if/else/what? if (yupEarly && !isLate) { NSlog(@"4 O'what in the morning?"); [self ifIStayUpALittleLongerItWillBeMorning]; } /* * Wheee... multiline comments. */ if (yupEarly && isLate) { [self seriouslyGoToSleep: YES rightNow: YES really: YES]; } } Download this code: /code/10d.txt

Alright, time to sleep.

15 Responses to “Syntax Highlighting with States in WordPress”

  1. Chris League Says:

    Thanks for writing this plugin. I played with a few code displayers and syntax highlighters today, and yours seemed to be the simplest, with the best-looking output.

    There’s one caveat I ran into that’s not mentioned in your readme: the $states_code_path needs to be a real path, with no symbolic links. Mine had a link originally, and the file just didn’t show up. It took some snooping to find the combination of realpath() and stristr() causing the problem.

    One other tip: is there a good reason to wrap the whole thing in a ‘code’ element, rather than ‘pre’? In the CSS, you use ‘display: block’ and ‘white-space: pre’ in order to make code behave more like pre, which works fine when the style sheet is used. But in other cases—viewing the site with Lynx, or using the wp-print plugin for ‘printer-friendly’ links—the code appears all jumbled up. Switching to the ‘pre’ element fixed these things for me.

  2. unser blog » Blog Archive » Firefox: Der Flash-PopUp-Blocker-Schreck Says:

    […] P.S. @Adde: Was hälst Du davon, den Blog mit einem PlugIn für das Highlighten von Code-Syntax zu erweitern? Z.B.: Syntax Highlighting with States in WordPress […]

  3. убождане » Blog Archive » Оцветяване на сорс код за WordPress Says:

    […] – Syntax Highlighting with States in WordPress – Code Viewer – Syntax Hiliter […]

  4. nate Says:

    Hey Yo,
    http://www.nextthing.org/code/wp-states-highlight/states-highlight.php
    That link is just showing me a blank page. Is the PHP being parsed on your end? What’s the easiest way to grab the source code for that bad boy?

    Thanks!!!

    -nate

  5. Kitkat Says:

    Nice plugin, I will definitely test it out on my blog. Thanks.

  6. JLCarneiro Says:

    I can’t download your plugin. The PHP file is being executed (IMHO), I only get a blank page…

    Can you help me?

  7. JLCarneiro Says:

    Hi,

    Can you send me the source code (PHP) of Code Markup? I’m trying to download it but only get a blank screen…

  8. Andrew Says:

    Sorry about that. You should be able to grab the source now. Just change the “phps” extension to “php” when you install it on your server.

  9. JLCarneiro Says:

    Andrew,
    My webhost said they don’t have neither states nor enscript available. Is there any other way of using your plugin? If not, what other plugins do you recommend? Scott’s seems to work nicely but it does not have all the languages yours does.
    Can you help me?

  10. James Dicken : Rants » Syntax Highlighting for Java Says:

    […] Seems there’s a wordpress plugin that uses enscript to highlight the syntax of code available, from this site. […]

  11. Alex Loddengaard » Make Code in WordPress Awesome Says:

    […] If you plan to show your code in a WordPress blog, then you absolutely have to get nextthing.org’s plugin. The plugin supports different languages as well as external file includes and downloading. It’s pretty awesome. Check it out: […]

  12. Code Markup WordPress plugin | Free Wordpress Plugins Says:

    […] States Syntax Highlighter […]

  13. Cry Says:

    How do you remove the extra whitespace at the top of the block?

  14. petrosh Says:

    great plugin

    but -pre lang=”css”- does not higlight my css code.

    any tip?

    thanks

  15. Andrew Says:

    Sadly CSS isn’t supported yet.

Leave a Reply

Please spell "response" backwards: (required)