Editing Cleanup your HTML

{{review}}
{{TipImported
|id=18
|previous=17
|next=19
|created=2001
|complexity=advanced
|author=scrott
|version=6.0
|rating=50/29
|category1=HTML
|category2=
}}
If you are working with HTML, you can use Vim to clean up the formating of the HTML code. This tips show how to do it.

==Using tidy for cleaning up your code==
You need to install [http://tidy.sourceforge.net/ html tidy] on your system first. Tidy is a tool to fix invalid HTML content and improve the layout of the resulting markup. There is also [http://sourceforge.net/projects/jtidy/ Jtidy], a Java implementation of Tidy available. This can also be used for cleaning up your HTML.

===Using tidy for html files===
When you have tidy for your platform installed and it is available from your path, you can simply set up a mapping to filter your content through it.
<pre>
:vmap ,x :!tidy -q -i --show-errors 0<CR>
</pre>
This means, from visual mode, you can simply press <code>,x</code> and Vim will filter your content through tidy. This will call tidy in quiet mode (<code>-q</code>) and instruct it to indent the lines (<code>-i</code>). Errors won't be shown (<code>--show-errors 0</code>), since the lines should not be lost.

<math>
== Insert formula here ==

== Headline text ==
</math>
Alternatively, you can also create a {{help|prefix=no|:command}} that calls tidy:
<pre>
:command Thtml :%!tidy -q -i --show-errors 0
:command Txml  :%!tidy -q -i --show-errors 0 -xml
</pre>

===Automatic formatting of XML files===
You can also use tidy to format xml files
<pre>
:au FileType xml :%!tidy -i -xml --show-errors 0 2>/dev/null
</pre>

This sets up a FileType autocommand, that will clean up your source using tidy, whenever Vim set's the Filetype to xml.

===Using built-in commands===
Using Vim's {{help|prefix=no|'equalprg'}} option, you can use the {{help|prefix=no|id==}} operator to reformat using HTMLTidy. Or, you can use the {{help|prefix=no|'makeprg'}} option to just show the suggestions from HTMLTidy in your {{help|prefix=no|quickfix}} list.

<pre>
:setlocal equalprg=tidy\ -quiet\ --show-errors\ 0
:setlocal  makeprg=tidy\ -quiet\ -e\ %
</pre>

At this point you can use <code>make</code> to clean up the full file or you can use <code>=</code> to clean up sections. Vim also ships with a tidy compiler plugin, that set's the {{help|prefix=no|'makeprg'}} automatically for you and also sets the {{help|prefix=no|'errorformat'}} setting for you. To make this work, simply type: <code>:compiler tidy</code>

===Setting up tidy using a filetype plugin===
All those options, mappings and commands can be set up automatically for html/xml files automatically, if you use filetype plugins.

To make this work, simply put your settings into a file called html.vim (use xml.vim for the xml filetype and don't forget the -xml switch for tidy) and place it into the directory ~/.vim/ftplugin/ (Unix) or $VIM/vimfiles/ftplugin (windows, where $VIM is the installtion diretory of Vim). See also {{help|prefix=no|filetype-plugin}}

If you set up commands and mappings using filetype plugins, you should make those buffer-local (e.g. only available for buffers of that filetype. Use the {{help|prefix=no|<buffer>}} argument for mappings and the <code>-buffer</code> argument for commands ({{help|prefix=no|command-buffer}}).

==References==
*{{help|id==}}
*{{help|'equalprg'}}
*{{help|'makeprg'}}
*{{help|'errorformat'}}

==Comments==
If you are using tidy under Windows, you need to set your <code>shellpipe=2></code> or else Vim won't see the output from tidy. Apparently these Unix tools write output to stderr instead of stdout and Vim isn't configured by default to handle this situation.
----
vim indents html very well when I put the line
 filetype plugin indent on

into my personal ~/.vimrc (or ~\_vimrc) file. I also think that html-tidy is not able to indent only parts of a HTML file. Therefore, I do not use it as equalprg.

I use html-tidy only in order to check if my HTML document is well formed. Therefore, I create a ~/.vim/after/ftplugin/html.vim (or ~\vimfiles\after\ftplugin\html.vim or an html.vim placed in the directory that appears last when typing :set runtimepath?) and put into it (among other things) the lines:

 setlocal makeprg=tidy\ -quiet\ -errors\ %
 setlocal errorformat=line\ %l\ column\ %v\ -\ %m

I have found that the errorformat option must be adapted as shown in order to be able jump through the error list by means of :cn and :cp etc.

----
Tidy can be used for just a portion of the document by using the --show-body-only flag. For instance, on using vim6 on OSX the above command could be rewritten as:

 :exe 'setlocal equalprg=tidy\ -quiet\ -i\ --show-body-only\ true\ -f\ '.&errorfile

the -i indents, that is optional

The rest of the tidy options can be found here:
http://tidy.sourceforge.net/docs/quickref.html

----
Call a function for tidy - add to your vimrc
<pre>
command Td :call Tidy()
function Tidy()
  let filename=expand("%:p") " escapes for bash
  let filename=substitute(filename, " ", "\\\\ ", "g")
  let filename=substitute(filename, "(", "\\\\(", "g")
  let filename=substitute(filename, ")", "\\\\)", "g")
  let filename=substitute(filename, "[", "\\\\[", "g")
  let filename=substitute(filename, "]", "\\\\]", "g")
  let filename=substitute(filename, "&", "\\\\&", "g")
  let filename=substitute(filename, "!", "\\\\!", "g")
  let filename=substitute(filename, ",", "\\\\,", "g")
  let filename=substitute(filename, "'", "?", "g")
  let filename2=substitute(filename, ".*", "&.tidy.htm", "")
  let filename3=substitute(filename, ".*", "&.errors.tidy.txt", "")
  execute "!tidy "."-f ".filename3." ".filename." > ".filename2.""
endfunction
</pre>

----
Here is a mapping so Vim calls Tidy when pressing F12. Advantage of this solution: you can undo changes very easily. Put this in your vimrc:
<pre>
map <F12> :%!tidy -q --tidy-mark 0 2>/dev/null<CR>
</pre>

----
I use this:
<pre>
command Txml set ft=xml | execute "%!tidy -q -i -xml"
command Thtml set ft=html | execute "%!tidy -q -i -html"
</pre>
You can undo the formatting, but the ft change won't be undone.
----