How prettify (newlines and indentation) an optimized HTML/JS file?

Question

For example, I have the following bunch of characters (HTML): http://pastebin.com/pwTPp8wd

I thought everyone stumbled it upon a processed file, especially when someone would speed up the processing of large HTML/Javascript/whatever file. Then there must be a way to automate the indentation, without applying manual. However, I couldn't find anything about force indentation on a optimized file.

Any thoughts?

You want the function equivalent of a _HTML beautifier_ in Emacs? — PythonNut, Jul 28 '15 at 16:26
A quick googling gave me this: https://github.com/yasuyk/web-beautify Do you want to try it out? The solution is not completely in emacs though. — Kaushal Modi, Jul 28 '15 at 18:35

score 21 · Accepted Answer · edited May 23 '17 at 12:38

You can use the built-in sgml-mode for this.

M-x sgml-mode - Enable the sgml-mode major mode so that sgml-pretty-print command auto-loads.
C-x h - Select the whole buffer.
M-x sgml-pretty-print

To save space, below is only a part of the formatted text that I get on doing the above on your sample text in the question:

<table border="4px" cellpadding="0" cellspacing="0" class="c31 c42">
  <tbody>
    <tr class="c4">
      <td class="c33" colspan="1" rowspan="1">
        <p class="c6">
          <span class="c12 c11">Veld
          </span>
        </p>
      </td>
      <td class="c35" colspan="1" rowspan="1">
        <p class="c7">
          <span class="c12 c11">Waarde(n)
          </span>
        </p>
      </td>
      <td class="c26" colspan="1" rowspan="1">
        <p class="c19">
          <span class="c12 c11">Null
          </span>
        </p>
      </td>
      <td class="c18" colspan="1" rowspan="1">
        <p class="c6 c38">
          <span class="c12 c11">Validatie
          </span>
        </p>
      </td>;

[Source]

Thanks for your answer, nice that this is built-in in Emacs. However, I found some minor faulty indentation, but overall, the `M-x sgml-pretty-print` is good enough. Thanks for the help. — ReneFroger, Jul 29 '15 at 07:42

score 2 · Answer 2 · edited Sep 27 '17 at 12:49

2

The default HTML mode also works.

C-x h - Select the whole buffer
M-x indent-region (aka C-M-\)

edited Sep 27 '17 at 12:49

Stefan

26,154
3
46
84

answered Sep 27 '17 at 12:28

rleir

121
2

That doesn't work if the newlines have been removed. – Robin Green Feb 29 '20 at 18:53
Agreed, that is a problem. Another thing: HTML is lax, a page with errors can often still load in a browser. I removed a and , but indent-region still worked. – rleir Mar 04 '20 at 17:01

How prettify (newlines and indentation) an optimized HTML/JS file?

2 Answers2