Zen Coding - writing HTML code using CSS like selector syntax

Help with writing and running scripts

Zen Coding - writing HTML code using CSS like selector syntax

Postby echopark » Mon Nov 23, 2009 6:06 am

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.
echopark
Newbie
 
Posts: 2
Joined: Mon Nov 23, 2009 5:40 am

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

Postby pepelsbey » Mon Nov 23, 2009 7:15 am

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
pepelsbey
Newbie
 
Posts: 1
Joined: Mon Nov 23, 2009 7:12 am

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

Postby fan.of.dilbert » Mon Jan 11, 2010 5:39 pm

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
User avatar
fan.of.dilbert
Newbie
 
Posts: 4
Joined: Sat Aug 08, 2009 2:28 pm
Location: USA

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

Postby omnicity » Wed May 19, 2010 4:40 pm

Would you mind giving a slightly more detailed instruction on how to install and use this tool?
omnicity
Newbie
 
Posts: 1
Joined: Thu Mar 13, 2008 5:12 am

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

Postby Mofi » Thu May 20, 2010 12:53 am

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.
User avatar
Mofi
Grand Master
Grand Master
 
Posts: 3937
Joined: Thu Jul 29, 2004 11:00 pm
Location: Vienna


Return to Scripts