Vi and Vim Stack Exchange is a question and answer site for people using the vi and Vim families of text editors. It only takes a minute to sign up.
Sign up to join this community
I was wondering which is the best way to use syntax folding for HTML files. Specially if it can recognize javascript code within <script> tags.
I typed set foldmethod=syntax but it does not seem to do any folding. Do I have to add something else to my .vimrc?
I know for javascript, for instance, I need to add let javaScript_fold=1 but I am unsure whether I have to add something similar for HTML.
Thanks!
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 configure other related options there, e.g. foldcolumn=4.
Also note that so far (as of Vim 7.4.1830), the default HTML syntax script only folds a multi-line tag itself, not the text between the opening and closing tag.
So, this gets folded:
<div
class="foo"
style="width: 100"
>
But this doesn't:
<div>
<b>stuff in between</b>
</div>
To get this, you need to extend the syntax script, e.g. via the following, best placed into ~/.vim/after/syntax/html.vim:
Folding is performed between all but void html elements (those which don't have a closing sibling, like <br>). Contributed by @zanona; thanks!
syntax region htmlFold start="<\z(\<\(area\|base\|br\|col\|command\|embed\|hr\|img\|input\|keygen\|link\|meta\|para\|source\|track\|wbr\>\)\@![a-z-]\+\>\)\%(\_s*\_[^/]\?>\|\_s\_[^>]*\_[^>/]>\)" end="</\z1\_s*>" fold transparent keepend extend containedin=htmlHead,htmlH\d
Folding is performed between certain explicitly named structural (e.g. <head>), paragraph-level (e.g. <p>, <li>) and ancillary (e.g. <script>) HTML tags.
syntax region htmlFold start="<\z(p\|h\d\|i\?frame\|table\|colgroup\|thead\|tfoot\|tbody\|t[dhr]\|pre\|[diou]l\|li\|span\|div\|head\|script\|style\|blockquote\|form\)\%(\_s*\_[^/]\?>\|\_s\_[^>]*\_[^>/]>\)" end="</\z1\_s*>" fold transparent keepend extend containedin=htmlHead,htmlH\d
expr custom method which I use, however that disabled syntax folding for css and javascript. When using syntax javascript and css have folds as expected but none of the HTML tags do? Any ideas?
– zanona
May 30 '16 at 20:27
fold in it.
– Ingo Karkat
May 31 '16 at 6:45
