I have previously posted on how to get SyntaxHighlighter to play nicely with the built-in text editor inside WordPress (TinyMCE). Now for the first time I needed to set it up on another platform (Telligent Community Server). Here are my recommendations on what to use to achieve optimal setup (this can work on any platform):
Problem 1: Need Friendlier Way to Input Code – The default method for adding code to be formatted woudl be to open up HTML mode in TinyMCE, type in the Pre or TextArea tag with specially formatted attributes, and put in the code. This is ok for myself (this is what I use in WordPress), but when designing a site for others, a friendlier interface is preferable. I found a plugin for TinyMCE: SyntaxHL by Richard Grundy. After installing this (download and copy files to tinymce/plugins directory, and add plugin and button to TinyMCE.Init), a new button is added to TinyMCE that loads a popup which allows easy entry of the code to be formatted and customization of language and display options, without the need to enter html mode. (I would prefer something that could load up highlighted text when the button is pressed, but I will settle on this one for now)
Problem 2: TinyMCE adds BR Tags within PRE – When opening up TinyMCE it performs some cleanup of the Html that is input. Part of this cleanup involves (by default) substituting <BR /> tags instead of New Lines in the source text. For code that has already been saved, this presents a problem. When editing a post with code formatted in a <PRE> tag, instead of preserving the new lines, <BR />’s are inserted, completely messing up the formatting. This has been noted by others, and has even been reported in the TinyMCE forums, but so far the bug is still in there. To the rescue, another plugin for TinyMCE: PreElementFix by T Andersen. After installing the files and adding the plugin to TinyMCE.Init, PRE acts as it should: no more insertion of <BR /> tags, and the tab key adds a Tab to the text, rather than advancing to the next field.
Based on a question in the StackOverflow beta site, I did some quick research into what are the best ways to perform syntax highlighting on code that is posted on blogs. Among the methods that were suggested (by myself or others):
- Hack together your own display logic to format it as you see fit
- Use Windows Live Writer with the Insert Code plugin (I discuss that here)
- For WordPress, use the WP-Syntax plugin
In case you are reading in a text-only browser, It reads (my emphasis):
Error ! The current browser is either too old or too modern (usind DOM document structure).
This is followed by the header of a calendar, with no days showing, set to January 2000.
If it really was still January 2000, maybe I could understand (wait, no I wouldn’t – Netscape was still alive and kicking back then). But in 2008, to consciously choose not to support browsers used by a large percentage, if not majority of potential customers, simply boggles the mind.
Things I found interesting on April 25, 2006:
Want to have a quicksearch link to Google Finance (just entered Beta) in your Firefox Quicksearch?
Download this file (googlefinance.zip), unzip the files (not the readme.txt) into your C:\Program Files\Mozilla Firefox\searchplugins directory, restart Firefox and go.