Into the (open) source


Enable the plugin “zen coding” su gedit


This article was written in the 2014, there may have been some developments in the subject matter.
If in doubt please leave a comment in the bottom of the article.


For those who do not know, gedit is the text editor of choice for any Linux distribution based on Gnome. It is preinstalled on most Linux distributions, with the exception of those based on different window managers from Gnome (Where, xfce, enlightenment, etc..). It is primarily used for editing configuration files for system, but supports a large number of programming languages ​​and is expandable with plugins dedicated.

For this reason, before use Brackets, I used Gedit also for editing HTML and CSS.

This is gedit.


The user interface of gedit, with the selection of the language.

"Zen coding" instead it is a new way, faster, to write HTML. Official plugins (downloaded from the repository: are released under the MIT license, but there are not also listed in the official repository, including a pair for gedit: plugin Frank Marcias and to Mike Crittenden.

In fact, the two plugins are very similar and the installation of both is elementary, just that you are familiar with files and folders. I will not go into a tutorial on installing one or the other, both procedures are well documented on their GitHub, I would like more than anything else to focus on the operation of the plugin itself.

Suppose you want to create an HTML page header and navigation of a site. Normally this is what I would write "a mano":

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>

With zen coding instead write a single line of instructions, that will be interpreted and expanded in the way we know:

div#page>div.logo ul#navigation>that * 5>a

The explanation is simple and essential, just compare the two codes. In practice, the first term defines a tag, if followed by "#term" set the id of the related tags such as "term", if we follow the symbol "less" (>) tag that will follow will be the first child tag. If we follow the symbol "+" the tag that follows will be "brother". You can then specify a number of repetitions of the same tag (and possibly their attributes), multiplying it by a number choice ("that * 5").

On repository Google di Zen Coding, We can find a list of all possible scenarios. It is a page to keep in favorites.


I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.