This is

as days pass by, by Stuart Langridge

. Here I write about many things. In the past I wrote about other things but the past is past. I write code for people to play with, I write about my life on Twitter, and I write here.

On I wrote zen-coding for gedit, on the subject of Python, Web, Software, Sundry Hacks, and Linux.

I've just discovered a sweet project called zen-coding (hat tip to Roger Johannson). It's a plugin for your editor, and if you write a lot of HTML it's great. Basically, it takes a typed-in: div#name.one.two and expands it to <div id="name" class="one two"></div> It can handle all sorts of complicated constructs; essentially, you type what amounts to a CSS selector and then hit Ctrl+E and it expands that into HTML. It can handle some really complex stuff. For example, cc:ie6>p+blockquote#sample$.so.many.classes*2 expands to <!--[if lte IE 6]> <p></p> <blockquote id="sample1" class="so many classes"></blockquote> <blockquote id="sample2" class="so many classes"></blockquote> <![endif]--> For more detail on how it all works, see the zen-coding site itself and Christopher's Zen Coding writeup at Monday by Noon. One other genuinely neat thing about it is that they're trying quite hard to support lots of editors. Currently they have plugins for TextMate, Aptana, Coda, NetBeans, and Espresso, with IntelliJ IDEA and ScitE in the pipeline. Me, I use gedit, so I did a basic port of the plugin to gedit. You can browse the code, or, if you want to use it, run svn export --force http://svn.kryogenix.org/svn/zen-coding-gedit $HOME/.gnome2/gedit/plugins on the command line. (You'll then need to enable the plugin, in Edit > Preferences > Plugins.) The install process isn't easier because I don't want to be distributing this; I want to get it upstream into the zen-coding tree. My gedit plugin is very basic; in particular, it doesn't handle placeholders. Placeholders are possible -- the gedit snippets plugin, a work of genius, does them, so it ought to be possible to hack them in -- but I didn't have time for that. If anyone wants to pick up the code and make that happen, just say the word.
pepelsbey

Thank you, Stuart

Now you're in Zen Coding project committers list and you can use SVN, upload files and edit Wiki.

Please, upload you plugin as .zip file and create Wiki page like GeditZenCodingEn with installation instructions.

Gabe

Thanks for this. It's hugely useful already.

Jesse van den Kieboom

The way placeholders work in gedit snippets is by simply inserting a pair of text marks per placeholder (one with left gravity, and one with right gravity). Then it's simply a matter of keeping track of these pair of marks, and once 'ed, find the next pair in the buffer (snippets do a little bit more than that, but it's the basic idea).

sil

Jesse -- adding the text marks is fine, it's handling tabbing between them and so on that I don't know how to do (without looking at the snippets code :))

No'

Sounds interesting. Although something's missing on your TODO:

- kick Sergey Chikuyonok in the balls for publishing python code with russian comments and docstrings.

His zen_core.py module may work wonderfully, I don't get the point to have them in russian. Qyute

No'

Sounds interesting. Although something's missing on your TODO:

- kick Sergey Chikuyonok in the balls for publishing python code with russian comments and docstrings.

His zen_core.py module may work wonderfully, I don't get the point to have them in russian. Quite frustrating

Yo'av Moshe

Thank you, it works beautifully.

Jesse van den Kieboom

@sil: well the tabbing is just a matter of matching the tab on key press, looking at which placeholder (or between which) you are now, and advancing to the next in the list :)

Sergey Chikuyonok

@No': I'll translate all code documentation to English for the next release, I promise :)

Zen-coding for Front End WebDeveloper

[...] I want to use zen-coding in gedit. I google to find some information and I finally got this awesome article. Here I just summarize that article for my study. At present, zen-coding supports Textmate, Aptana, [...]

Cool text editor plugin at jba blog

[...] love this zen coding plugin that expands css classifiers into html template text. Fantastic [...]

Micheil Smith

hmm.. This does look interesting, although, it is kinda fiddly, especially with the keyboard shortcut being ctrl+e, it just gets awkward.

sil

Micheil: what would you like the keyboard shortcut to be?

Fab

Totally off-topic, but still: Really digging your new design here. Totally ace, mate! :)

john

 thanks for this post, I really enjoyed it! This post was really interesting - thanks so much for sharing! This post really made me stop and think. Awesome job, thanks so much for putting it out there! Love your blog, and posts like this really illustrate why. Thanks for sharing, and keep up the good work!

Ghodmode

A little bit off-topic, but ... What lead you to gedit as your primary editor? It seems like a very basic editor to me. Did you try out several and settle on gedit, or did you just decide to familiarize yourself with the one that comes with a standard Gnome install? If you tried some others, would you be willing to share a bullet point for each one that you tried?

If you want to turn this into a topic for a separate blog entry... I'll read it :)

I'm a Gvim zealot, but I've been trying out IDEs in hopes of boosting my productivity. I'm so used to Gvim, though, that I think the learning curve for "normal" editors is actually reducing my productivity, but I've tried several already, including some that have plugins for Vi-type commands.

By the way, I got here by way of a project I don't think you've worked on in a while: Jackfield.

Thanks.

--

-- Ghodmode

sil

Ghodmode: yeah, Jackfield is abandoned. (The KDE people appear to have nailed Dashboard widgets in their new Plasma stuff, which is worth looking at.)

On the gedit front -- I've had a "10 things you don't know you can do with gedit" series of posts kicking around in my head for about two years now (it was, at one point, a talk at Guadec, but I had to bail that year and I've never written it up). Suffice to say, for now, that it was a deliberate choice, because I think gedit strikes the perfect balance between simplicity (which I want from all programs everywhere) and customisability (if you're techie enough to need it).

Oumar

The SVN repository is private? He is asking for authentification details....

sil

Oumar: fixed, thanks.

Dave Hughes

This reminded me of a templating system I was playing with in Pylons the other day: GHRML (http://www.ghrml.org/trac/wiki) which constructs HTML documents from something similar to CSS selectors arranged in an indented manner similar to Python. Apparently it was based on something called HAML (http://haml-lang.com/) which was popular in Rails.

Ralf

Great Port. But it doesnt work with Ubuntu Karmic.

Nooobi

Doesnt work with __tabs__ before "ul":

__tab__ ul#navigation>li.item-1$*3

But works with/without Spaces before "ul":

__spaces__ ul#navigation>li.item-1$*3

Zen Coding: A Speedy Way To Write HTML/CSS Code - Smashing Magazine

[...] Only)TextMate (Mac, and can be used with E-text editor for Windows);TopStyle;Sublime Text;GEdit;editArea online editor;Now, let’s see how these tools work.Expand AbbreviationThe Expand [...]

Online Business Management Software and Services » Blog Archive » Zen Coding: A Speedy Way To Write HTML/CSS Code

[...] GEdit; [...]

Zen Coding: A Speedy Way To Write HTML/CSS Code | Lick My Chip !

[...] GEdit; [...]

Zen Coding – veids kā rakstīt HTML ātrāk « ratrijs.id.lv

[...] GEdit – daļējs atbalsts [...]

William Notowidagdo

I just tried it and I like a lot. Thank you for your effort to make possible using this on Gedit.

Zen Coding: A Speedy Way To Write HTML/CSS Code « Ayushman Shrestha – Blog

[...] GEdit; [...]

Zen Coding: A Speedy Way To Write HTML/CSS Code » Shai Perednik.com

[...] GEdit; [...]

Zen Coding: Быстрый способ написания HTML/CSS кода | Сборная по макулатуре - 2

[...] GEdit; [...]

Zen Coding: A Speedy Way To Write HTML/CSS Code « Tech7.Net

[...] GEdit; [...]

Viết code HTML và CSS cực nhanh với Zen coding « DOMAIN – HOSTING – GLTEC.COM.VN

[...] GEdit; [...]

Zen Coding : Accelerer l’ecriture du code HTML et CSS | Anis Berejeb

[...] GEdit; [...]

Zen Coding: 一种快速编写HTML/CSS代码的方法| CSS| 前端观察

[...] GEdit; [...]

Zen Coding HTML+CSS极速开发利器 - Hobo's Blog

[...] GEdit; [...]

Simone Economo

For all ArchLinux users: you can now find a ready-to-use package for the GEdit Zen Coding Plugin at this link http://aur.archlinux.org/packages.php?ID=33138. Enjoy! ;)

caglar

It's not working correctly at ubuntu karmic.Shotcut did not work and if you try more than one (using menu item) then it's not working again.

alex_schmidt

Shotcut did not work (Ubuntu 9.10, gedit+gmate), how can I change it?

Menu item works well - but its not comfortable :(

Nicholas

alex_schmidt, it can be changed in plugin's config file in /home/ [user] /gnome2/gedit/plugins

Hugo

I get the same result in karmic

the menu item works well ahnd shortcut did not work :(

how can i fix this?

Nicholas

Hugo, change shortcut in plugin's config file that i locate in my previous post.

sil

From Mike Crittenden:

I've continued development of this at http://github.com/mikecrittenden/zen-coding-gedit

Any issues against the Gedit plugin can be posted there.

Hugo

Nicholas

i can't find the line in the config to change the sortcut

thanks for the plugin mike!

don't mad

Nicholas

Hugo, sorry, my mistake. you need to open plugin's core file.

sudo gedit ~/gnome2/gedit/plugins/zen-coding/__init__.py

in this file find rowl like this:

action_group.add_action_with_accel(complete_action,

"E")

where "E" - hotkey for expanding abbreviations.

Nicholas

Mike, i have one simply question:

on Habrahabr i see that Zen-coding 0.6 can expand abbreviations like this:

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

now in your new version of plugin it can't be expanden, so my question:

whether this function will be added? thx.

Dom

This is really awesome, thanks!!

Andrin

Thanks, very cool plug-in.

I've found that it doesn't work when using tabs as indentation though.

(eg. \tdiv.foo doesn't expand)

Changing line 74 in __init__.py from "words = line.split(' ')" to "words = line.split()" makes it work with all whitespace, not just spaces.

Thanks for the plug-in again, zen-coding rules!

Anonymous

It uses tabs as indentation even though I use the "insert spaces instead of tabs" option. Apart from that, neat plugin!

Christian

really great, this plug-in....

greetings from Sitzerland

Christian

many thanks :-)

Meher Ranjan

really love this. i hope this gets incorporated in the official zen-coding download page.

All the best. Really Good Work.

Alex

Zen Coding plugin for new Gedit 3 does not work. Please rewrite it.

This website belongs to Stuart Langridge. Contact details are available. Don't eat yellow snow. Valid HTML5, at least in theory, except for the bits that aren't because I'm that futuristic that I'm ahead of the spec, oh yes. HTML5 help from Bruce Lawson, among others. Fonts from the superb FontSquirrel. End.