Tinymce Syntaxhighlighter Plugin

Posted by rich on April 7th, 2008 categorised as General, Projects

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.

  • Reddit
  • Digg
  • description
  • StumbleUpon
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • TwitThis
  • Furl
  • LinkedIn
  • Ma.gnolia
  • NewsVine
  • Pownce
  • Slashdot
  • Technorati
Tags: , , , , ,
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

24 Responses to “Tinymce Syntaxhighlighter Plugin”

  1. magicbug Says:

    hello,the download link is break.

  2. rich Says:

    Fixed now :)

  3. ice8 Says:

    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!!

  4. ice8 Says:

    Sorry, I dont view the line “remove_linebreaks : false”. This resolve the problem. Thanks!

  5. rich Says:

    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.

  6. ice8 Says:

    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!

  7. Harry Says:

    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???

  8. Alexwebmaster Says:

    Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru

  9. developerz Says:

    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”
    });

  10. developerz Says:

    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.

  11. developerz Says:

    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

  12. rich Says:

    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

  13. developerz Says:

    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

  14. rich Says:

    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

  15. Optimal Setup for SyntaxHighlighter with TinyMCE » Ellis Web Says:

    [...] 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 [...]

  16. alaedia Says:

    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!

  17. Matthew Jacobi Says:

    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.

  18. rich Says:

    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

  19. Allison Brown Says:

    What an excellent blog, I’ve added your feed to my RSS reader. :-)

  20. Ethan Simon Says:

    thank you for the job, I really love this series!

  21. Art Tasse Says:

    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.

  22. Juan Moran Says:

    Hi!

    One question… If I want to add a custum brush (for example: one for fortran), what file should I edit?

    Thanks.

  23. Matthew Jacobi Says:

    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.

  24. diego Says:

    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!

Leave a Reply