Vim Tips Wiki
Register
No edit summary
 
(10 intermediate revisions by 8 users not shown)
Line 1: Line 1:
{{ScriptComments|2981|ZenCoding: HTML and CSS hi-speed coding}}
+
{{ScriptComments|ZenCoding: HTML and CSS hi-speed coding}}
   
 
==Comments==
 
==Comments==
  +
Just getting to grips with using zencoding with Vim. By default, it seems to
Nice work, but wouldn't something like this be easier?
 
  +
use a hard tab character for its indent, ignoring the user's vim settings.
   
  +
I found some documentation which said to add:
  +
  +
<pre>
  +
let g:user_emmet_settings = {
  +
\ 'html' : {
  +
\ 'indentation' : ' '
  +
\ }
  +
\}
  +
</pre>
  +
  +
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?
 
<pre>
 
<pre>
 
let zen_profile='...'
 
let zen_profile='...'
Line 19: Line 42:
   
 
MM.
 
MM.
 
:It require python or python interp. mattn.
   
  +
----
It require python or python interp.
 
 
Not if you are on windoze and don't have python. You can easily add abbreviations for you own language.
 
mattn.
 
   
 
----
 
----
   
* Not if you are on windoze and don't have python :-(
+
No No No, you are using another zencoding.vim :-(
 
- mattn
* You can easily add abbreviations for you own language
 
   
I needed to add these to the [[vimrc]] to get it working.
 
   
  +
----
 
I needed to add these to the [[vimrc]] to get it working.
 
<pre>
 
<pre>
 
let g:user_zen_expandabbr_key = '<c-e>'
 
let g:user_zen_expandabbr_key = '<c-e>'
Line 36: Line 60:
 
</pre>
 
</pre>
   
Change your laguage using
+
Change your laguage using
 
<pre>
 
<pre>
 
:set filetype='''css'''
 
:set filetype='''css'''
Line 42: Line 66:
 
</pre>
 
</pre>
   
Love it thanks!
+
Love it thanks! MikeyB
 
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)
 
   
  +
----
 
Or quick way to get this working on html related template files is to modify the zen_get_filetype function (as of 0.22)
 
<pre>
 
<pre>
 
function! s:zen_get_filetype()
 
function! s:zen_get_filetype()
Line 57: Line 79:
   
 
----
 
----
Does it support xml files?
+
Does it support xml files? I can use sparkup to speedup editing xml files. Frederick.zou
I can use sparkup to speedup editing xml files.
 
   
Frederick.zou
 
 
----
 
----
It's missing support for multiple classes. e.g.
+
It's missing support for multiple classes. e.g. <code>div.one.two</code> should expand to
div.one.two
 
should expand to
 
 
<pre>
 
<pre>
 
<div class="one two"></div>
 
<div class="one two"></div>
 
</pre>
 
</pre>
  +
 
at present (v 0.30), this module completely ignores the first class and gives
 
at present (v 0.30), this module completely ignores the first class and gives
 
<pre>
 
<pre>
 
<div class="two"></div>
 
<div class="two"></div>
 
</pre>
 
</pre>
'''Update''': This is fixed in v.31, however:
+
'''Update''': This is fixed in v.31, however: <code>div#name*4.one.two</code>
 
div#name*4.one.two
 
   
 
Doesn't work - as it translates to
 
Doesn't work - as it translates to
Line 85: Line 102:
 
</pre>
 
</pre>
   
div.one.two#name*4 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>
Line 94: Line 111:
   
 
-DeepakG
 
-DeepakG
  +
  +
----
  +
I think that it's bizarre format. I can understand this but it make break it self.
  +
<pre>
 
div*5#name*4.one*3.two*2
  +
</pre>
  +
  +
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
  +
  +
<pre>
  +
<div class="content" id="header">
  +
<ul>
  +
<li>
  +
<a href=""></a>
  +
</li>
  +
<li>
  +
<a href=""></a>
  +
</li>
  +
<li>
  +
<a href=""></a>
  +
</li>
  +
</ul>
  +
</div>
  +
</pre>
  +
  +
But I expect it work to print
  +
<pre>
  +
<div id="header" class="content">
  +
<ul>
  +
<li><a href=""></a></li>
  +
<li><a href=""></a></li>
  +
<li><a href=""></a></li>
  +
</ul>
  +
</div>
  +
</pre>
  +
  +
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:
  +
<pre>
  +
test1
  +
test2
  +
test3
  +
</pre>
  +
Tags: ul>li*3>a
  +
  +
It'll output this:
  +
<pre>
  +
<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>
  +
</pre>
  +
WTF?
  +
  +
And if you add spaces like this:
  +
  +
Tags: ul > li * 3 > a
  +
  +
Then it'll output this:
  +
<pre>
  +
<ul>
  +
<li>
  +
<a href="">test1</a></li>
  +
<li>
  +
<a href="">test2</a></li>
  +
<li>
  +
<a href="">test3</a></li>
  +
</ul>
  +
</pre>
  +
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:
  +
<pre>
  +
imap <D-e> <C-y>,
  +
</pre>
  +
where <D-*> indicates the Command key. --nijn

Latest revision as of 08:02, 12 August 2013

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[]

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]" "" 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