If you have to display code snippets on your Joomla site, you might find that the following mod is of help. This quick mod will allow you to add items to the styles drop down in the TinyMCE editor - in this case a style for the code class.

The mod is pretty straight forward.

Normally when TinyMCE is called it looks for a stylesheet called 'editor.css' in the default templates CSS folder. The contents of this are used to propagate the styles drop down. If this file is not found in the default templates CSS folder, then the system version is used instead. To add custom styles to the drop down, simply create the following file. (where current_template is the name of your template)

/templates/current_template/css/editor.css

Now you can add in the styles that you want displayed I added the following class to display the code as shown on this page

pre, .code {
padding: 10px 15px;
margin: 5px 0 15px;
border-left: 5px solid #999999;
border-right: 1px solid #999999;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
background: #FFFFFF;
font: 1em/1 "Courier News", monospace;
}

After uploading the new editor.css file you should be able to see the option 'code' in the drop down menu. To use it, select the text in the editor you want the style applied to and then select code form the drop down menu.

Whilst this has altered the way that the code is displayed in the editor, we still have to alter the way that it is delivered to the browser. To do this you will need to add the same code above to your templates default style sheet

/templates/current_template/css/template.css

In this case, there is already an entry for pre, .code so we simply need to replace the style elements with our new ones above. Additionally, depending on your template, you may also have other instances of pre, .code in other style sheets. To determine if this is the case either take a look at the source code of your page and see what style sheets are being called, or look at the template setting in the admin panel to see if there are any additional themes in use, in my case there was an additional style sheet overriding the main one.

/templates/current_template/styles/background/purewhite/css/editor.css

Simply comment out or remove pre, .code in the overriding style sheet. Now when the page is served to the browser, the correct style is applied. There is, however, one caveat to this - the new editor.css style sheet, supersedes the default one previously used, so any style elements that used to be listed in the styles drop down, will now be missing. To overcome this you can copy them from the system style sheet into your new editor.css