How to Use GeShi Code Syntax Highlighter with WYSIWYG Editors like TinyMCE

Wednesday, 16 April 2008 01:19 Last Updated on Wednesday, 16 April 2008 02:14

Joomla 1.5.2 comes with GeShi Generic Code Syntax Highlighter and TinyMCE 2.0 html editor. If you've tried to use them, you'll know that there are some annoyances with the usage. First, the html editor will crop everything after the <pre> tag, so you wanted to define the language of the code with <pre xml:lang="php">, TinyMCE will throwaway xml:lang="php". This happen even when you try to edit the html directly. Second problem you run into is when your code is longer than your site's width. <pre> tag doesn't know how to format at all, so your site formatting breaks. Finally, there aren't any scrolls with the <pre> tag. I've figured out workarounds to these problems.

To address the first problem of not being able to define language for GeShi, we need to change the trigger keyword from <pre> to something else. For me, I used {geshi}. So, if I put {geshi lang="java"} and close it with {/geshi} I have a code block where all java syntax are highlighted.

To address the second problem of your code being longer than your site's width, we need to change GeShi settings to use div tags rather than pre tags.

To address the third problem of scrolling for your code block, we need add to the CSS stylesheet.

How to make GeShi trigger on a different keyword:

1. Open /plugins/content/geshi.php

2. Find this block of code

    // simple performance check to determine whether bot should process further
    if ( JString::strpos( $row->text, 'pre>' ) === false ) {
        return true;
    }
 
    // Get Plugin info
     $plugin =& JPluginHelper::getPlugin('content', 'geshi');
 
    // define the regular expression for the bot
    $regex = "#<pre xml:\s*(.*?)>(.*?)</pre>#s";

3. Replace with something like this,

     // simple performance check to determine whether bot should process further
    if ( JString::strpos( $row->text, 'geshi}' ) === false ) {
        return true;
    }
 
    // Get Plugin info
     $plugin =& JPluginHelper::getPlugin('content', 'geshi');
 
    // define the regular expression for the bot
    $regex = "#{geshi \s*(.*?)}(.*?){/geshi}#s";

That fixes the first problem.

Now, how to make GeShi use div tags instead of pre tags.

1. Open /libraries/geshi/geshi.php

2. Find this line

    var $header_type = GESHI_HEADER_PRE;

3. Replace it with,

    var $header_type = GESHI_HEADER_DIV;

That fixes the second problem.

Finally, how to add scrolling to your GeShi code blocks.

1. Open a CSS stylesheet that you know your site loads. By default, if you are using default template for Joomla, general.css located in templates/system/css/ should do the trick.

2. Add something like this for each language you'd like to use. This is for php. GeShi that comes with Joomla 1.5.2. comes pre-loaded with support for CSS, HTML, JAVASCRIPT, MYSQL, PHP, SQL, and XML. You can go to the official GeShi website, http://qbnz.com/highlighter/ and find syntax library for pretty much any programming language out there.

 .php {
 
    margin: 2px 0px 2px 0px;
 
    padding: 10px 10px 10px 10px;
 
    border: 1px dotted #aab4be;
 
    border-left: 20px solid #b4b4b4;
 
    background: #f4f5f6;
 
    font-size: 90%;
 
    overflow: auto;
 
    width: 400px;
 
    white-space: nowrap;
}

Key css tags here that solves our problem are overflow: auto; and white-space: nowrap;

That's it. If you have any questions, leave a comment here, and I will try to answer.

TrackBack URI for this entry

Comments (3)

Subscribe to this comment's feed