Code highlighter extensions are very useful when creating tutorial sites, code blogs, and so on. The difference they can make is great and these plugins also turn some difficult-to-read code into great-looking code.

For this example, we are going to use a very interesting extension called Core Design Chilicode plugin. As always, we can search for it in the JED or else use the following URL:

http://extensions.joomla.org/extensions/edition/code-display/7250.

Download it, then go to our administrator panel, then to Extensions | Install/Uninstall, and install the downloaded file.

Before taking a look at the parameters of this extension (in fact, before we can use it), we need to install another extension, the Core Design Scriptegrator plugin, which can be found at:

http://extensions.joomla.org/extensions/core-enhancements/scripts/3030.

This plugin is used to load libraries, like jQuery itself, which are needed. These libraries are for the code highlighter extension. Why aren't these extensions placed in the code highlighter extension itself? Well, the developer, wisely I have to say, has decided to separate this library loader plugin. This has been done so that all of the other extensions from this developer can use these libraries without having to place them in every extension they create. It also saves the necessity for each extension to load a copy of the library.

As I've said, this is a wise way of doing things. Now enough talking, we will download and install that plugin. Go to Extensions | Plugin Manager and look for System | Core Design Scriptegrator plugin. Enable it and also open it to see its parameters:

Very few parameters need to be changed, but we will take a look at them:

Advanced parameters are about the Highslide library, so we don't need to take a look at them for now. We are ready to check the other plugin. Without leaving the Plugin Manager screen, look for Core Design Chilicode plugin and open it. The following screenshot shows the plugins admin screen:

Not many parameters here, just two of them:

The only parameter in the Advanced Parameters section is as follows:

Now that we are done with the preparation, we can make use of this extension. But first we need an article where we can use it. I'm going to create a new section because as of now we only have one section called News and I wouldn't like to use it for this example. Navigate to Content | Section Manager and create a section called Site content.

We will also create a category called Plugins inside this section. Go to Content | Article Manager and create a new article. We are going to call this article Code Highlighting.

Now imagine we have the following content in our article:

Here we have some sample content for our article:
                        for($i=0; $i<250; $i++){
                        echo "Keep reading";
                        }
                        And now some bit more:
                        <div id="header">
                        <p>This is the header content</p>
                        </div>
                    

In the next screenshot, we can see how it will more or less look on our frontend:

This will be very difficult to read. So we are going to enhance it a bit using our previously installed plugin. Go back to the Article Manager screen. In order to use the plugin, we will write something like:

{chilicode language source} content {/chilicode}
                    

The parameters are:

Let's modify our contents accordingly; they will look more or less as follows:

Here we have some sample content for our article:
                        {chilicode php content}
                        for($i=0; $i<250; $i++){
                        echo "Keep reading";
                        }
                        {/chilicode}
                        And now some bit more:
                        {chilicode html content}
                        <div id="header">
                        <p>This is the header content</p>
                        </div>
                        {/chilicode}
                    

Check the following screenshot to see how these changes will affect the appearance of our article:

It's much better now. Our code samples look better and are a lot more readable (with very less effort required, and as we have commented before, in a very easy way).

Our next stop will be something very interesting that will add some quality content to our site—we are going to see a Flickr plugin. With this plugin, we will be able to insert Flickr galleries in our articles, helping us to add images that complement our articles.

Search for "captbunzo's Flickr Album Plugin" in the JED or use the following link:

http://extensions.joomla.org/extensions/external-contents/photo-channels/6566.

You can use the method you prefer. Following the download link on the JED page will direct us to the author's page where we will be able to download the plugin.

There you will find two versions, one for PHP4 and the other for PHP5. Download the one that suits your needs.

After doing so, we will go to the admin screen, Extensions | Install/Uninstall, which will present us with the installation screen for extensions. Here we can search for our extension and click on the Upload File & Install button. If all goes as expected, the plugin will be installed without problems and we will be able to find it in Extensions | Plugin Manager.

Look for Content - Flickr Album; it will be disabled for now:

Clicking on the red cross will enable the plugin. We can do so now so that we don't forget about it. Our next step will be clicking on the plugin name so that we can access the plugin's admin screen. This screen will look similar to the following screenshot:

In this screen, we will be able to set up our options. Let's take a look at the parameters:

And that's all. We have finished configuring the plugin; now save the changes. Now to the interesting part—using the plugin. To use the plugin, we are going to create a new article, but you can use an existing one if you wish. Go to Content | Article Manager and create a new article.

I'm going to call this article Flickr demo, but this really doesn't matter. The important part will be the content for the article:

This is a demo of the flickr plugin:
                        {flickr-album}Type=User, User=46665927@N07{/flickr-album}
                        In order to call the plugin we use the following tag:
                        {flickr-album}
                        Which we close using this one:
                        {/flickr-album}
                    

Inside these two tags, we can specify some parameters in order to adapt the gallery to our needs. In the example, we are defining the Type as User and the user ID to be used. Those parameters and the ones configured in the plugin admin screen will result in a gallery similar to the following screenshot:

Sadly, I think I'm not such a good photographer. But, hopefully, this will serve as an example of what we can achieve with this plugin. Of course, we can specify some other parameters in the plugin call. We can see a full list at the following website:

http://joomla.paulthompson.net/.

Some of these include:

All of these options give us great configuration capabilities, which will allow us to use this plugin on lots of occasions to complement our articles with useful images.

For our third plugin, we are going to see something less visible. In the previous chapters, as well as in this chapter, we have seen modules and plugins that introduced into our site some very nice effects.

The SC jQuery plugin helps us with jQuery loading and has some nice features, even more than what you can see at first sight. Some of them, as said in the JED, are as follows:

I'm going to leave the last and most interesting one untold, but we will see it later. Stay tuned so you don't miss it!

Well, now search for "SC jQuery" in the JED or load this URL: http://extensions.joomla.org/extensions/core-enhancements/scripts/7230. Once we are there, we will download the extension.

The next step is to install the file from our administrator screen Extensions | Install/Uninstall. Once we have done so, we are ready to go. Under Extensions | Plugin Manager, we will be able to find our newly installed plugin. Just search for System - SC jQuery and locate the plugin.

Enable it from the manager screen and then click on it to see its details. The next screenshot is showing just that:

Though most of the parameters are self-explanatory, I would like to take a look at them with you:

And that's all. Just don't forget to enable the plugin. If all of this goes well, we won't see any differences in our frontend. However, if we check the source code of the template, we will see this:

<script type="text/javascript" src="/plugins/system/scjquery/js/jquery-1.3.2.min.js"></script>
                        <script type="text/javascript" src="/plugins/system/scjquery/js/jquery.no.conflict.js"></script>
                    

These two lines of code will load the jQuery library and the "no conflict" script. Why don't you try the custom code parameter of the plugin? Just go back to the plugin admin screen and enter the following code in the custom code parameter field:

alert("Hello, How are you?");
                    

Don't worry; we will remove this annoying message just after we try it!

Save the changes and go back to the frontend, reload, and that's it! We have just created an annoying message!

In fact, the ability to annoy visitors is not what I would like to show you; we will leave that for another chapter. At this point in time, I would like to show you the generated code.

On taking a look at the source code of our site, we will see some code as follows:

jQuery(function($){
                        alert("Hello, How are you?");
                        });
                    

As we can see, the code has been placed inside:

jQuery(function($){
                    

And:

});
                    

So our code will be able to work along with other libraries, such as MooTools. Before continuing, remove that code from the plugin.

And now we will see something very interesting and useful.

Along with all the functions we have seen, the SC jQuery plugin offers us a very useful extra feature. If we take a look at the plugin code, we see the following line of code at the end of it:

$app->set( 'jquery', true );
                    

...
                        $app->set( ‘jquery’, true );
                        $doc->setHeadData($headData);
                        return true;
                        }
                        }
                    

What's that? Well, the plugin is setting a variable called jquery with the value of true. How can we use this variable? Very easily; remember working with the AJAX search module in Chapter 2?

The fact that many modules were loading the jQuery library gave us some problems. In order to solve them, we needed to make a complex code similar to the following:

$custom = '<script type="text/javascript">' ."
";
                        $custom .= 'if (typeof jQuery == "undefined") {' ."
";
                        $custom .= 'var script = document.createElement("script");' ."
";
                        $custom .= 'script.setAttribute("type","text/javascript");' ."
";
                        $custom .= 'script.setAttribute("src", "/modules/mod_ajaxsearch/js/ jquery-1.3.2.min.js");' ."
";
                        $custom .= 'document.getElementsByTagName("head")[0]. appendChild(script);' ."
";
                        $custom .= 'var script = document.createElement("script");' ."
";
                        $custom .= 'script.setAttribute("type","text/javascript");' ."
";
                        $custom .= 'script.setAttribute("src", "/modules/mod_ajaxsearch/js/ script.js");' ."
";
                        $custom .= 'document.getElementsByTagName("head")[0]. appendChild(script);' ."
";
                        $custom .= '}else{ ' ."
";
                        $custom .= 'var script = document.createElement("script");' ."
";
                        $custom .= 'script.setAttribute("type","text/javascript");' ."
";
                        $custom .= 'script.setAttribute("src", "/modules/mod_ajaxsearch/js/ script.js");' ."
";
                        $custom .= 'document.getElementsByTagName("head")[0]. appendChild(script);' ."
";
                        $custom .= '}' ."
";
                        $custom .= '</script>' ."
";
                        $document->addCustomTag($custom);
                    

In this code, we used JavaScript to detect if the jQuery library had been loaded, as follows:

if (typeof jQuery == "undefined") {
                    

And, if it was not loaded, we loaded it. First we created a script element:

var script = document.createElement("script");
                    

Then we added a type attribute to this script element:

script.setAttribute("type","text/javascript");
                    

And, of course, we added a src attribute:

script.setAttribute("src", "/modules/mod_ajaxsearch/js/jquery-1.3.2.min.js");
                    

In the end, we added the following code to the head section of our site:

document.getElementsByTagName("head")[0].appendChild(script);
                    

Now that the SC jQuery plugin is creating a variable, we can use just that in an easy way. Open the file modules/mod_ajaxsearch/mod_ajaxsearch.php and remove all the JavaScript. We will replace the JavaScript with this code:

$app =& JFactory::getApplication();
                        if(!$app->get('jquery') ){
                        $document->addscript(JURI::root(true).'modules'.DS. 'mod_ajaxsearch'.DS.'js'.DS.'jquery-1.3.2.min.js'),
                        }
                    

Here we are getting an instance of the application and trying to get the jquery variable that was defined earlier as follows:

$app->set( 'jquery', true );
                    

Also uncomment the following line:

$document->addscript(JURI::root(true).'modules'.DS. 'mod_ajaxsearch'.DS.'js'.DS.'script.js'),
                    

Looks easier, doesn't it? And it is more readable. We just check if the jquery variable is defined; if not, we load the jQuery library. If the variable returns true, it would mean that the plugin has already loaded the jQuery library. So we don't need to do it again and can follow with loading the module's own libraries.

Maybe you are thinking "Hey Jose, why didn't you show this first?" Well, I always like to see all the possible options. I feel the learning process is more complete if you are given all of the possible options.

The first solution was the one made by our own means, without the use of an external plugin. Now, with the introduction of another tool, we are able to upgrade the way in which we detect if the jQuery library has been loaded. And that's a good summary of a learning process, a continuous upgrade of knowledge.

Keep with us; we will see many other useful things!