57

Vim ships with a macro called matchit that does this for you; all you need to do is activate it with runtime macros/matchit.vim in your vimrc. This will enable you to jump from, eg, a <div> to its </div>. Note that your cursor will have to be inside the angle brackets; if you're on the angle brackets, % will jump from one bracket to the other as ...


40

You can jump between tags using visual operators, for example: Place the cursor on the tag. Enter visual mode by pressing v. Select the outer tag block by pressing a+t or i+t for inner tag block. Your cursor should jump forward to the matching closing html/xml tag. To jump backwards from closing tag, press o or O to jump to opposite tag. Now you can either ...


20

The following vim command would creates an html rendering of the current file. :TOhtml It saves the file in the same folder (with .html extension) and it will include styles, foreground/background colours and syntax highlighting, so the file can be straight web published as well as printed. For more options (like adding line numbers, compability with old ...


13

The 'foldmethod' is a window-local option; setting it from your ~/.vimrc doesn't necessarily have the right effect. Because syntax folding is bound to the html filetype, these settings belong to ~/.vim/after/ftplugin/html.vim: setlocal foldmethod=syntax This depends on having filetype plugin on in your ~/.vimrc, which you probably have. You can also ...


12

Here is a simple ad-hoc solution to put in ~/.vim/after/ftplugin/html.vim: inoremap <buffer> > ></<C-x><C-o><C-y><C-o>%<CR><C-o>O Breakdown: ></ insert '></' <C-x><C-o><C-y> use the built-in omni-completion to finish the closing tag <C-o>% ...


9

For what you want to do, emmet-vim, as nobe4 suggested, is your best bet. In insert mode, li{item $}*10<c-y>, will expand 10 <li>s with item N prefilled as the text. You'll start editing the contents of the first one. While still in insert mode, pressing <c-y>n will move to the next tag for editing. If your list items are not a sequence ...


7

Overriding a plugin manually Unless you intend to change all of the settings set by Vim's existing html ftplugin, you want your plugin to be loaded before it. The setting of the b:did_ftplugin variable will then cause Vim's version to exit immediately. Placing the plugin in your ~/.vim/ftplugin directory will cause it to be loaded before Vim's included ...


7

Put this in your .vimrc file: autocmd BufRead,BufNewFile *.htm,*.html setlocal tabstop=2 shiftwidth=2 softtabstop=2 Briefly, autocmds get processed when the specified events occur for the specified file name patterns. Here we just set the tab values for the current buffer to the desired value in the event of reading or creating a file with .htm or .html ...


7

In vim-surround ys{motion} puts "a surround text" on the same line. To place it on a line of its own with indent you should use yS{motion} instead. Next, a motion you want for this case is :h at (a tag). So this results in ySat<div>


6

After you've added your files to the arguments list with :n ./**/*.f90 (:args + filenames would do the same thing and is perhaps more obvious) you can use: :argdo exe 'TOhtml' | wq :argdo will execute its following commands for each buffer that's in the argument list. Note that you need to use TOhtml with :execute since it isn't defined to allow a ...


6

Vim already comes with Markdown support so what happens is that you have two Markdown ftplugins doing the same thing. Since you "fixed" one (~/.vim/ftplugin/markdown.vim) without "fixing" the other ($VIMRUNTIME/ftplugin/markdown.vim), your fix is simply overridden by the built-in ftplugin. If you insist on disabling HTML support in markdown buffers you can ...


5

I recommend the tidy-html5 plugin. As a web developer myself, I also recommend aligning the HTML tags a little differently, AirBnb React Styleguide (most legible & recommended for React) <a href="http://someverylongurl.com/foo/bar/blaz/SinwzvO.jpg"> <img src="http://someverylongurl.com/foo/bar/blaz/Sinwzv0.jpg" ...


5

You can read more about why this happens by looking at :help :syn-sync. The short answer is that vim decides to redraw the screen and starts from some point in the middle of the file. It incorrectly guesses the syntax at this starting point and it messes up the rest of the file. To fix this, I generally use this mapping, which I got from Steve Losh's ...


5

The syntax items within which Vim will highlight spelling mistakes are defined using the @Spell and @NoSpell clusters. See :help spell-syntax (and the rest of the :help spell and :help syntax files) for full details. The quick and dirty fix to get your desired result is to create a new file in your Vim config directory: .vim/after/syntax/html.vim with the ...


5

As I understood you, you want to convert content of current window to HTML. Try to run this command: :runtime! syntax/2html.vim more info here: :help convert-to-HTML


5

See vim-closetag It's exactly what you're looking for. From it's README: If this is the current content: <table| Now you press >, the content will be: <table>|</table> And now if you press > again, the content will be: <table> | </table> Note: | is the cursor here


5

Sometimes, Vim can lose track of where it is highlighting from, especially in complex scenarios (nested languages, in this example). You can tell Vim where it should sync the syntax highlighting from using the :syn sync command. From :h :syn-sync: There are four ways to synchronize: Always parse from the start of the file. Based on C-style comments. Vim ...


4

Ok, this is probably not the best solution because it is pretty invasive. But, it's all I could come up with so I will give it to you. One thing we can do is basically manually do the highlighting ourselves. So we could easily do something like: syn match quotedErubyBlock '"<%.\{-}%>"' This will define a new highlighting section that matches "<...


4

The xmledit (http://vimawesome.com/plugin/xmledit) plugin allows to jump between open and close tags using <localleader>% Often <localleader> will be \, so you can jump with \% NOTE: Unlike matchit, you don't have to put your cursor inside the tag. Placing it right on the < or > is perfectly fine for the xmledit plugin. :) NOTE 2: A drawback ...


4

You could use the plugin called vim-closetag which does exactly this. The big advantage over the default omni-completion is you don't need to type as much. The matching closing tag will be automatically inserted after your cursor. Just type > by default to insert a new line between those new tags, pretty convenient.


4

In vim, you can complete open html tags and close tags using omni-completion, invoked via ctrl-xctrl-o. To do this though, you must first type < or </ depending on which tag you want. For close, the tag corresponding to the nearest unclosed open tag will be chosen, for example: <div> <p>asdf</p> </[] <-- PRESS ctrl-x ctrl-...


3

I had to add the code below to my vimrc to get the p tag to work. I also included all the block level elements that are listed in the link in the original question as well (though this is overkill) to prevent any other changes (like Vim patch 7.4.356) from overriding my preferred settings. " " HTML indentation " let g:html_indent_script1 = "inc" let g:...


3

From /usr/share/vim/vim74/syntax/html.vim: syn region htmlString contained start=+"+ end=+"+ contains=htmlSpecialChar,javaScriptExpression,@htmlPreproc syn region htmlString contained start=+'+ end=+'+ contains=htmlSpecialChar,javaScriptExpression,@htmlPreproc To add spelling support, we need to add the @Spell keyword (see :help spell-syntax) like so:...


3

According to the Markdown specification, you are allowed to use inline HTML for any markup that is not covered by Markdown's syntax. For this reason, the Markdown configuration of Vim's ftplugin also loads the HTML configuration, as you pointed out. Instead of modifying this well-considered relation of default syntax configurations, I would suggest you ...


3

On Windows, $HOME/vimfiles/after/ftplugin/foobar.vim runs after loading the standard foobar ftplugin.


3

You'll need to modify the contains of syn region htmlTag to include your new htmlArgId. The full line would be: syn region htmlTag start=+<[^/]+ end=+>+ fold contains=htmlTagN,htmlString,htmlArg,htmlValue,htmlTagError,htmlEvent,htmlCssDefinition,@htmlPreproc,@htmlArgCluster,htmlArgId I just tacked on ,htmlArgId at the end; the rest is from /usr/share/...


3

Well you can of course dive into the complex syntax rules, see @Carpetsmoker's answer. However that might not always work correctly, depending on the order of the syntax rules and their priorities. Therefore, for such simple things it is usually better to use matchadd() function for highlighting special items in addition to the syntax rule. First define ...


3

That's a great opportunity to leverage text objects (see :help text-objects). The following code extends the normal behavior of the it text object (see :help it and :help tag-blocks) to make it consider multi-line HTML tags content as described in your post. In that way, you could also type in vit>, >it, dit, cit, yit and so on, with the extended ...


3

This particular issue seems to have come up more than once: A 2009 Stack Overflow question* A post in the Vim subreddit from just a few months ago Unfortunately the replies and answers mostly consist of non-solutions (suggesting to turn off filetype entirely) or workarounds (set indentkeys+=;). After a lot of digging, I gained more useful knowledge. Quick ...


Only top voted, non community-wiki answers of a minimum length are eligible