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

This tutorial shows how to configure GeSHi in Joomla 3. GeSHi is known as Generic Syntax Highlighter. We configure GeSHi to highlight the source code in tutorials in order to enhance the experience of user’s readability. Highlighting the source code in tutorials also enhance the beautification of the tutorials.

First download and install the plugin from here.

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:

The language will identify which technology the source code is written.

var $header_content = '';

Change to:

var $header_content = '{LANGUAGE} Code';

Add style to the header of the block:

This will add some css styles to enhance the look and feel of the source code highlighter.

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
}

Save and upload to your server.

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:

<pre xml:lang="java" lines="true">
</pre>

<pre xml:lang="php" lines="true">
</pre>

<pre xml:lang="css" lines="true">
</pre>

etc.

JCE Editor Configuration

If you are using the JCE editor, please follow the below steps to make it work.

Login to the Joomla Administrator and go to System->Global Configuration

Go to the Text Filters tab.

For Administrator the Textfilter option should be ‘No Filtering’

syntax highlight using geshi in joomla

Now click on Components->JCE Editor

syntax highlight using geshi in joomla

Click on Editor Global Configuration and check the following settings are there.

syntax highlight using geshi in joomla

Click on Control Panel on left side and click on Editor Profiles from the right panel menu.

syntax highlight using geshi in joomla

Now click on profile – Default

configure geshi in joomla

Click on Editor Parameters tab and after that click on Cleanup & Output. Look at the below settings are there

configure geshi in joomla

Now click on Advanced tab and look for the below settings.

syntax highlight using geshi in joomla

That’s all. Hope you found how to configure GeSHi in Joomla for highlighting the source code in tutorials.

Thanks for reading.

Soumitra Roy Sarkar

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin Or Email Me

Leave a Reply

Your email address will not be published. Required fields are marked *