Code Syntax Highlight Plugin for FCKeditor

Introduction

This is a dialog-based plugin to handle formatting of source code for FCKeditor. It makes use of the SyntaxHighlighter javascript library available to download from alexgorbatchev.com. The plugin primiarily edits a <pre> tag with some custom attributes. Its mainly aimed at users editing blogs or content management systems where there is a requirement to format programming languages on a website that is being edited using FCKEditor.

The plugin is in the form of a tabbed dialogue box that looks like this:

Author:

Darren James

Version history:

  1. 2.0 02 March 2009, latest version supporting SyntaxHighlighter 2.0.x Download.
  2. 1.0.2 02 March 2009 Download.
  3. 1.0.1 10 Feb 2009 .
  4. 1.0: 30 Nov 2008. First version.

Known bugs:

Occasionally the dialogue box does not pickup the <pre> element to be edited in Firefox.
Fixed in version 1.0.2 - Thanks to Sergey Gurevich

Installation

1. Copying the files

Extract the contents of the zip in you plugins directory, so it ends up like this
Screenshot of installation

2. Adding it to FCKeditor

Now add in your fckconfig.js or custom js configuration file the following line (remember its javascript we are dealing with so everything is case sensitive!: FCKConfig.Plugins.Add( 'syntaxhighlight2', 'en') ;

3. Adding it to the toolbarset

Add the button 'SyntaxHighLight2' to your toolbarset: FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink', '-','SyntaxHighLight2','-','About']
] ;

4. Configure the plugin

The plugin will work 'out of the box', the plugin conmes with an example config section for fckconfig.js. You can configure a default language using the SyntaxHighlight2LangDefault parameter:

FCKConfig.SyntaxHighlight2LangDefault = 'csharp' ;

The full list of languages and corresponding codes are:

In FCKEditor <pre> blocks aren't really formatted by default. I suggest editing your fck_editorarea.css (or equivalant if you are using a custom CSS file) to something that highlights code blocks better. eg:

pre
{
    background-color: #fff;
    font-family: "Consolas" , "Courier New" ,Courier,mono,serif;
    font-size: 12px;
    color: blue;
    padding: 5px;
    border: 1px dashed blue;
}

Configuring SyntaxHighlighter.

You must have SyntaxHighlighter version 2.0.x installed and working to display properly formatted code. FCKEditor does not need it, but for code to be properly formatted on your website you must have it configurated correctly. The project wiki here is a good resouce.

5. Use it

Now empty the cache of your browser and reload the editor, the new button Insert formatted code block should be ready to use.

6. Future updates

There's some additional functionality I might add at a later date: