Joomla Syntax Highlighter

geshi highlighter joomla tutorial

Towards the end of the development of dotComXL, I was looking to give the website some sort of syntax highlighter functionality. A quick search on the Joomla Extensions Directory, showed only 2 extensions that looked promising (most star ratings). After testing both however, I took the decision of uninstalling these Joomla Syntax Highlighters as they were lacking in ease of use, funcitonality and the style that I was after.

geshi highlighter joomla tutorial

It looked like the only option I had left was to look for some stand alone javascript plugin that I would have had to integrate myself into Joomla....but I suddenly remembered seeing something in Joomla....yes, there was something in the plugin list...in the plugin administration page...something called Geisha? No wait Geshi! Ever noticed it? Look for it, it is there!

Well it turns out that Joomla does have a syntax highlighter. It is called Geshi (Generic Syntax Hilighter), and the great thing about it is that it is in php so all processing is done server side.

Most if not all other syntax highlighters available, are in JavaScript.

Anyway, the problem with Joomla's Geshi is that it is impossible to find instructions on how to use it. (If anybody reading this article does know where there is some good documentation, by all means please let me know.)

Some research and testing after, I came up with a good way of using Geshi syntax highlighter in Joomla 2.5.

Here are a few examples. You will see that the syntax highlighter generates:

  1. A heading that displays what type of code the block is holding.
  2. Line numbers.
  3. Each line with alternate colours (makes it easier to read the code).
  4. Easy to copy code - when you select it the line numbers will be left out.

Sweet...

 

CSS Code:
  1. #header ul.menu
  2. {
  3. text-align:left;
  4. /* margin:0px 10px; */
  5. /* border-top:solid 1px #ddd; */
  6. font-size: 22px;
  7. line-height: .9em;
  8. }
Javascript Code:
  1. $(document).ready(function(){
  2. $('#myList li:nth-child(odd)').addClass('alternate');
  3. });
PHP Code:
  1. // module params
  2. $rssurl = $params->get('rssurl', '');
  3. // get RSS parsed object
  4. $cache_time = 0;
  5. if ($params->get('cache')) {
  6. $cache_time = $params->get('cache_time', 15) * 60;
  7. }
HTML Code:
  1. <h2>Features at a glance:</h2>
  2. <div id="homegrplOuter">
  3. <p class="featuresTwoline">Lorem ipsum apple pie, scelerisque.</p>
  4. <p class="homeBpoint">Turpis eget, chocolate muffin adipiscing</p>
  5. </div>

 

Customising and using Joomla Syntax Highlighter Geshi

There are only 3 files that need to be edited a little, however it is really very quick and easy to do. Once these edits are done, you can forget about it and play with your Geshi all you want!

The files that need editing are:

  • geshi.php
  • index.php of your template
  • your template CSS file

Don't worry though, as I said it is quick and easy!

Why edit geshi.php?

There are three reasons:

  • To disable the option that automatically generates keyword links within your code (useless feature in my opinion).
  • To style the header of the code block
  • To display name of programming/scripting/markup language

Why edit the template index.php?

To include a few lines of javascript required to give the lines of code an alternating colour.

Why edit the template CSS file?

To add a few quick styles so that we can make the code blocks look awesome!

 

Editing geshi.php

File location: plugins/content/geshi/geshi/geshi.php

Open geshi.php (I use notepad++)

 

Adding language name to the header of the block

Find (around line 360):

PHP Code:
  1. var $header_content = '';

Change to:

PHP Code:
  1. var $header_content = '{LANGUAGE} Code:';

 

Adding style to the header of the block

Find (around line 372)

PHP Code:
  1. var $header_content_style = '';

Change to:

PHP Code:
  1. var $header_content_style = 'background: none repeat scroll 0 0 #C95000;border-bottom: 3px solid #FEA104;color:#fff;font-size: 1.3em;padding-left: 3px;text-transform: uppercase;';

 

Disabling Keyword linking

Find (around line 539)

PHP Code:
  1. var $keyword_links = true;

Change to:

PHP Code:
  1. var $keyword_links = false;

Save and upload to your server

 

Editing your TEMPLATE index.php

This edit is to add a few lines of javascript required to colour the lines of code with an alternating colour.

File location: templates/YOUR_TEMPLATE_NAME/index.php

Open index.php with your source code editor

Between the <HEAD> tags, include the following code:

Javascript Code:
  1.  
  2. <script type="text/javascript">// <![CDATA[
  3. ( function($) {
  4. $(document).ready(function(){
  5. $('.php li:nth-child(odd)').addClass('odListItem');
  6. $('.php li:nth-child(even)').addClass('evenListItem');
  7. $('.html4strict li:nth-child(odd)').addClass('odListItem');
  8. $('.html4strict li:nth-child(even)').addClass('evenListItem');
  9. $('.css li:nth-child(odd)').addClass('odListItem');
  10. $('.css li:nth-child(even)').addClass('evenListItem');
  11. $('.javascript li:nth-child(odd)').addClass('odListItem');
  12. $('.javascript li:nth-child(even)').addClass('evenListItem');
  13. });
  14. } ) ( jQuery );
  15. // ]]></script>

Save and upload to your server

 

Editing your TEMPLATE CSS file

File location: templates/YOUR_TEMPLATE_NAME/css/CSS_FILE.css

Open your CSS file

Anywhere in your CSS file, add this code (I would add it down at the bottom)

CSS Code:
  1.  
  2. pre{
  3. background: none repeat scroll 0 0 #F1F1F1;
  4. border: 1px dotted #D3D3D3;
  5. margin-bottom:10px;
  6. white-space: pre-wrap; /* css-3 */
  7. white-space: -moz-pre-wrap; /* Mozilla */
  8. white-space: -pre-wrap; /* Opera 4-6 */
  9. white-space: -o-pre-wrap; /* Opera 7 */
  10. word-wrap: break-word; /* Internet Explorer 5.5+ */
  11. }
  12. pre ol li{
  13. margin: 0 0 0 20px !important;
  14. padding: 4px;
  15. }
  16. pre ol {
  17. margin: 0 0 0 10px !important;
  18. }
  19. .odListItem{
  20. background:#fff
  21. }
  22. .evenListItem{
  23. background:#EFFEFF
  24. }
  25.  

 

Save and upload to your server

 

Now that the boring part is over, all that is left to do is enable the plugin (I almost forgot that!)

  • Login into your website admin and go to Extensions > Plugin Manager.
  • Look for Content - Code Highlighter (GeSHi) and enable it. Done!

 

Writing Code using the Joomla Syntax Highlighter

Now that the plugin is enabled, if you want to show code in your articles you should switch to HTML view in your WYSIWYG editor and use this format:

geshi syntax highlighter format

(sorry I had to put it as an image to show it properly)


If you are using the JCE editor, you can have a look at this help file that explains how to disable filtering of php, HTML, CSS and JavaScript.

THE END

If you liked the tutorial don't forget to like and comment.

Thank you!

 


Additional information