I decided that selecting "Preformatted" in Umbraco's Richtext control and then editing the HTML to include the brush I wanted every time I inserted some code into my blog was getting a little tedious.

I'd already downloaded and configured my templates for using SyntaxHighlighter, but I wanted to go the next step and actually have a nice interface to be able to paste the code into, choose a couple of options and let it be done.

So here it is.  You can download the tinymce plugin from here.  You'll also want to download the SyntaxHighlighter as well and set that up as you like it.  Instructions for setting up SyntaxHighlighter can be found on Alexis' website here.

Credits

I found the basis for this on Nawaf's Blog.  As such I can't in anyway claim this as my own.  All I've done is updated it so that it uses the latest SyntaxHighlighter and made sure it works with a current version of TinyMCE.  And integrated it with Umbraco.  I've also updated the language list and the list of display options.

Installing the Plugin into Tinymce

Unzip the package into the tinymce plugins directory.  You should see the following layout:

then it's simply a matter of customising your tinymce initialization to inlude codehighlighting in your advanced theme.  Something like this would do, customise if how you like:

<!--
tinyMCE.init({
 theme : "advanced",
 theme_advanced_toolbar_location : "top",


    plugins : 'preview,codehighlighting',

    theme_advanced_toolbar_align : "right",
    theme_advanced_buttons1_add : " fontselect,fontsizeselect,zoom",
    theme_advanced_buttons2_add : "preview,separator,forecolor,backcolor",
    theme_advanced_buttons3_add_before : "tablecontrols, codehighlighting"
   
});
// -->

The important lines to take note of here are the ones containing codehighlighting.  That is, the plugins line and the theme_advanced_buttons3_add_before.

Additional Umbraco Specific Steps

Adding any additional functionality to the Richtext Editor in Umbraco is a matter of jumping through hoops, and has been written up many a time, so I'll just put a specific example here.

Firstly, open up the tinyMceConfig.config file found in your umbraco installation.  If you haven't already, install the excellent Config Tree Umbraco Package, as it is an excellent tool and makes this step a breeze.

    
    
    <command>
      <umbracoAlias>mceCodehighlighting</umbracoAlias>
      <icon>../umbraco_client/tinymce3/plugins/codehighlighting/img/codehighlight.gif</icon>
      <tinyMceCommand value="" userInterface="true" frontendCommand="codehighlighting">codehighlighting</tinyMceCommand>
      <priority>16</priority>
    </command>

..

  <plugins>
    <plugin loadOnFrontend="true">paste</plugin>
    <plugin loadOnFrontend="true">inlinepopups</plugin>

..

    <plugin loadOnFrontend="false">codehighlighting</plugin>
  </plugins>

Notice the priority - it's best to keep it unique, and determines the placement of the button in the toolbar.  Save your changes, and then go to the web.config file and save it without making any changes to force Umbraco to load the new configuration.

Notice also that I'm adding the codehighlighting plugin to the end of the list of plugins further down the config file.

Once you have done that, head over to the RichText editor datatype and select your new button:

You should now be able to use it when editing your content.  Choosing the new Code button will bring up a popup allowing you to paste in your code and set the language and a few options to alter the final output.

That's pretty much all there is to it.  If you have any comments or suggestions, please feel free to leave me a note and I'll try to get back to you as soon as possible.

Enjoy!