Formatting code with GeSHi

GeSHi is a powerful plugin shipped with Joomla! that will format code in your articles. All you need to do is insert your code inside a <pre> tag with one mandatory attribute: xml:lang and one optional attribute: lines.

Your markup will look something like this*:

HTML Code:
<pre xml:lang="php" lines="true">// your code here
 $i += 1;</pre>

This is all that's needed to get you started.

You might however want to include the name of the language, some extra formatting, remove keywords linking or set other powerful GeSHi features which are not exposed with the Joomla plugin implementation.

The easy way out is a core hack of the file plugins/content/geshi/geshi.php

You can add extra calls around line 70:

PHP Code:
//Adding language name to the header of the block
$geshi->set_header_content('{LANGUAGE} Code:');
//Style the header
$geshi->set_header_content_style('background-color:#FF4900;border-bottom: 3px solid #FEA104;text-transform: uppercase;');
//Disable keywords linking
$geshi->enable_keyword_links(false);
$text = $geshi->parse_code();

Here before the parse_code() function invocation you can invoke any GeSHi function for further configuration.  Read more here: http://qbnz.com/highlighter/geshi-doc.html#headers-and-footers.

The code editor

Your Joomla editor may strip away the lines="true" attribute (TinyMCE does). The quick solution is to use no editor.

The good solution is to install a proper editor such as JCE o JCK, and to ensure no filtering/cleanup is in place.  JCE will also allow you to create profiles for users, so you can limit the no filtering to yourself or the other coders who are not likely to mess up your markup.

The extra styles

If you want a kickstart on the styles, here are the ones used here:

CSS Code:
pre {
  box-shadow: 4px 4px 3px black;
  border: 1px dotted #D3D3D3;
  background-color: #f6f6f6;
  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 {
    background-color: #f6f6f6;
    margin: 0 0 0 10px !important;
    list-style-position: outside;
    padding: 0 0 0 10px; }
    pre ol li {
      margin: 0 0 0 20px !important;
      background-color: white;
      padding: 4px; }
      pre ol li:nth-child(odd) {
        background-color: #EFF7FF; }

Credits

This article was possible thank to the great article on http://dotcomxl.com/index.php/tutorials/web-design/115-joomla-syntax-highlighter

Troubleshooting

• Enable the GeSHi plugin in Joomla!
• Check your article markup after saving and re-opening. Are the xml:lang tags still there? and lines="true"? If not, change your editor preferences and disable the text filter in the global configuration.
• Make sure you use the syntax in this order: <pre xml:lang="css" with ONE space between pre and xml, and lines after (the regular expression requires perfect syntax)