How can I easily retab html files according to some sane default?

Question

I have some html files that I'd like to retab that look like this:

<header>
    <div class="wrapper">
                    <img src="images/logo.png">
                    <div class="userbox">
                            <div class="welcome">Welcome Andy!</div>
                            <div class="blackbox">
                                    <ul>
                                            <li><a href="#">Invite Friends</a></li>
                                            <li><a href="#">My Account</a></li>
                                            <li><a href="#">Cart</a></li>
                                            <li><a href="#">Sign Out</a></li>
                                    </ul>
                            </div>
                    </div>
            </div>
</header>

And I want them to look something like this:

<header>
  <div class="wrapper">
    <img src="images/logo.png">
    <div class="userbox">
      <div class="welcome">Welcome Andy!</div>
        <div class="blackbox">
          <ul>
            <li><a href="#">Invite Friends</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Cart</a></li>
            <li><a href="#">Sign Out</a></li>
          </ul>
        </div>
    </div>
  </div>
</header>

Or some sane default. What's the easiest way to go about doing this from the terminal in ubuntu for all of the html files in the current directory?

Solution 1

In vim:

:set softtabstop=0
:set expandtab
:set smarttab
:set shiftwidth=2
gg=G
:retab

EDIT: Explainations:

• lines 1-3: sane default
• line 4: indent with 2 spaces
• line 5:
  • gg: top line
  • =: indent until...
  • G: ...end
• line 6: insure that all tabs are converted to spaces

Solution 2

I used Stéphane Chazelas' solution for reindenting a file with sed along with dogbane's solution on how to repeat a string 'n' times to compose this invocation that will change the indentation of a file that uses spaces for indentation:

# Repeat a string "n" times e.g. repeatstr abc 3
#
# Solution from: https://stackoverflow.com/a/5349842/
repeatstr() {
  printf "%.0s$1" $(seq 1 $2)
}

# Reindent file that uses spaces
#   e.g. reindent 2 4 index.html
#   e.g. cat index.html | reindent 2 4
#
# Solution from: https://unix.stackexchange.com/a/47210/
reindent() {
  if [[ $# -gt 2 ]]; then
    f=$(mktemp)
    cat $3 | reindent $1 $2 > $f && mv $f $3
  else
    sed "h;s/[^ ].*//;s/$(repeatstr ' ' $1)/$(repeatstr ' ' $2)/g;G;s/\n *//"
  fi
}

Add these functions to your .bashrc or .zshrc, and then just run:

reindent 4 2 index.html

If the indentation is imperfect to begin with, I would first run the file through a "pretty print" formatting utility such as tidy for HTML or jq for JSON.

Solution 3

sudo apt-get install tidy
cd whatever_dir_you_want
find . -name '*.html' -exec tidy -m {} \;

Note: this probably wont play nice with inline-php. Play around with tidy (without the -m argument) to see how it works.

Comments

[psusi]

You probably should mention that those are vi commands.

[shellholic]

Indeed, I should, (the question appeared in my 'vim' category)