Skip to content

Latest commit

 

History

History
247 lines (174 loc) · 3.39 KB

TUTORIAL.mkd

File metadata and controls

247 lines (174 loc) · 3.39 KB
Raw

Tutorial for Emmet.vim

mattn mattn.jp@gmail.com

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>

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>

Balance a Tag Inward

Just type <c-y>d in insert mode.

Balance a Tag Outward

Just type <c-y>D in insert mode.

Go to the Next Edit Point

Just type <c-y>n in insert mode.

Go to the Previous Edit Point

Just type <c-y>N in insert mode.

Update an ’s Size

Move cursor to the img tag.

<img src="foo.png" />

Type <c-y>i on img tag

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>

Remove the tag

Move cursor in block

<div class="foo">
  	<a>cursor is here</a>
  </div>

Type 'k' in insert mode.

<div class="foo">

  </div>

And type 'k' in there again.



Split/Join Tag


Move the cursor inside block


 <div class="foo">
  	cursor is here
  </div>


Type 'j' in insert mode.


<div class="foo"/>


And then type 'j' in there again.


 <div class="foo">
  	cursor is here
  </div>


Toggle Comment


Move cursor inside the block


<div>
  	hello world
</div>


Type '/' in insert mode.


<!-- <div>
  	hello world
  </div> -->


Type '/' in there again.


  <div>
  	hello world
  </div>


Make an anchor from a URL


Move cursor to URL


http://www.google.com/


Type 'a'


<a href="http://www.google.com/">Google</a>


Make some quoted text from a URL


Move cursor to the URL


 http://github.com/


Type '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>


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


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',
  \  },
  \}