-
Notifications
You must be signed in to change notification settings - Fork 0
/
emmet-vim.txt
221 lines (175 loc) · 4.38 KB
/
emmet-vim.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
Tutorial for Emmet.vim
mattn <[email protected]>
1. Expand an Abbreviation
Type the abbreviation as 'div>p#foo$*3>a' and type '<c-y>,'.
---------------------
<div>
<p id="foo1">
<a href=""></a>
</p>
<p id="foo2">
<a href=""></a>
</p>
<p id="foo3">
<a href=""></a>
</p>
</div>
---------------------
2. Wrap with an Abbreviation
Write as below.
---------------------
test1
test2
test3
---------------------
Then do visual select(line wise) and type '<c-y>,'.
Once you get to the 'Tag:' prompt, type 'ul>li*'.
---------------------
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
---------------------
If you type a tag, such as 'blockquote', then you'll see the following:
---------------------
<blockquote>
test1
test2
test3
</blockquote>
---------------------
3. Balance a Tag Inward
type '<c-y>d' in insert mode.
4. Balance a Tag Outward
type '<c-y>D' in insert mode.
5. Go to the Next Edit Point
type '<c-y>n' in insert mode.
6. Go to the Previous Edit Point
type '<c-y>N' in insert mode.
7. Update an <img>’s Size
Move cursor to the img tag.
---------------------
<img src="foo.png" />
---------------------
Type '<c-y>i' on img tag
---------------------
<img src="foo.png" width="32" height="48" />
---------------------
8. Merge Lines
select the lines, which include '<li>'
---------------------
<ul>
<li class="list1"></li>
<li class="list2"></li>
<li class="list3"></li>
</ul>
---------------------
and then type '<c-y>m'
---------------------
<ul>
<li class="list1"></li><li class="list2"></li><li class="list3"></li>
</ul>
---------------------
9. Remove a Tag
Move cursor in block
---------------------
<div class="foo">
<a>cursor is here</a>
</div>
---------------------
Type '<c-y>k' in insert mode.
---------------------
<div class="foo">
</div>
---------------------
And type '<c-y>k' in there again.
---------------------
---------------------
10. Split/Join Tag
Move the cursor inside block
---------------------
<div class="foo">
cursor is here
</div>
---------------------
Type '<c-y>j' in insert mode.
---------------------
<div class="foo"/>
---------------------
And then type '<c-y>j' in there again.
---------------------
<div class="foo">
</div>
---------------------
11. Toggle Comment
Move cursor inside the block
---------------------
<div>
hello world
</div>
---------------------
Type '<c-y>/' in insert mode.
---------------------
<!-- <div>
hello world
</div> -->
---------------------
Type '<c-y>/' in there again.
---------------------
<div>
hello world
</div>
---------------------
12. Make an anchor from a URL
Move cursor to URL
---------------------
http://www.google.com/
---------------------
Type '<c-y>a'
---------------------
<a href="http://www.google.com/">Google</a>
---------------------
13. Make some quoted text from a URL
Move cursor to the URL
---------------------
http://github.com/
---------------------
Type '<c-y>A'
---------------------
<blockquote class="quote">
<a href="http://github.com/">Secure source code hosting and collaborative development - GitHub</a><br />
<p>How does it work? Get up and running in seconds by forking a project, pushing an existing repository...</p>
<cite>http://github.com/</cite>
</blockquote>
---------------------
14. Installing emmet.vim for the language you are using:
# cd ~/.vim
# unzip emmet-vim.zip
Or if you are using pathogen.vim:
# cd ~/.vim/bundle # or make directory
# unzip /path/to/emmet-vim.zip
Or if you get the sources from the repository:
# cd ~/.vim/bundle # or make directory
# git clone http://github.com/mattn/emmet-vim.git
15. Enable emmet.vim for the language you using.
You can customize the behavior of the languages you are using.
---------------------
# cat >> ~/.vimrc
let g:user_emmet_settings = {
\ 'php' : {
\ 'extends' : 'html',
\ 'filters' : 'c',
\
},
\ 'xml' : {
\ 'extends' : 'html',
\
},
\ 'haml' : {
\ 'extends' : 'html',
\
},
\}
---------------------
}