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, 506 hits)
syntaxhl.tar.gz (4.6 KiB, 427 hits)
syntaxhl.zip (5.7 KiB, 505 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
July 20th, 2009 at 3:53 pm
I just checked with the latest version of tinymce and I had no problems getting it to work. Are you still having an issue with this?
Thanks,
Rich
November 1st, 2009 at 12:51 pm
[...] 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 [...]
November 9th, 2009 at 6:33 pm
Hi! buy mexican clenbuterol nolvadex online http://www.stumbleupon.com/stumbler/med-brother/ buy nolvadex drug Have a good time!
How are you? buying nolvadex buy liquid nolvadex
buy liquid nolvadex My congratulations to you!
November 20th, 2009 at 4:13 pm
This works well thanks. All though I did have a problem that when I try submit XML or HTML in that it strips the tags. See http://pastebin.com/f456af85e for example.
November 20th, 2009 at 5:07 pm
Hi Matt,
Glad you’re finding the plugin useful, the XML/HTML encoding problem should be fixed on the latest github version.
http://github.com/RichGuk/syntaxhl
Thanks,
Rich
November 24th, 2009 at 8:49 pm
What an excellent blog, I’ve added your feed to my RSS reader.
December 20th, 2009 at 4:17 pm
thank you for the job, I really love this series!
December 25th, 2009 at 5:48 pm
Hello,thanks you for this useful blogg, i really find many new things on it and i really loved the design of the blogg. I found it on bing. I also want to wish you a happy new year.
January 4th, 2010 at 4:53 pm
Hi!
One question… If I want to add a custum brush (for example: one for fortran), what file should I edit?
Thanks.
January 5th, 2010 at 6:46 pm
Juan, you might want to look at the syntax highlighter brush list: http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher/
Seems someone has started a fortran one, but the page also has instructions for adding your own.
January 23rd, 2010 at 11:20 pm
I’m trying to get TinyMCE working with syntax highligher, using following code:
tinyMCE.init({
theme : “advanced”,
plugins : “syntaxhl”,
mode:”textareas”,
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]”
});
Everything looks ok till I write some text into plugin window, no highlights at all no matter the language I choose.
BTW, links to the plugin are broken.
Please let me know if I’m missing some setting or if I have a wrong version of sotware.
Thanks.
Regards!