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 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.
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
- Go get the module at their drupal.org project page.
- Unpack it in the usual location ( sites/all/modules or equivalent )
- 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.
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:
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.