Wikia

Vim Tips Wiki

Script:2981

Talk0
1,610pages on
this wiki

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.

CommentsEdit

Just getting to grips with using zencoding with Vim. By default, it seems to use a hard tab character for its indent, ignoring the user's vim settings.

I found some documentation which said to add:

let g:user_emmet_settings = {
\  'html' : {
\    'indentation' : ' '
\  }
\}

to the .vimrc file but that seems to have no effect - it still gives a hard tab regardless. A question and a suggestion:

Q) How can one override this and get zencoding to use (in my case) two spaces instead of a tab?

Suggestion) zencoding should respect the user's normal vim settings of shiftwidth and expandtab, removing the need for a special configuration item. (Although that could still be retained for edge cases.)


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