WP-Syntax Makes Syntax Highlighting a Snap
I’ve just transitioned my wordpress instalation over to using WP-Syntax. According to the plugin homepage:
WP-Syntax provides clean syntax highlighting using GeSHi — supporting a wide range of popular languages. It supports highlighting with or without line numbers and maintains formatting while copying snippets of code from the browser.
Like most WordPress plugins, WP-Syntax simply requires a download, an upload into the plugins folder, and then an activation. Once you’ve done all that, you can include code into your blog posts really easily. Just type:
<pre lang="objc" line="1">
[foo bar];
if([bar foo]) {
return 2;
}
else {
return 3;Then put </pre> at the end of your highlighted code. The plugin will take care of the rest and will color the code to looks like this:
1 2 3 4 5 6 7 | [foo bar]; if([bar foo]) { return 2; } else { return 3; } |
Make sure to look at the Readme file and look at their supplemental CSS. You just add that little snippet of styling to make the code look even nicer (the gray box and the blue background for the line numbers). I’ve posted the CSS here for easy access:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | .wp_syntax { color: #100; background-color: #f9f9f9; border: 1px solid silver; margin: 0 0 1.5em 0; overflow: auto; } /* IE FIX */ .wp_syntax { overflow-x: auto; overflow-y: hidden; padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0); width: 100%; } .wp_syntax table { border-collapse: collapse; } .wp_syntax div, .wp_syntax td { vertical-align: top; padding: 2px 4px; } .wp_syntax .line_numbers { text-align: right; background-color: #def; color: gray; overflow: visible; } /* potential overrides for other styles */ .wp_syntax pre { margin: 0; width: auto; float: none; clear: none; overflow: visible; } |
This plugin really accomplishes the job of syntax highlighting in the most simplistic and cleanest way I’ve seen. It utilizes GeSHi, so lots of languages are supported including HTML and CSS and PHP. It even takes into account long lines of code, and creates a scrolling inline box for your blog post. I couldn’t be happier. Check it out and let me know if you have found any better solutions.
2 Replies
theY4Kman on 8/8/2007 at 11:44It’s a great plugin, yes, but if you post code that is too long, the line numbers and code become unsynchronized. I’ve been trying to fix that issue without any luck. Another thing is that if you put in other attributes to the tag, it won’t read it. That’s just a simple fix of the RegEx they’re using, though…
Ryan McGeary on 8/25/2007 at 06:48Thanks for the nice write-up.
@theY4Kman, the additional CSS extensions for wp-syntax are designed to keep the line numbers and code in sync. For example, see the above code snippet. Line 13 is longer than the box, but the line numbers stay in sync because the line of code doesn’t wrap.
If you’re having troubles, I suspect that other CSS formatting rules are changing the behavior of your pre tags.
Note: There are other things I could have done to make sure the line numbers stay in sync regardless of stylesheets, but another design consideration that I thought was more important was that I wanted copy-n-paste to work without also copying the line numbers. There’s nothing worse than taking a code example, pasting it to try it out, then realizing you’ve got to manually clean it up first.



