Drupal + WYSIWYG + tinyMCE + syntaxhighlighter REDUX

The most popular post on my site currently is an article on how to setup the tinyMCE editor in Drupal to use a syntax highlighting plugin.

Since that article, the Drupal world has moved along and my tutorial has become outdated.

Things are actually a bit easier now, however, so read on for a new version of the tutorial.

These instructions are written for the latest version of Drupal 6 ( 6.14 at the time of this writing ) but should work on a reasonably current version.  There appear to be many steps, but essentially all we are doing is:

• Install wysiwyg module
• install tinyMCE library
• install syntaxhighlighter module
• install wysiwyg_preelementfix module
• install wysiwyg_syntaxhl module
• enable plugins and editor for a Input format

No editing of code is required anymore.  So let's get one with it!

Get wysiwyg

Get the wysiwyg module at http://drupal.org/project/wysiwyg and follow the install instructions.  Basically you're going to put it in sites/all/modules and enable it on the modules admin page.

Install tinyMCE

Go get a current version of tinyMCE ( I used the 3.2.7 main package ) from their download page. Install it in sites/all/libraries, which is the new location to install third party libraries.  

You can also find this install information by visiting the drupal wysiwyg settings page on your site at admin/settings/wysiwyg.  Under the 'Installation instructions' section are descriptions on how to install various editors.  

Make sure that after you install tinyMCE in the libraries directory, you see the proper version in the 'Installation instructions' section on the wysiwyg settings page.  It should say 'Installed' next to tinyMCE and give you the version number.

Edit Full HTML Input format

Some of these steps may not be necessary, but they worked for me. YMMV here. I edited my 'Full HTML' (at admin/settings/filters) input filter and turned off all filters ( except a filter I use to fight spam ). My filter looks like this:

The 'Hide Email addresses' is provided by the spamspan module, and is not necessary for this to work.

Install syntaxhighlighter module

Although you could get the stand-alone version, there is a drupal module for this library. You still will have to get the actual syntaxhighlighter javascript library though!

• Go get the module at their drupal.org project page.
• Unpack it in the usual location ( sites/all/modules or equivalent )
• read the README.txt file that comes with it.  It tells you how to install the javascript library (not included), but essentially, you do this:
  • Get the syntaxhighlighter library. Download it from http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
  • Put in your libraries directory sites/all/libraries.  It can be installed in sites/all/libraries/syntaxhighlighter.
• Enable the module and then visit admin/settings/syntaxhighlighter
• Choose the languages you wish to support
• Choose your theme ( I am using the default theme on my pages )
• Ensure that the tag name is set to 'pre'
• You can disable Legacy mode
• Save the settings

Get wysiwyg_preelementfix module

Apparently, tinyMCE doesn't handle <pre> elements gracefully, so there is a tinyMCE plugin to get it to work right.  This plugin has been rolled up into a drupal module.  Go and get the module from their project page (or install with drush or whatever) and put it in sites/all/modules.

Read the INSTALL.txt that comes with the module.  It will describe how to go and get the javascript component and where to put it.  Basically, you get the package from sourceforge and put it in sites/all/modules/wysiwyg_preelementfix/tinymce.

Personally, I think it should go in your libraries directory, but for the time being, do what the install doc says until the package is updated to specify otherwise.

Now just enable the module from your modules admin page.

Get wysiwyg_syntaxhl module

This module is similar to the wysiwyg_preelementfix module in that it simply exists to add a tinyMCE plugin and uses the wysiwyg module api to do it.

You can get it on its Drupal project page.  Put in the normal location enable it.

BTW, I am the author of this module, so please create a an issue on the drupal project page if you have any problems.

Configure wysiwyg profile

Go back to your admin/settings/wysiwyg page.  Enable the tinyMCE editor on one of your input formats.  I recommend using the Full HTML filter. Click 'Edit' to configure tinyMCE.  Now under buttons and plugins you should see the Syntax Highlighter option.  Make sure it is selected.  Additionally, my Cleanup and Output section looks like this:

Conclusion

You should now be able to insert code into your tinyMCE textareas. Note: During editing, you will only see a preformatted text box. You won't see a proper code box until you save and view the node.