After a recent tutorial a member mailed me to let me know that the code snippets were not displaying correctly. A quick look told me that this was due to my use of the pre tag, which prevented the text from breaking when it reached the bounds of it's containing element.

The fix was relatively easy - add the following hacks to force the text to wrap for pre formatted text...

word-wrap: break-word; /* Internet Explorer 5.5+ */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
white-space: -pre-wrap; /* Opera 4-6 */ 
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ 
white-space: pre-wrap; /* css-3 */

But this got me thinking, and jarred my memory to something I was working on a little while back.

I had previously taken a look at syntax highlighting for WYSIWYG editors, this was for use in the DMCMS project where i wanted to allow full editing of template files from within the Admin panel. This is something that I had implemented on an earlier development version but had then abandoned. (For some reason that i can no longer remember)

The solution that I have settled on for use on DMCMS is CodeMirror This acts in much the same way that TinyMCE does - it replaces the textfield with a basic code editor. The editor itself does not have any controls, and offers only basic functionality to assist you in editing files, but it is very light weight and provides code highlighting, which makes ediitng the template files a much more pleasurable experience.

I also looked at other solutions, probably the best of which was EditArea The main advantage of this editor is that it is a multi document editor, and also includes it's own built in search function, but this was overkill for the use I have.

As posting formatted code here on this site for the tutorials does not need the editor functionality offered by these solutions, i decided to look a bit further. What i came up with was Syntaxhighlighter This is a javascript library that can be applied to any page and will replace text within script or pre tags with a syntax highlighted version. There is also a handy plugin for TinyMCE which provides a nice popup window for inserting code into the editor in the correct format for Syntaxhighlighter. I've been testing this out on a dev copy of DMCMS and it works great.

When I get a spare half hour or so (not very often) I will update the site to use this as it makes for much easier code reading, which has got to be a bonus for a site that posts lots of code snippets like this one.

/DM