diff --git a/TUTORIAL.mkd b/TUTORIAL.mkd new file mode 100644 index 0000000..f36ed6b --- /dev/null +++ b/TUTORIAL.mkd @@ -0,0 +1,247 @@ +# Tutorial for Emmet.vim + +mattn + + + +## Expand an Abbreviation + +Type the abbreviation as `div>p#foo$*3>a` and type `,` + +```html +
+

+ +

+

+ +

+

+ +

+
+``` + +## Wrap with an Abbreviation + +Write as below: + +```html + test1 + test2 + test3 +``` + + Then do visual select(line wise) and type `,`. Once you get to the 'Tag:' prompt, type `ul>li*`. + +```html +
    +
  • test1
  • +
  • test2
  • +
  • test3
  • +
+``` + +If you type a tag, such as `blockquote`, then you'll see the following: + +```html +
+ test1 + test2 + test3 +
+``` + +## Balance a Tag Inward + +Just type `d` in insert mode. + +## Balance a Tag Outward + +Just type `D` in insert mode. + +## Go to the Next Edit Point + +Just type `n` in insert mode. + +## Go to the Previous Edit Point + +Just type `N` in insert mode. + +## Update an ’s Size + + Move cursor to the img tag. + +```html + +``` + + Type `i` on img tag + +## Merge Lines + +select the lines, which include `
  • ` + +```html +
      +
    • +
    • +
    • +
    +``` + +and then type `m` + +```html +
      +
    • +
    +``` + +## Remove the tag + +Move cursor in block + +```html + +``` + +Type 'k' in insert mode. + +```html +
    + +
    +``` + +And type 'k' in there again. + +```html + +``` + +## Split/Join Tag + +Move the cursor inside block + +```html +
    + cursor is here +
    +``` + +Type 'j' in insert mode. + +```html +
    +``` + +And then type 'j' in there again. + +```html +
    + cursor is here +
    +``` + +##Toggle Comment + +Move cursor inside the block + +```html +
    + hello world +
    +``` + +Type '/' in insert mode. + +```html + +``` + +Type '/' in there again. + +```html +
    + hello world +
    +``` + +## Make an anchor from a URL + +Move cursor to URL + +```http +http://www.google.com/ +``` + +Type 'a' + +```html +Google +``` + +## Make some quoted text from a URL + +Move cursor to the URL + +```http + http://github.com/ +``` + +Type 'A' + +```html +
    + Secure source code hosting and collaborative development - GitHub
    +

    How does it work? Get up and running in seconds by forking a project, pushing an existing repository...

    + http://github.com/ +
    +``` + +## Installing emmet.vim for the language you are using: + +```sh +cd ~/.vim +unzip emmet-vim.zip +``` + +Or if you are using pathogen.vim: + +```shell +cd ~/.vim/bundle # or make directory +unzip /path/to/emmet-vim.zip +``` + +Or if you get the sources from the repository: + +```sh +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. + +```sh +cat >> ~/.vimrc + let g:user_emmet_settings = { + \ 'php' : { + \ 'extends' : 'html', + \ 'filters' : 'c', + \ }, + \ 'xml' : { + \ 'extends' : 'html', + \ }, + \ 'haml' : { + \ 'extends' : 'html', + \ }, + \} +``` +