Tinymce Syntaxhighlighter Plugin
I went to intergrate Syntaxhighlighter into the site tonight, something I’d forgotten to do in the redesign and I thought it would be nice if I could just click a button in tinymce and paste in the code, select a few options and click insert. Which of course is entirely possible so I’ve written a tinymce plugin to do just that.
I did encounter one little bug writing the plugin. When inserting the pasted code it keept repeating itself if there was currently no content in the body of the textarea (tinymce). I finally managed to fix it by putting a space at the end of the variable I was trying to insert (and with the power of highlighting here’s what that looked like).
textarea_output += '</textarea> '; /* Note space */
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);
You can download the plugin here:
syntaxhl.rar (5.1 KiB, 245 hits)
syntaxhl.tar.gz (4.6 KiB, 252 hits)
syntaxhl.zip (5.7 KiB, 284 hits)UPDATE: The project has been moved to github, this is the preferred way of obtaining the files. I will leave the old download links up for now. Also feel free to fork, modify and send pull request with changes to the project… improvements are always welcome.
http://github.com/RichGuk/syntaxhl/tree/master
Getting it to work
First you need to download Syntaxhighlighter and get that working by including the CSS file and Javascript files. I combind all of the syntaxhighlighter javascript files into one on 27smiles, you can get it here.
Extract the plugin
Next you need to extract the plugin to your tinymce plugin directory. When extracted it should be something like this:
/path/to/tinymce/plugins/syntaxhl
Configure tinymce
Finally we need to configure tinymce to use our plugin we also need to stop tinymce from stripping out <textarea></textarea> html tags as this is needed for Syntaxhighlighter.
tinyMCE.init({
theme : "advanced",
plugins : "syntaxhl",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code, syntaxhl",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
remove_linebreaks : false,
extended_valid_elements : "textarea[cols|rows|disabled|name|readonly|class]"
});
We tell tinymce to use our plugin by adding syntaxhl to the plugins list and also adding the sytnaxhl button to the buttons list also note that extended_valid_elements contains the textarea tag this tells tinymce to not remove it.
If all went well you should see a new highlighter icon button in tinymce and when you click it you should get a dialog popup allowing you to insert code into your content.
If you encounter any bugs or have any problems getting it to work please contact me I’d be happy to help/fix bugs. Please note that I’ve only briefly tested this on Safari/IE7/Firefox 2/Firefox 3b5 and a quick blast on IE6 and from first tests it seemed to work. Also I was unsure if you have to stick to any standards when writing plugin’s for tinymce so it might not be the correctly way of doing it.
highlighting, plugins, programming, syntax, syntax highlighter, tinymce 
Stay Updated via RSS
July 24th, 2008 at 4:47 am
hello,the download link is break.
July 24th, 2008 at 8:22 am
Fixed now
August 18th, 2008 at 11:14 pm
Hi, Thanks for the plugin and explication! But I have a problem: When I write in dialog that appears when I click on the button (in tinymce), I save it and in web appears without breaklines. What can i do?
Thanks!!
August 18th, 2008 at 11:25 pm
Sorry, I dont view the line “remove_linebreaks : false”. This resolve the problem. Thanks!
August 19th, 2008 at 8:09 am
Ah glad you got it sorted!
I’m going to move the project over to github soon so anyone else can improve it if needs be.
September 19th, 2008 at 11:53 pm
Hi, i have a problem. When i write a link () inside the syntaxhl textarea, the link adds the mce_href atribute. Have you any idea? Help please.
Thanks!
October 7th, 2008 at 2:31 pm
Hi, I have problems finding the init function. Did a folder wide search and changed all init functions with the new setting. However, drupal still doesn’t show them in the html source by default. Where do I have to place this init function???
March 3rd, 2009 at 12:42 pm
Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
March 22nd, 2009 at 12:57 am
When you download the files at GitHub, there is an error in the “langs/en_dlg.js” file. For some reason the colon between highlight : “Highlight” is messed up, so the text in the pop-up box gets screwed up. You can notice the colon after “highlight” is colored pink here http://github.com/RichGuk/syntaxhl/blob/e945e10c8b8918b305fa8a369927df075a7514dd/langs/en_dlg.js
Here’s my code that works correctly
tinyMCE.addI18n(’en.syntaxhl_dlg’,
{
title : “Insert code using SyntaxHighlighter”,
highlight_options : “Highlighter Options”,
paste : “Paste Code”,
choose_lang : “Choose Language”,
nogutter : ” No Gutter”,
light : ” Light”,
collapse : ” Collapse”,
fontsize : “Font size”,
first_line : “First line”,
highlight : “Highlight”
});
March 22nd, 2009 at 1:15 am
Here’s a slight nice format for the “Insert code with SyntaxHightlighter” pop-up box. Just swap part of the html on the diglog.htm with the following html:
{#syntaxhl_dlg.highlight_options}
{#syntaxhl_dlg.nogutter}
{#syntaxhl_dlg.light}
{#syntaxhl_dlg.collapse} | {#syntaxhl_dlg.highlight}:
{#syntaxhl_dlg.choose_lang}:
Bash(Shell)
C#
C++
CSS
Delphi
Diff
Groovy
Jscript
Java
Perl
PHP
Plain(Text)
Python
Ruby
Scala
SQL
VB
XML/XHTML
{#syntaxhl_dlg.first_line}:
{#syntaxhl_dlg.fontsize}: %
—————-
That’s all, just a simple change.
March 22nd, 2009 at 1:20 am
Sorry about the last post, that’s not the html i posted. Here’s a pic of how my pop-up box looks: http://i39.tinypic.com/ra9kax.jpg
March 22nd, 2009 at 10:37 am
Thanks for the bug fix developerz I’ve just fixed the colon problem. Sorry I’ve not been around more everyone just been so busy with other work at the moment.
Thanks,
Rich
June 29th, 2009 at 11:29 am
Hey Rich,
It appears (at least for me) that “syntaxhl” is now making Tiny_MCE break (I’m now getting a javascript error ‘TinyMcE is undefined’) in Version: 3.2.4.1
If I remove syntaxhl from the plugin list of tiny_mce, then the text editor works correctly for me.
Just wanted to let you know that there might be an issue now between syntaxhl and tiny_mce