Italiano - English

A Geshi plugin for CKEditor (4.x)

Here is presented a CKEditor plugin for GeSHi. In addiction, It's shown how to extract codeblock from document and manage it with GeSHi.

Updated and working with CKeditor 4.5.8

CKEditor is one of most used WYSIWYG HTML editor like GeSHi is most important syntax highlighter, It will be desirable they can works together!

CKEditor is now at version 4.x and it doesn't have a built in syntax highlighter. On previous release there was available some plugins which insert code block tags into HTML page. Codeblock tags are compliant to most common syntax highlighter. One of above plugins is SyntaxHighlighter Alex Gorbatchev's.

Why here we are talking about new plugin ? Because GeSHi is my preferred one, it is the most completed although Alex Gorbatchev great works on SyntaxHighlighter it has less language support :(

Finally a CKEditor plugin is a tool which help users to select a block code to highlight and specify highlighter options. You can write manually highlighter required tags and options using CKEditor in "source" mode. Syntax highlight is performed out of editor by your preferred highlighter .

Present work starting from Ramble.in's plugin in order to obtain a GeSHi compliant plugin for CKEditor 4.x.

Server side syntax highlighting with CKEditor or some other WYSIWYG?

Syntax highlighting is performed when the page is required but there is a real difference between Server Side highlighting performed by PHP highlighter like GeSHi and Client Side Javascript highlighter like SyntaxHighlight.

Client Side highlighter requires right HTML tags into page, client browser will execute Javascript code in order to obtain formatted page. This way is very easy to use with WYSIWYG editors because it should include required tags.

Server Side highlighting is performed by PHP, Perl etc.. on web server than client browser gets an HTML page right formatted. This solution can't be managed fully by an editor but you can operate as following

You use the editor to include your code block into some HTML compatible tag as is for Client Side methods than:

  1. Catch posting form editor by a PHP post processor. It gets code blocks and related parameters from posting data, process this with your highlighter than save formatted html.
  2. Store page as it comes from editor posting. When client require the page, catch the request with a preprocessor, It gets code blocks and related parameters from requested file, process this with your highlighter than put out formatted html to client.

First solution stores formatted page. When you will edit the page with your editor you will find your code already (and always) highlighted and next modification can't be recognised by your post processor

With second solution, the document contains instruction for preprocessor. Highlighting is performed each time some client require the page but your editor will find the page as it (an its plugins) can manage, your code is always clean and any future modification can be processed by your preprocessor.

Second solution is preferable and chosen for this plugin.

Operation

Present plugin helps user to insert a source code snipset selecting the language and some few GeSHi options. Code snipset in included into pre tag with specified options:

  • [geshi:language] it specifies source code language
  • [line_num:false] (optional) use GeSHi line numbering

It creates an HTML code like following

 Installation

  • Extract files in <ckeditor_root>/plugins/geshi
  • If you use global configuration file (usually <ckeditor_root>/config.js) then update it to use this plugin :
     
    //
    // This is your active config.js
    //
     
    CKEDITOR.editorConfig = function( config )
    {
      // Define changes to default configuration here.
      // For example:
     
      // Add following two line 
      // Add the plugin to CKEDITOR config (separate plugins by comma)
      config.extraPlugins = 'geshi';
     
      // Add the plugin button to the full toolbar
      config.toolbar_Full.push(['Code']);
     
      // In addition disable html tag valitation from ckeditor 
      // allow use of statement like class=geshi:language or put here you allowed content
      config.allowedContent = true;
    };
  • If you use CKeditor object configuration you should add the plugin configuration to your object
     
    <label>Content: 
      <textarea cols='80' id='Content' name='Content' rows='30'>
        <? echo htmlspecialchars($Content); ?>
      </textarea>
    </label>
     
    <script type='text/javascript'>
      CKEDITOR.replace( 'Content' , {
     
          // enable the plugin
          extraPlugins: 'geshi',    
     
          // allow use of statement like class=geshi:language
          allowedContent: true,     
     
          //define your toolbar here
          toolbar: [
            { name: 'document',    items : [ 'Source','-','Save',] },
            { name: 'clipboard',   items : [ 'Cut','Copy','Paste','-','Undo','Redo' ] },
            all toolbar you want
            { name: 'tools',       items : [ 'Maximize', '-','About' ] },
     
            //Add geshi plugin button where you want
            { name: 'Geshi',       items : [ 'Code' ] }
          ]
        });
    ?>
    </script>
  • Finally disable or delete browser cache than opening your CKEditor you will see GeSHi button as is shown below

Utilisation

Download Geshi (http://qbnz.com/highlighter/) and write your own PHP preprocessor code to extract from your document than manage it with Geshi.

Following is an example code which performs above task, yes I know it's poor and it can be improved... but it running  ExtractCodeForGeshi.php

Vote this page:

12 Comments:

#1 Sent by George 09-02-2010

Sounds great, but I was not able to get it work, yet.
I already uploaded the files and added your two lines to ckeditor.config.js. Nevertheless the code button does not appear. I hope you can help me.

Thanks a lot and best regards,
George

#2 Sent by Pklab 10-02-2010

Do you are using CKEditor Full tool bar ?
Do you have disabled or deleted your browser chache ?

#3 Sent by George 10-02-2010

I already deleted my browsers cache and flushed all Drupal caches.
Maybe Geshi was installed wrong. At the moment I use the Durpal module "Geshifilter" so Geshi is extracted in /sites/all/modules/geshifilter/geshi.
That could be my mistake. So where do I have to extract Geshi from http://qbnz.com/highlighter/?

Thanks a lot,
George

#4 Sent by PkLab 10-02-2010

Dear George,
really CKEditor geshi plugin does not require geshi to run. This is because geshi works when your document is requested while plugin works when the document is edited.
The plugin just write few parsable tags in CKEditor generated html.

If you can't see the plugin button on CKEditor, your problem is at CKEditor level.

You must
- copy my plugin files on CKEditor plugin root folder.
- Change your CKEditor active config file as it's shown above
That is all you need to have Geshi plugin button on CKEditor tool bar.
Check you are editing right (active) config.js

To close the loop with gesghi, you need of a script, such as the ExtractCodeForGeshi.php above, that parses the tags and calls geshi to obtain an highlighted version of your document.

let me know
Bye

#5 Sent by George 11-02-2010

Dear PkLab,

I fear that I have to give up, because I have no idea what the problem still could be.

Nevertheless, thanks for the support!
George

#6 Sent by Tony 12-02-2010

Dear pklab,
Unfortunately, you've misunderstood the core concept behind GeSHi. I did too, initially. It's easily done.
It is not an inline parser that you use to parse a php page with source code on it every time you visit the page. You can do it that way but you will find that it puts undue strain on php.
The way we use GeSHi on our sites is to process the code using GeSHi once and then post GeSHi's output once into the post using the editor.
This prevents the need to include the GeSHi class on every page which you post syntax highlighted code on.
GeSHi will output highlighted code for you using in line css or at your option, using your own separate style sheets (Which creates less code.)
Please see the GeSHi demo included with the GeSHi download from the GeSHi site and the GeSHi documentation to see how GeSHi is supposed to be used.

I was likewise unable to get this plugin even register with ckeditor.
I'm in the process of creating my own and I'd just thought I'd let you know.
While your effort is admirable, this plugin's concept isn't sound and it just doesn't work.

Thanks,
Tony

#7 Sent by Tony 12-02-2010

Hi again,
I forgot to mention that I think adding :

editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName) );

below :

var command = editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName) );

Fixes your plugin to work with latest CKEditor svn because you aren't calling the editor add command first before setting it's params.

Thanks,
Tony

#8 Sent by PkLab 12-02-2010

Dear Tony
thank you very much for your comment.

I understand GeSHi concept. At design time I'm looking for a simple solution to avoid inline parsing with GeSHi. But parsing the post from editor implies that you will save a formatted content. On this way, when you come back to editing the content you will need to clean GeSHi formatting from embedded code, apply your modification than reformat the document.
This can be hard to do and require a reverse GeSHi.
For above reason I've preferred to save clean code and use inline formatting.

Sure my plugin can be improved and or redesigned, if you do this I will be very happy to cite your work on this page.

Finally about your fix suggestion, I don't understand very well, because the sentence
var command = editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName) );
instances the "command" var calling the editor add command.

Do you have tested your solution on latest CKEditor svn ?

I've tested my version of plugin with CKEditor 3.1 official release and it works fine.
I think that problems about plugin registration are related to right usage, for this reason I've improved configuration section of this page.

thanks again

#9 Sent by Tony 15-02-2010

Hi PkLab,
I think that you will be hard pressed to find a simple solution to avoid repeated in line parsing at every page view. It should just be completely avoided IMO.
Large amounts of code on pages that are parsed by GeSHi every time a visitor requests that page (If you don't have a good cache system) Will bring your site down to a crawl. php 5 really struggles with very large single GeSHi parsing transactions.

It really depends on how much you edit of course. The way I use GeSH is to display good code already created and that therefore requires no or minimal editing.
If you are interested in version control, which is essentially what you mean when you talk about editing GeSHi code output, then I can recommend git but I'm pretty sure it would require a new plugin to operate with GeSHi and CKEditor.
So if your code is always changing, like if you were using a VCS, you should plugin to that first and get GeSHi to parse it in a back end once and store it separately for each revision before you try to use CKEditor to post that code.

You can certainly edit GeSHi's output in CKEditor, without much problem, whether you use GeSHi inline or using css to control the colours.

I don't need to cite your work. I have already created a correct GeSHi plugin for CKEditor which actually uses GeSHi directly and offers GeSHi's many modes at highlight. I have written it from scratch.
It does not just parse a code block into a pre tag and then leave you to use GeSHi on it afterwards.
It avoids the possible output of invalid xhtml too.

Your variable is just setting the variable. You need to call the command that the variable contains to tell CKEditor to create the new command before you set any properties on it. That's essentially why it doesn't work, as I remember. I kind of abandoned trying to use your plugin after realising how it's supposed to work but I'm pretty sure that was why.

Yes I use CKE svn. The 3.2 milestone should be nearing completion soon and your plugin does not work with it.

I'm not trying to bash your plugin because you've obviously worked hard on it but I can achieve the same effect by setting CKEditor to not destroy php tags, slap the code straight into a php variable in CKEditor and use GeSHi's pre valid option, inline. I have a working example of that.

Effectively, your plugin would be great to use with Alex Gorbatchev's highlighter instead because it is essentially just a pre formatter.
No part of your plugin actually directly uses the GeSHi class to output highlighted code. That has to be done outside of your plugin. All it does is wrap code in a pre tag.

Thanks,
Tony

#10 Sent by pklab 30-07-2013

Thanks Tony for information you are giving.

My plugin is dated and it should be revised.

Anyway it's usefull for when you have few lines of code that you are proving as example in your webpage.
As addiction Geshi cover a lof of language (bash too) and I found this work way usefull.
than I decided to provide my work for the community :)

cheers

#11 Sent by alan 21-08-2013

I tried as you advised: first extract and upload Geshi files to a folder under plugins of ckeditor 4.2 and then modified the config.js and I'm sure config.js is functional and effective.

Then I tried to use the editor and the editor showed a blank area. If I delete the two lines you advised us to do, the text area showed up again.

I had no idea what's going on. Please help. Thanks in advance.

#12 Sent by leon-lib 26-11-2017

Leave your comment:

Note:
  • Your email email will not be visible or used in any way, and is not required
  • Please keep comments relevant
  • Any content deemed inappropriate or offensive may be edited and/or deleted
  • HTML code is not allowed. Please use BBCode to format your text
    [b]bold[/b], [u]underline[/u], [i]italic[/i], [code]code[/code]
The coding examples presented here are for illustration purposes only. The author takes no responsibility for end-user use
This work is property of Pk Lab. You can use it for free but you must retain author's copyright.