1. Overview

In this tutorial, we’ll talk about ways to edit markup language files in vim. This includes HTML and XML, which are what we’ll focus on, but we can also apply these techniques to other formats such as LaTeX. We just need that the format encloses text between the same keyword, as in <div>text</div>, regardless of the symbols that surround it.

2. Using Default Vim Macros

The easiest way to move within markup language files is to use one of the macros that come included with most vim distributions, bundled with the standard download.

With matchit.vim we can move between open and closing tags with %, the same way we can generally use % to move between matching brackets.

Even if this macro’s not enabled by default, we can temporarily activate it to see its behavior:

:runtime macros/matchit.vim

If we want the macro to be always active, we need to include the previous line in the .vimrc file.

Once activated, we’ll move between tags with %. We need to be within the tag word to go to the matching tag (the underline represents cursor location):

 

tag matching

However, if we’re over the symbol, % will move to the matching symbol:

 

symbol matching

If our cursor’s not even switching between the matching symbols, we need to specify the format of our file:

:set filetype=html

3. Manually Moving Through the File With the Tags

Without the need of using default macros, we can use vim commands and keystrokes to move between the tags of a markup language file.

Once we’re over the tag, we enter the Visual mode using v. We can move between the outer point of the tags with at:

 

outer tag matching

To exit at the new location we simply press Esc. This puts us again in Normal mode, where we can continue typing.

^ is used to return to the beginning of the line.

We can also move between the inner points of the tags with it:

 

inner tag matching

Once matching tags are selected, we switch between them with either o or O. Thus, if we have selected with it, pressing o results in switching between the start and the end of the text enclosed between the tags:

switching tag matching

We can create a custom macro in vim to automate any task, in this case, moving between tags. We can store a macro associated with any key.

Let’s take e for our example. With qe, we start recording the macro and we follow the steps of the previous list so vim can record them. Finally, once we’re done, we complete the recording with q. To use the macro, we press @e. This way, we can keep both our macro and the bracket matching feature of % with two different keys.

Moreover, the at and it keystrokes are also powerful when combined with vim modifiers. For example, if we want to delete the content of a tag group we can use dit, and to delete the full outer tag group we press dat:

 

modifiers tag matching

The 2u is used to undo the two last operations and return to the initial state. We can combine the at and it keystrokes with any modifiers to efficiently edit markup files.

4. Using Vim Plugins

There are some plugins whose purpose is to jump between open and close tags and support editing markup language files. The two most relevant ones are xmledit and vim-matchup. Although we’ll need to spend some time installing plugins, they tend to provide more features than macros and make the process worth it.

5. Conclusion

In this article, we’ve seen a few efficient ways to edit files and move between the tags of markup language files such as HTML or XML in Vim.

Comments are closed on this article!