DarkMatter in Cyberspace
  • Home
  • Categories
  • Tags
  • Archives

vim as a HTML Editor


Jump between matching HTML and XML tags

In normal mode, use "vat" to select all texts between these matching tags, then use "o" to jump between matching tags.

In "vat", "v" means select, "a" means including tags themselves(comparing with "i"), "t" means tags.

So we have "cat" (change outer), "yat" (copy outer), "cit" (change inner), "dit" (delete inner), etc.

Fold/Unfold HTML Tags

Fold a html tag: zfit;

Toggle fold/unfold tags: za;

Unfold all tags: zR;

See vim how to fold an html tag for other methods.

Auto complete opened tags

xmledit plugin

Install with git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. But it only works with .xml files. Not working with .html files.

To fix this, cd ~/.vim/bundle/xmledit/ftplugin; cp xml.vim html.vim (overwrite the existing html.vim file).

No plugins

Add "inoremap </" into ~/.vimrc. Now after "

some text", press F8, it will be converted to "

some text

".

ragtag plugin

Install ragtag plugin for vim with git clone https://github.com/tpope/vim-ragtag.git into ~/.vim/bundle.

:h ragtag in vim for help.

When editing a .html file, in insert mode, after input "div", press Ctrl-x,Space, it will be convert to "

|
". If press Ctrl-x,Enter, it will be converted to:

<div>
|
</div>

where "|" marks the cursor position.

Other plugins

There are some more powerful plugins for xml/html editing, but they are more complicated. Like surround.vim, closetag.vim, and emmet-vim.



Published

Nov 27, 2014

Last Updated

Nov 27, 2014

Category

Tech

Tags

  • html 9
  • vim 92

Contact

  • Powered by Pelican. Theme: Elegant by Talha Mansoor