Add Syntax Highlighter to Your Joomla Website

Alex Gorbatchev's Syntax Highlighter is a very popular syntax highlighter. Here I am explaining how to add Syntax Highlighter to your Joomla website.

First go to http://alexgorbatchev.com/SyntaxHighlighter/ and download the Syntax Highlighter package to your computer. Open the zip file and copy the following files to a directory

scripts/shCore.js
scripts/shBrushJava.js (for Java syntax highlighting)
styles/shCore.css
styles/shCoreEclipse.css (for Eclipse style highlighting)

After copying all the required files, logon to your hosting space (via FTP or File Manager) and create two directories namely js (for java scripts) and css (for css styles). Now upload shCore.js and shBrushJava.js in to the 'js' directory. Similarly upload shCore.css and shCoreEclipse.css to the 'css' folder.

Now you have to edit your Joomla Template to include these java script files and css files in every page of your Joomla website. To do this go to "<joomla installation folder>/templates/<your current template>". Inside this directory you can see a file named "index.php". Open this file using an editor and add the following lines in the <head> section, as shown below. (Following is the default index.php of "beez_20" template)

After adding the java script files and css files in the <head>, add the following script block at the end of the file (index.php), just before closing the </body> tag. This java script function is the one which actually trigger the syntax highlighting. See below image

 

Save and Close the file. Now we have completed all the setup required for the Syntax Highlighter.

Now the last step is to create an article with some code. Go to your joomla administration > Article Manager and create a new article. Below the editor click on the "Toggle Editor" button to view the <html> code. Now paste your code with in a <pre class="brush:java"></pre> tag. The class "brush:java" will make the code inside the <pre> tag to be highlighted with Java syntax. See the following image

 

Now save and publish the article. Then go to your Joomla website and view the article. You can see that the code you have added is beautifully syntax highlighted with Java syntax as below.

You can add as many brushes as you need in to your template's index.php file and apply the brushes when you create articles.

Powered by Bullraider.com