Page 1 of 1

Zen Coding - writing HTML code using CSS like selector syntax

PostPosted: Mon Nov 23, 2009 6:06 am
by echopark
This is an adaptation of the script discussed at
http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
to work on UltraEdit Javascript engine.

This is a text expander that turns this css string
Code: Select all
div#content>h1+p

into the correspondent html

Code: Select all
<div id="content">
<h1></h1>
<p></p>
</div>

The script will select the current line and try to expand it.

Save the source code as a .js file and use it in your scripting/scripts UltraEdit menu.

hth! =)

Download the script file ZenHTMLUltraEdit.js and save it for example in the subdirectory scripts in the UltraEdit/UEStudio program directory or wherever you want. Open Scripting - Scripts, add this script file and assign a hotkey or chord for fast calling the script. Now you can code a line as the example demonstrates and hit the hotkey or the key sequence to execute the script for converting the line according to the code into HTML.

Re: Zen Coding - writing HTML code using CSS like selector syntax

PostPosted: Mon Nov 23, 2009 7:15 am
by pepelsbey
Great work, echopark!

If you don't mind, i would like to add you to the project committers list on Zen Coding project, so you will be able to upload your plugin and create Wiki-pages with installation instructions.

So, if you interested, just email me: pepelsbey@gmail.com

Re: Zen Coding - writing HTML code using CSS like selector syntax

PostPosted: Mon Jan 11, 2010 5:39 pm
by fan.of.dilbert
echopark

I really appreciate U adapting Zen Coding (ZC) for UE.

I was wondering if U had tried it with CSS snippets which ZC has ...e.g.

bdcl:c ... hot key inserts border-collapse:collapse;

I changed function getEditorType (around line 1290) to return 'css' & tried some css snippets and it seems to work fine as long as the abbr snippet doesn't have a ':' like the example above ... here the entry point isn't correct and a pattern of deleting line 1 , col 1 char, but bdcl hot key ... abbr snippet without : ...doesn't suffer from same problem.

Wondered if U had tried it or had plans to w/ css... regardless if you do or don't a much appreciated contribution.

Update... altered how the replacement text was inserted and now it handles css abbr with/without the colon : whereas before the colon was a problem. Still the heavy lifting was down by Echopark.

UE 15.20

Re: Zen Coding - writing HTML code using CSS like selector syntax

PostPosted: Wed May 19, 2010 4:40 pm
by omnicity
Would you mind giving a slightly more detailed instruction on how to install and use this tool?

Re: Zen Coding - writing HTML code using CSS like selector syntax

PostPosted: Thu May 20, 2010 12:53 am
by Mofi
Hopefully echopark has nothing against my change on his post at top of the topic. I replaced his script code by a link to the script file on the server of IDM and added some lines how to use that script, see the last paragraph of the first post. I don't know who has sent the script file to IDM. I have just detected that it is on IDM's server without being referenced at the moment in the scripts section of page Extra Downloads. See also the blog Zen Coding for an explanation with images how to setup and use this script.