kota's “memex”

I've set my emmet leader to C-S, the default is C-Y which is used to scroll the window up one line by default in vim. It's also not as ergonomic.

I've just written some highlights below, but the full tutorial is nicely written in :h emmet-tutorial

Goto "insert" point

C-Sn - Next insert point
C-SN - Previous insert point\

Select

C-Sd - Select outer tag
C-SD - Select inner tag\

Template

vim index.html and type html:5 then press C-S, and it will expand to the following:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

</body>
</html>

Expand an Abbreviation

div>p#foo$*3>a and type C-S, for:

<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

Visual select the following:

test1
test2
test3

Type C-S, and then ul>li* for:

<ul>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ul>

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-Sm:

<ul>
  <li class="list1"></li><li class="list2"></li><li class="list3"></li>
</ul>

Remove a Tag

C-Sk

Change / Update a Tag

C-Su

Make an anchor from a URL

http://www.google.com/

C-Sa

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

Make some quoted text from a URL

http://github.com/

C-SA

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

Update an image's size

<img src="foo.png" />
C-Si
<img src="foo.png" width="32" height="48" />