How to Configure GeSHi(Generic Syntax Highlighter) in Joomla 3

Published: 06 May 2015 | Written by some jerk | Print | Email | Hits: 254

After installation the plugin has to be enabled. So do it here

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

Customizing 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.

The files that need editing are:

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

Editing geshi.php gives following

There are three reasons:

To disable the option that automatically generates keyword links within your code.
To style the header of the code block
To display name of programming/scripting/markup language

Editing template index.php gives following

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

Editing template CSS gives following

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

Edit geshi.php

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

Add language name to the header of the block

var $header_content = '';

Change to:

var $header_content = '{LANGUAGE} Code';

Add style to the header of the block

var $header_content_style = '';

Change to:

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

var $keyword_links = true;

Change to:

var $keyword_links = false;

Save and upload to your server

Edit your template’s 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 or open the php file which is used as a template’s index file

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

<script type="text/javascript">
( function($) {
$(document).ready(function(){
$('.php li:nth-child(odd)').addClass('odListItem');
$('.php li:nth-child(even)').addClass('evenListItem');
$('.html4strict li:nth-child(odd)').addClass('odListItem');
$('.html4strict li:nth-child(even)').addClass('evenListItem');
$('.css li:nth-child(odd)').addClass('odListItem');
$('.css li:nth-child(even)').addClass('evenListItem');
$('.javascript li:nth-child(odd)').addClass('odListItem');
$('.javascript li:nth-child(even)').addClass('evenListItem');
});
} )
( jQuery );
</script>

Save and upload to your server

Edit your template’s CSS file

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

Open your CSS file

Anywhere in your CSS file, add this code

pre{
background: none repeat scroll 0 0 #F1F1F1;
border: 1px dotted #D3D3D3;
margin-bottom:10px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
pre ol li{
margin: 0 0 0 20px !important;
padding: 4px;
}
pre ol {
margin: 0 0 0 10px !important;
}
.odListItem{
background:#fff
}
.evenListItem{
background:#EFFEFF
}