FCKeditor code syntax highlighting plug-in based on syntaxhighlighter (code syntax highlight plugin for FCKeditor)

Source: Internet
Author: User

Source: http://psykoptic.com/blog/post/2008/12/01/Code-Syntax-Highlight-Plugin-for-FCKeditor.aspx


An example based on this article: http://psykoptic.com/demo/syntaxhighlighter/default.aspx


This is a dialog-based plugin to handle formatting of source code for FCKeditor 2.5.x
. It won't work with the new ckeditor
(Yet). It makes use ofSyntaxhighlighter 2.0.x
Javascript library available to download from Alex Gorbatchev's
Project page (the older version1.5.1 version
Is available from Google Code

The plugin primiarily edits<PRE>
Some Custom Attributes. Its mainly aimed at users editing blogs or
Content management systems where there is a requirement to format
Programming versions on a website that is being edited using FCKeditor.

The plugin will not format the code in FCKeditor
Syntaxhighlighter JavaScript library dynamically generates a lot
Formatted HTML at runtime, which wowould cause problems in FCKeditor.

Skip straight to the good bits

Can't be bothered reading all this? View the Online Demo
Or download the plugin
And go play with it yourself.

So what do I get then?

Correctly installed, the plugin is in the form of a tabbed dialogue box that looks like this:

Version history:

Huge thanks goesSergey Gurevich
Who wrote
Updated code for the FCKeditor plugin to handle the latest version
The syntaxhighlighter code and submitted useful bug fixes.

  • V2.1.0
    [23 May 2009]
    -Plugin version information now being displayed
    -Line highlighting feature added
    | Demo

  • V2.0.1
    [22 March 2009]
    Minor bug fix where semi-colons were sometimes positioned in the wrong place when no advanced options were selected

  • V2.0
    [2 March 2009]
    Latest Version supporting syntaxhighlighter 2.0.x
  • V1.0.2
    [2 March 2009]
    Bug fixes, final release supporting the older syntaxhighlighter 1.5.1
    Note the instructions below are for the newer version of the library and makes referencesSyntaxhighlight2
    A lot, this version usesSyntaxhighlight
    . The documentation in the download will be more accurate.
    . | Demo

  • V1.0.1
    [10 Feb 2009].
  • V1.0
    [30 Nov 2008]. First version.

Known bugs:

Occasionally the dialogue box does not pickup the <PRE>
Element to be edited in Firefox. It only seems to happen when a user clicks inside the <PRE>
Tag with the mouse but doesn' t actually move or interact with the cursor.

Fixed in version 1.0.2-thanksSergey Gurevich

Installation1. copying the files

Extract the contents of the zip in your plugins directory, so it ends up like this:

: Version 2 of the plugin must be extracted to a directory named'Syntaxhighlighter2
'. The older plugin for the earlier version of the library must go in a folder named'Syntaxhighlighter
'. The file fckplugin. js references this directory when the plugin initialises.

2. adding it to FCKeditor

Now add in yourFckconfig. js
Or custom JS configuration file
The following line (remember its JavaScript we are dealing with so
Everything is case sensitive !) :

) ;

3. adding it to the toolbarset

Add the button'Syntaxhighlight2'
Button to your toolbarset:

] = [


] ;

4. Configure the plugin

The plugin will work 'out of the box', but you can configure a default language usingSyntaxhighlight2langdefault

FCKConfig.SyntaxHighlight2LangDefault =

The full list of versions and corresponding codes are:


    • C ++
      -C ++
    • CSHARP
      -C #
    • CSS
    • Delphi
    • Java
    • JScript
      -Java Script
    • PHP
    • Python
    • Ruby
    • SQL
    • VB
      -VB. NET
    • XHTML

In FCKeditor<PRE>
Blocks aren't really formatted by default. I suggest editing yourFck_editorarea.css
(Or equivalant if you are using a custom CSS file) to something that highlights code blocks better. eg:

View Source
? 01.



"Courier New"






Processing ing syntaxhighlighter.

Have syntaxhighlighter installed and working
Display properly formatted code. FCKeditor does not need it, but
Code to be properly formatted on your website you must have it
Initialized correctly. For syntaxhighlighter2 Alex Gorbatchev's site
Has loads of excellent information (he wrote it after all !), For the old version 1.5.1 library, the project wiki here
Is a good resouce, or this blog
Post might also be useful.

5. Use it

NowClear your browser cache
(This stage is important !) And reload the editor, the new button
Shocould be ready to use.

6. Future updates

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

  • Preview tab using the syntaxhighlighter Library
  • More configuration options, eg, available languages, path to syntaxhighlighter files
  • Dynamically adding<PRE>
    Formatting style to the editor by default
7. And finally...

Thanks goes to Alex Gorbatchev for creating syntax highlighter


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.