Home

Adding code snippets to Joomla articles

Details
Category: Joomla
Hits: 2110

When I wrote the first post I wanted to include some code snippets in the article and have it formatted in a pretty way. After a bit of googleling I found SyntaxHighlighter (http://alexgorbatchev.com/SyntaxHighlighter/). This is a collection of javascripts (as far as I can tell) that formats the text. Different programming languages are defined as brushes. VHDL was not part of the included brushes so I found this package (https://wordpress.org/plugins/syntaxhighlighter-evolved-vhdl-brush/). This is a VHDL brush for the WordPress modified version of SyntaxHighlighter, however it works just fine with the original.

Installation

Download both packages and extract them. Copy the brushes from the VHDL package to the scripts folder of SyntaxHighlighter. I created a new folder on my webserver called SyntaxHighlighter and copied the compass, scripts, src and styles folder to the server.

Next you need to modify the template's index.php file. So first create a backup copy of the file. Open the index.php and search for the <head> section. Add the following code underneath the meta tag

 

<script type="text/javascript" src="SyntaxHighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushVhdl.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="SyntaxHighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>

 

Add all the brushes in this section that you want to use. Save and close the file.

Adding code snippets is easy, create a new article and before your code add the <pre class="brush: vhdl;"> tag and close the pre tag.

 

<pre class="brush: vhdl;">
library ieee;
use ieee.std_logic_1164.all;
use ieee.numeric_std.all;	
</pre>

 

Thats it...