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.
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.
Thanks for this. It’s hugely useful already.
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).
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
)
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
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
Thank you, it works beautifully.
@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
@No’: I’ll translate all code documentation to English for the next release, I promise
[...] 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, [...]
[...] love this zen coding plugin that expands css classifiers into html template text. Fantastic [...]
hmm.. This does look interesting, although, it is kinda fiddly, especially with the keyboard shortcut being ctrl+e, it just gets awkward.
Micheil: what would you like the keyboard shortcut to be?
Totally off-topic, but still: Really digging your new design here. Totally ace, mate!
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!
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
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).
The SVN repository is private? He is asking for authentification details….
Oumar: fixed, thanks.
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.
Great Port. But it doesnt work with Ubuntu Karmic.
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
[...] 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 [...]
[...] GEdit; [...]
[...] GEdit; [...]
[...] GEdit – daļējs atbalsts [...]
I just tried it and I like a lot. Thank you for your effort to make possible using this on Gedit.
[...] GEdit; [...]
[...] GEdit; [...]
[...] GEdit; [...]
[...] GEdit; [...]
[...] GEdit; [...]
[...] GEdit; [...]
[...] GEdit; [...]
[...] GEdit; [...]
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!
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.
Shotcut did not work (Ubuntu 9.10, gedit+gmate), how can I change it?
Menu item works well – but its not comfortable
alex_schmidt, it can be changed in plugin’s config file in /home/ [user] /gnome2/gedit/plugins
I get the same result in karmic
the menu item works well ahnd shortcut did not work
how can i fix this?
Hugo, change shortcut in plugin’s config file that i locate in my previous post.
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.
Nicholas
i can’t find the line in the config to change the sortcut
thanks for the plugin mike!
don’t mad
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.
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.
This is really awesome, thanks!!
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!
It uses tabs as indentation even though I use the “insert spaces instead of tabs” option. Apart from that, neat plugin!
really great, this plug-in….
greetings from Sitzerland
many thanks
really love this. i hope this gets incorporated in the official zen-coding download page.
All the best. Really Good Work.
Zen Coding plugin for new Gedit 3 does not work. Please rewrite it.
[...] GEdit; [...]
[...] GEdit; [...]
[...] GEdit; [...]