My Corner

Syntax Highlighting in TinyMCE

TinyMCE is a powerful in-browser WYSIWYG editor. It’s used in well-known platforms such as WordPress to allow users the ability to edit blog posts right in the browser. I’ve been using TinyMCE for several years now, but until today I hadn’t found a decent solution for adding code snippets with syntax highlighting inside TinyMCE.

Google SyntaxHighlighter

Enter Google SyntaxHighlighter. You may have noticed the signature appearance on several web-design related websites: nettuts.com, davidwalsh.name, and scriptandstyle.com, just to name a few. It integrates several attractive features – decent syntax highlighting, cross-browser (all javascript/css), and the option to view plain text.

SyntaxHighlighter can be configured to use either ‘pre’ or ‘textarea’ elements (see this discussion for more details on the choice). In either case, add two attributes to the element and you’re set:

<pre name=code class=javascript></pre>

Unfortunately, working with textareas in TinyMCE is awkward at best (consider – what other use could there possibly be for textareas inside a WYSIWYG editor?). Okay, no textareas – no problem, just switch to the pre element! Here’s where TinyMCE’s powerful featureset gets in the way: the ‘name’ attribute isn’t technically supported for the pre tag, and TinyMCE will strip it from your HTML if you try and add it by viewing the code.

The cleanest way to get around this problem is to add an extended_valid_elements to your tinyMCE init, and include pre[name] in the element list. TinyMCE will merge the extended_valid_elements with the default valid_elements to allow the name attribute along with already-allowed attributes.

tinyMCE.init({
mode : "textareas",
theme : "advanced",
extended_valid_elements : "pre[name]"
});

Be aware that caching can make it seem like your changes aren’t making any difference! If in doubt, clear your cache.

RichGuk’s syntaxhl TinyMCE plugin

There’s an easier way than editing HTML every time you want to add a code snippet. I found a great plugin – syntaxhl by RichGuk (installation instructions are included with the download).

By default, his plugin uses textareas but changing it to use pre tags is simple. Edit syntaxhl/js/dialog.js and replace all instances of the textarea tag with a pre tag (there are only two instances, opening and closing tags). The final version is shown below:

f.syntaxhl_code.value = f.syntaxhl_code.value.replace(/</g,'<');
f.syntaxhl_code.value = f.syntaxhl_code.value.replace(/>/g,'>');
textarea_output = '<pre name="code" ';
textarea_output += 'class="' + f.syntaxhl_language.value + options + '" cols="50" rows="15">';
textarea_output +=  f.syntaxhl_code.value;
textarea_output += '</pre> '; /* note space at the end, had a bug it was inserting twice? */
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);
tinyMCEPopup.close();

You’ll need to get the newline and br options set up correctly to preserve whitespace in your code snippets.

Fully Integrated Syntax Highlighting

With syntaxhl integrated and working, I have single-button access to UI-level syntax highlighting. Writing tutorials is infinitely easier with a simple solution for sharing code. If you’re interested, I found a few alternatives along the way that might be better suited to your needs:

• Chili
• GeSHi
• ColourCode
• The Definitive Guide on WordPress Syntax Highlighter Plugins
• Alternatives listed in the SyntaxHighlighter Wiki
• vim

I hope this article has been useful. Let me know in the comments if you have suggestions or questions!

P.S. This article is a transfer of most of the content of an article on my old website.