Code improvement with Geshi

Questions about how to use the online - editors and suggestions how to improve them
Post Reply
pmolik
Posts: 13
Joined: Sun Apr 29, 2012 12:48 pm

Code improvement with Geshi

Post by pmolik » Sun Apr 29, 2012 12:54 pm

Hi guys,
I installed recently this amazing cms ( CMSimple_XH1.5) but altough there is plenty informations about cmsimple, I still didn't get how to install a nice code highlighting like geshi. Maybe I'm wrong and i don't have to install it, but could you exlpain me how to get it please ? Maybe something with cms scripting or ?
Thanks !

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Code improvement with Geshi

Post by cmb » Sun Apr 29, 2012 1:28 pm

Hi pmolik,

I guess the biggest problem is, how to tell Geshi which code should be highlighted. A nice solution might be to have some code in the content of a CMSimple page like so:

Code: Select all

<pre class="geshi">
Code to highlight
</pre>
But this would require parsing the pages content, getting the <pre>'s content, sending it through Geshi and reinserting Geshi's output to the page before it is displayed in the browser. This seem to be a bit tricky. I'll have a look at it later.

An alternative might be ckeditor-syntaxhighlight, which might work out of the box with CKeditor.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

pmolik
Posts: 13
Joined: Sun Apr 29, 2012 12:48 pm

Re: Code improvement with Geshi

Post by pmolik » Sun Apr 29, 2012 2:25 pm

Thanks Christoph, i'll look at this one until something simple (as cmsimple !) appears with geshi ;)

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Code improvement with Geshi

Post by cmb » Sun Apr 29, 2012 2:32 pm

Hi pmolik,

I've just managed to get geshi to work. Just download http://3-magi.net/downloads/geshi.zip, unzip it, and upload geshi/ to the plugins/ folder. (The download is GeSHi-1.0.7 plus an index.php for the integration to CMSimple).

Mark the code in the editor as follows:

Code: Select all

<pre><code class="geshi" lang="php">echo 'Hello world!';</code></pre>
That's it! Of course you can use any language that's supported by GeSHi instead of php.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

pmolik
Posts: 13
Joined: Sun Apr 29, 2012 12:48 pm

Re: Code improvement with Geshi

Post by pmolik » Sun Apr 29, 2012 3:13 pm

Wow. Fast and efficient :D Thanks you again !

Just a note for ppl who would like to use it : the code must be inserted in "html mode" directly, not in editor, alright Christoph ?
Last edited by pmolik on Sun Apr 29, 2012 3:52 pm, edited 1 time in total.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Code improvement with Geshi

Post by cmb » Sun Apr 29, 2012 3:45 pm

Hi pmolik,
pmolik wrote:the code must be inserted in "html code" directly, not in editor
Unfortunately it's not possible to insert the class and lang attribute with tinyMCE (I'm not sure about CKEditor). So you have to insert the code in the HTML mode of the editor. But I've just noticed, that tinyMCE removes line breaks, when there's a <code> element inside the <pre> (what's of course correct, as <code> is an inline element). So probably it's better to stick with the following formatting:

Code: Select all

<pre class="geshi" lang="php">echo 'Hello World!';</pre>
Than plugins/geshi/index.php should be:

Code: Select all

<?php

function geshi_highlight($matches) {
    global $pth;

    $geshi = new GeSHi($matches[2], $matches[1]);
    return $geshi->parse_code();
}

if (!($adm && $edit)) {
    include_once $pth['folder']['plugins'].'geshi/geshi.php';
    $c[$s] = preg_replace_callback('/<pre\s+class="geshi"\s+lang="(.*?)">(.*?)<\/pre>/isu',
        'geshi_highlight', $c[$s]);
}

?>
I have to make some further tests with tinyMCE and CKeditor. If all works well, I'll release it as a plugin.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

pmolik
Posts: 13
Joined: Sun Apr 29, 2012 12:48 pm

Re: Code improvement with Geshi

Post by pmolik » Sun Apr 29, 2012 4:17 pm

I was trying some codes.... uhg. How can i make "<" directly in html mode ?
Eg : for (int k = 0; k < 30; k++) {...}" in C, i can't simply make

Code: Select all

<pre class="geshi" lang="c">for (int k = 0; k<30; k++) {...}</pre>
because html replace the "<" by &lt and after that geshi doesn't recognize it !
As a result i get :

Code: Select all

for (int k = 0; k < 30; k++) {...}
Anyway that's sweet. Could you repost here when you'll release it (to close the issue definitively !) please ?
Regards.

pmolik
Posts: 13
Joined: Sun Apr 29, 2012 12:48 pm

Re: Code improvement with Geshi

Post by pmolik » Tue May 01, 2012 7:26 pm

While Christoph (or some other skilled ppl !!) are making a cool tool, I "made a temporary fix" for "<", ">" and "&".
I just inserted into the index.php of Christoph this line :

Code: Select all

if (!($adm && $edit)) {
    include_once $pth['folder']['plugins'].'geshi/geshi.php';
    
    $c[$s] = preg_replace_callback('/<pre\s+class="geshi"\s+lang="(.*?)">(.*?)<\/pre>/isu',
        'geshi_highlight', $c[$s]);
    $c[$s] = str_replace(array('&gt;', '&lt;', '&'), array('>', '<', '&'), $c[$s]);
}
 
I totally don't know php so it may be awful, but anyway it works a bit. (I mean, it doesn't work totally because you need to separates "<" and ">" from the rest, eg vector<int> won't work, but vector < int > will ).

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Code improvement with Geshi

Post by cmb » Sun Sep 16, 2012 7:09 pm

Hi pmolik,

I'm not sure anymore, if Geshi is the best approach for syntax highlighting, as it works on the server, so it needs server-side ressources to do the syntax highlighting, but even worse, it will considerably increase the (X)HTML that's sent to the client.

There are some JS based syntax highlighters available, which shift the work to the client, most notably Alex Gorbatchev's SyntaxHighlighter (and recently I found gcp). But the problem with the special (X)HTML characters ('&', '<', '>') remains. I had found plugins for tinyMCE resp. CKEditor, which should make it possible to insert source code usable for the SyntaxHighlighter, but both plugins didn't really work good.

A simple solution would be to add the code snippets not directly on the page, but instead in a special admin part of the plugin -- but that's quite cumbersome for many small code snippets.

So I still don't know, how to handle the syntax highlighting issue. I'll have to further investigate -- but that may take some time. :(

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

pmolik
Posts: 13
Joined: Sun Apr 29, 2012 12:48 pm

Re: Code improvement with Geshi

Post by pmolik » Mon Sep 17, 2012 7:17 pm

Well ok, no problem, I'm keeping Geshi (although it is quite ugly actually) for this time but thanks for the performance issues you pointed.
By the way it's not a high priority, so you can take your time; thanks for the support ;)

Post Reply