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

This tutorial shows how to configure GeSHi(Generic Syntax Highlighter) in Joomla 3.x

First download and install the plugin from here. Originally taken from here. Originally taken from tutorial

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

 

Change to:

 

Add style to the header of the block

 

Change to:

 

Disabling Keyword linking

 

Change to:

 

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:

 

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

 

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:

 

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

syntax highlight using geshi in joomla

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

syntax highlight using geshi in joomla

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

syntax highlight using geshi in joomla

That’s all. Thanks for your patience. Please do not forget to leave a comment.

Soumitra

Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.