Home / ubuntu / Questions / 20937
Accepted
James
Asked: 2011-01-11 11:08:44 +0800 CST

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

  • 772

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?

vim

4 Answers

  1. Best Answer

    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
    • 9 
  2. 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.

    • 1

  3. 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.

    • 1

  4. Are those tabs in the first example and spaces in the next? Here's a shell script that could change tabs to two spaces. Change working directory to location of HTML files.

    #!/bin/sh
for i in *.html
do
    sed 's/\t/  /g' "${i}" > filename.notabs && mv filename.notabs "${i}"
done

    UPDATE

    I just had need to do something similar. I went strait for Komodo Edit's replace-in-files feature. It's very nice if you have GUI access to the files.

    alt text

    • 0