Display code (PHP, CSS etc) in Joomla article

When you want to display some code samples in your Joomla articles, you will have to install a third-party plugin for that. I recommend Syntax Highlighter (Joomler Syntax Highlighter in Joomla Extensions), which can be used in Joomla 1.5, 1.6, 1.7 and 2.5.

After you have downloaded, installed and enabled the Syntax Highlighter plugin you should check your Joomla editing settings to make sure all code cleanup is disabled.

You can follow the steps in embed YouTube video in Joomla articles and if you are using JCE Editor as your content editor in Joomla, follow the steps in allow iframe and YouTube video in JCE Editor to make sure all code cleanup is disabled. If you won’t do those steps, your PHP, JavaScript etc codes will be deleted when you save your article.

Using the SyntaxHighlighter plugin is quite simple, just paste your code in to the article and surround it with {*code}{/*code} tags (I’m using * in front of the word “code” in the brackets so the plugin won’t start displaying my text as code). The plugin manual sets its usage rules like this:


– download the CodeHighLight plugin.
– install the plugin using the Joomla Extensions install utility.
– ENABLE the new CodeHighLight plugin with the Joomla 1.5 backend plugin manager.
– Set default parameters for the plugin engine.

The syntax for the usage is:

{*code [class=”<parameters for SyntaxHighlight engine>”] [width=”<>”]}
<text to be formatted goes here>

  <parameters for SyntaxHighlight engine> is a parameter string for the engine – see
{*code class=”brush: xml; gutter: false;” width=”500px”}
xlm goes here

OR (if you set default language to C++, for example):

C++ code goes here

OR if you set custom tag=code in plugin parameters and default language=C++:
C++ code goes here


* Remember to remove the asterisk * from the brackets (in front of the word “code”) when using the plugin in your articles.

Post Author: Tom Pai