No edit summary |
|||
(10 intermediate revisions by 8 users not shown) | |||
Line 1: | Line 1: | ||
− | {{ScriptComments |
+ | {{ScriptComments|ZenCoding: HTML and CSS hi-speed coding}} |
==Comments== |
==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: |
||
+ | |||
+ | <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.) |
||
+ | |||
+ | ---- |
||
⚫ | |||
<pre> |
<pre> |
||
let zen_profile='...' |
let zen_profile='...' |
||
Line 19: | Line 42: | ||
MM. |
MM. |
||
⚫ | |||
+ | ---- |
||
⚫ | |||
⚫ | |||
− | |||
⚫ | |||
---- |
---- |
||
− | + | No No No, you are using another zencoding.vim :-( |
|
⚫ | |||
⚫ | |||
⚫ | |||
+ | ---- |
||
⚫ | |||
<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 |
||
− | |||
⚫ | |||
+ | ---- |
||
⚫ | |||
<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 |
⚫ | |||
− | 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> |
||
⚫ | |||
+ | </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