CODEWITHSUNDEEP
htmlvimfolding
mhartington
mhartington

Reputation: 7025

Vim folding for html

So this may have been asked before a few times, but there hasn't been a clear answer. Folding html blocks in vim.

Take the following markup

<html>
  <body>
    <section>
      <ul>
        <li></li>
        <li></li>
      </ul>
    </section>
    <section>
      <ul>
        <li></li>
        <li></li>
      </ul>
    </section>
  </body>
</html>

If you set vim's folding to indent and try to fold either of the section elements, both will get folded into on fold. Not ideal. Instead what I've been doing is folding the contents of each section.

What I want instead is to fold the individual section elements into their own block.

Now setting foldmenthod to syntax, then using zfat works, but it's a lot of keystrokes.

Instead, is it possible to fold based on opening/closing blocks? So far I've found this region based on XML, which could work for html as well, but I'm lost as how to use it.

  syn region XMLFold start=+^<\([^/?!><]*[^/]>\)\&.*\(<\1\|[[:alnum:]]\)$+ end=+^</.*[^-?]>$+ fold transparent keepend extend

Any ideas if this would work or if there is a better option?

Edit

What I have currently.

autocmd FileType html setlocal foldmethod=indent
autocmd FileType html setlocal fdl=3

If I toggle a fold at either of the section elements, it will collapse all of them into one fold

<html>
  <body>
   <section>…
  </body>
</html>

Where instead it should only toggle a fold for each individual section or div element.

<html>
  <body>
   <section>…
   <section>…
  </body>
</html>

Upvotes: 2

Views: 846

Answers (1)

ryuichiro
ryuichiro

Reputation: 3865

I am a little bit unsure of what you are trying to achieve but if you set

autocmd FileType html setlocal foldmethod=indent
autocmd FileType html setlocal fdl=3

you should get following:

<html>
  <body>
    <section>
      <ul>
+----  2 lines: <li></li>-------
      </ul>
    </section>
    <section>
      <ul>
+----  2 lines: <li></li>-------
      </ul>
    </section>
  </body>
</html>

If not, it is possible that some of your settings are off. For example

The foldlevel is computed from the indent of the line, divided by the 'shiftwidth' (rounded down). A sequence of lines with the same or higher fold level form a fold, with the lines with a higher level forming a nested fold.

:h fold-indent

So it depends on your shiftwidth how levels are count. In your case your settings should be 

set shiftwidth=2

to get the aforementioned result. To toggle folding of a tag use za. For other options read :h fold-commands (it is nice and extensive). Another nice option is foldcolumn (try to set foldcolumn=4).

Upvotes: 2

Related Questions