Wikia

Vim Tips Wiki

Changes: Script:2981

Edit

Back to page

(adjust Template:ScriptComments to remove id as no longer needed; minor tweaks)
(Change <tt> to <code>, perhaps also minor tweak.)
Line 58: Line 58:
   
 
----
 
----
It's missing support for multiple classes. e.g. <tt>div.one.two</tt> should expand to
+
It's missing support for multiple classes. e.g. <code>div.one.two</code> should expand to
 
<pre>
 
<pre>
 
<div class="one two"></div>
 
<div class="one two"></div>
Line 67: Line 67:
 
<div class="two"></div>
 
<div class="two"></div>
 
</pre>
 
</pre>
'''Update''': This is fixed in v.31, however: <tt>div#name*4.one.two</tt>
+
'''Update''': This is fixed in v.31, however: <code>div#name*4.one.two</code>
   
 
Doesn't work - as it translates to
 
Doesn't work - as it translates to
Line 78: Line 78:
 
</pre>
 
</pre>
   
<tt>div.one.two#name*4</tt> works as expected though:
+
<code>div.one.two#name*4</code> works as expected though:
 
<pre>
 
<pre>
 
<div id="name" class="one two"></div>
 
<div id="name" class="one two"></div>

Revision as of 09:48, July 14, 2012

Use this page to discuss script 2981 ZenCoding: HTML and CSS hi-speed coding

  • Add constructive comments, bug reports, or discuss improvements (see the guideline).
  • Do not document the script here (the author should do that on vim.org).
  • This page may be out of date: check the script's vim.org page above, and its release notes.

Comments

Nice work, but wouldn't something like this be easier?

let zen_profile='...'
let zen_abbr=extract_zen_code_from_current_line()

python import vim
python import zencoding.zen_core as zen
exec 'python zen_xtags=zen.parse_into_tree(r"""' . zen_abbr . '""", "' . &ft . '")'
exec 'python zen_string=zen_xtags.to_string("' . zen_profile . '")'
python vim.command("let zen_result='" + zen_string + "'")

" fix indentation and insert at cursor, replacing the zen_abbr
call insert_text_into_buffer(zen_result)

MM.

It require python or python interp. mattn.

Not if you are on windoze and don't have python. You can easily add abbreviations for you own language.


No No No, you are using another zencoding.vim :-( - mattn



I needed to add these to the vimrc to get it working.

let g:user_zen_expandabbr_key = '<c-e>'
let g:use_zen_complete_tag = 1

Change your laguage using

:set filetype='''css'''
:set filetype='''html'''

Love it thanks! MikeyB


Or quick way to get this working on html related template files is to modify the zen_get_filetype function (as of 0.22)

function! s:zen_get_filetype()
  if type == 'htmldjango' | let type = 'html' | endif
  if type == 'html.django_template' | let type = 'html' | endif

Great work


Does it support xml files? I can use sparkup to speedup editing xml files. Frederick.zou


It's missing support for multiple classes. e.g. div.one.two should expand to

<div class="one two"></div>

at present (v 0.30), this module completely ignores the first class and gives

<div class="two"></div>

Update: This is fixed in v.31, however: div#name*4.one.two

Doesn't work - as it translates to

<div id="name"></div>
<div id="name"></div>
<div id="name"></div>
<div id="name"></div>
<one class="two"></one>

div.one.two#name*4 works as expected though:

<div id="name" class="one two"></div>
<div id="name" class="one two"></div>
<div id="name" class="one two"></div>
<div id="name" class="one two"></div>

-DeepakG


I think that it's bizarre format. I can understand this but it make break it self.

div*5#name*4.one*3.two*2

Perhaps, most people does not try above. -mattn


Super cool vimscript; just needs some included documentation so vimmers can go over its usage from :help -alexy


Edit div#header.content > ul > li*3 > a in zencoding.vim may print like this

<div class="content" id="header">
    <ul>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
    </ul>
</div>

But I expect it work to print

<div id="header" class="content">
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

The selector wrap pattern will be more standard. The same problem exit like "table>tr*4>td#idc$*4>img[onclick]" "<td>" selector. I hope author can fix it.


The Wrapping Abbreviations function also has a problem:

If you use it on this:

test1
test2
test3

Tags: ul>li*3>a

It'll output this:

<ul>
	<li>
		<a href="">test1</a></li>
	<li>
		<a href="">test2</a></li>
	<li>
		<a href="">test3</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
	<li>
		<a href="">$line$</a></li>
</ul>

WTF?

And if you add spaces like this:

Tags: ul > li * 3 > a

Then it'll output this:

<ul>
	<li>
		<a href="">test1</a></li>
	<li>
		<a href="">test2</a></li>
	<li>
		<a href="">test3</a></li>
</ul>

Better but the tabbing is still messed up.

Testing on Vim 7.3 default installation with only this plugin from github, Dec 22 2010.


MacVim users, I remapped the expansion keycombo to my Command key like this:

imap <D-e> <C-y>,

where <D-*> indicates the Command key. --nijn

Around Wikia's network

Random Wiki