Optimal Setup for SyntaxHighlighter & TinyMCE

My favorite Javascript-based WYSIWYG editor is TinyMCE. I find it the most visually appealing, and the most well constructed from all of the offerings available on the Internet.

When posting code for others to see, I prefer using SyntaxHighlighter. This javascript-based formatting tool by Alex Gorbatchev allows you to put the code to be displayed into a Pre or TextArea tag, formats based on the code language, and allows for good degradation in case of NoScript.

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.

Using SyntaxHighlighter to Format Code in WordPress

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):

  1. Hack together your own display logic to format it as you see fit
  2. Use the SyntaxHighlighter JavaScript library
  3. Use Windows Live Writer with the Insert Code plugin (I discuss that here)
  4. For WordPress, use the WP-Syntax plugin

Coincidentally, I had heard Scott Hanselman talking about how he does code formatting just a couple of days ago, in Hanselminutes #125, where he described how he posted code on his blog by putting it inside <pre></pre> tags, adding specific name and class attributes, and letting some JavaScript library do the formatting work. So I went to his blog, opened up a post with some code, and found my way to the SyntaxHighlighter JavaScript library. This is a very nifty library that handles formatting very nicely for a number of popular programming and scripting languages, and seemed to have a very easy implementation. So I decided to implement it for formatting code on my site.
Continue reading

Your Browser is Too Modern

What is it with websites in Israel and browsers whose names do not start with the words "Internet Explorer"? Though there is lots of web connectivity and presence, it seems that all of the web developers here were just never told that using Javascript that only works on IE is not a good way to leave your customers happy. Case in point: I just saw the following on the website of a Jerusalem Hotel while browsing with Flock/Firefox:

montefiore

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.

Items of Interest: 2006.04.25

Things I found interesting on April 25, 2006:

Google Finance Firefox Quicksearch

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.

Happy Hunting!