You are here: HomeNotesJoomlaCodels Code Highlighter Button - Joomla (1.6) Installation and Testing

Codels Code Highlighter Button - Joomla (1.6) Installation and Testing


Codels CodeHighlighter and CodeHighlighterButton, as the names suggests, are useful Joomla plugins for highlighting snippets of code in one's Joomla articles. What makes this combination of packages different, from other code highlighting solutions, is that the code upload and installation process has been turned into a point-and-click process.

It supports a wide variety of scripting and programming languages including C/C++, CSS, Python, SQL, Bash(Shell) amongst many others. This article documents my experience with downloading and installing the extensions, with Joomla 1.6, and using it to highlight code in the C programming language.

The Installation Process

The packages, obtainable from the author's website,, are compressed zip files which at this time of writing contains versions for Joomla 1.5 and 1.6.

The packages are uploaded and installed, into Joomla, in the normal way of using Joomla's Extension manager in the back-end Administration section, of Joomla, as seen in the Figure below.

A successful installation of the Codehighlighter plugin is indicated by the presentation of the following message:  "CodeHighligher Plugin CodeHighlighter uses SyntaxHighlighter 2.x/3.x library from Supports up to 25 languages syntax highlighting for AppleScript.js, ActionScript3, Bash/shell, C#, C++, CSS, Delphi, Diff, Erlang, Groovy, JavaScript, Java, JavaFX, Perl, PHP, Plain Text, PowerShell, Python, Ruby, Sass, Scala, SQL, Visual Basic, XML, HTML, XSLT".

Likewise, once the codehighLighterbutton has been installed and enabled, a button  with the label "Insert code" should be available in the Article Manager -> Edit Article article editor, in the bottom left hand corner as can be seen  in the image below.

Well, now that we know that it supports multiple languages we should be able to test it out by inserting some code in the C programming language. Click on the "Insert Code" button and choose C++ in the "Choose Language" drop down menu item. Next paste the snippet of  code you wish to highlight and click on the "Insert" button.

Viola, you can see the result below. Very impressive!

#include <stdio.h>

          printf ("Hello World!\n");

Another example, provided below, uses the C API of Renderman however, in this case the first line starting number has been changed to 10. To modify the first line number start number the following syntax should be used:  <pre class="brush: plain; first-line: 10">

#include <ri/ri.h>

/* Declare a square as an array of four points. */
RtPoint Square[4] = {{.5, .5, .5}, {.5, -.5, .5}, {-.5, -.5, .5}, {-.5, .5, .5}};
/* Start the renderer. */

/* Scene description begins here. */

/* Render the surface with a constant colour. */
RiSurface("constant", RI_NULL);

/* Declare the square. */
RiPolygon(4, RI_P, (RtPointer) Square, RI_NULL);

/* Scene description complete. */

/* Clean Up. */


Well, it's as straightforward as that.  All in all a I would describe this as a very useful Joomla plugin.

Go to comments start