Enable the plugin “zen coding” su gedit

Published by TheJoe on

Estimated reading time: 2 minutes


This article was published more than a year ago, there may have been developments.
Please take this into account.

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 serves mainly for editing configurations in the system files, 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, typing HTML. Official plugins (downloaded from the repository: are released under the MIT license, but there are no official also listed in the repository, including a pair for gedit: plugin Frank Marcias and to Mike Crittenden.

In reality the two plugin 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 we need 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” will set the id of the related tags like “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”).

Look here:  HTML: numbered list disordered

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.


Leave a Reply

Avatar placeholder

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.