73

When editing HTML in emacs, is there a way to automatically pretty-format a blob of markup, changing something like this:

  <table>
  <tr>
<td>blah</td></tr></table>

...into this:

<table>
 <tr>
  <td>
   blah
  </td>
 </tr>
</table>
1
  • 1
    This is a lot easier in newer versions of emacs. This is a scroll-down situation. Sep 21, 2016 at 17:16

10 Answers 10

113

You can do sgml-pretty-print and then indent-for-tab on the same region/buffer, provided you are in html-mode or nxml-mode.

sgml-pretty-print adds new lines to proper places and indent-for-tab adds nice indentation. Together they lead to properly formatted html/xml.

3
  • 5
    Great answer. Just remember to temporarily switch to sgml-mode to run sgml-pretty-print. Then go back to nxml-mode. Jan 21, 2012 at 22:35
  • 5
    sgml-pretty-print worked for me from HTML wode without any mode switching, thanks!
    – dolzenko
    Dec 20, 2013 at 10:23
  • 1
    The only answer that really works. I mean even on invalid XML (i.e. just a part of HTML file). Nov 11, 2015 at 11:47
30

By default, when you visit a .html file in Emacs (22 or 23), it will put you in html-mode. That is probably not what you want. You probably want nxml-mode, which is seriously fancy. nxml-mode seems to only come with Emacs 23, although you can download it for earlier versions of emacs from the nXML web site. There is also a Debian and Ubuntu package named nxml-mode. You can enter nxml-mode with:

M-x nxml-mode

You can view nxml mode documentation with:

C-h i g (nxml-mode) RET

All that being said, you will probably have to use something like Tidy to re-format your xhtml example. nxml-mode will get you from

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head></head>
<body>
<table>
  <tr>
<td>blah</td></tr></table>
</body>

to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head></head>
  <body>
    <table>
      <tr>
    <td>blah</td></tr></table>
</body>
</html>

but I don't see a more general facility to do line breaks on certain xml tags as you want. Note that C-j will insert a new line with proper indentation, so you may be able to do a quick macro or hack up a defun that will do your tables.

2
  • 12
    After I enter nxml-mode, I use C-x h to select the whole region, then M-x 'indent-region'. You will get correctly indented HTML. Thanks to nxml-mode!
    – zhanxw
    Feb 23, 2013 at 18:00
  • 2
    nxml-mode doesn't indent properly for html fragments, probably because they don't have a doctype. html-mode works fine once you get the line breaks in as suggested by @nevcx below
    – boatcoder
    Dec 14, 2013 at 19:43
14

http://www.delorie.com/gnu/docs/emacs/emacs_277.html

After selecting the region you want to fix. (To select the whole buffer use C-x h)

C-M-q

Reindent all the lines within one parenthetical grouping(indent-sexp).

C-M-\

Reindent all lines in the region (indent-region).

3
  • 4
    That doesn't work for me -- on the example above, C-M-q does nothing, and C-M-\ gives a completely incorrect indenting.
    – raldi
    Sep 26, 2008 at 1:06
  • Also doesn't work for me in nxml mode. index-sexp and indent-region will indent code that already has line breaks, this example is missing a few. Sep 26, 2008 at 3:30
  • 1
    C-X h <ESC> x indent-region Jul 28, 2016 at 1:42
10

i wrote a function myself to do this for xml, which works well in nxml-mode. should work pretty well for html as well:

(defun jta-reformat-xml ()
  "Reformats xml to make it readable (respects current selection)."
  (interactive)
  (save-excursion
    (let ((beg (point-min))
          (end (point-max)))
      (if (and mark-active transient-mark-mode)
          (progn
            (setq beg (min (point) (mark)))
            (setq end (max (point) (mark))))
        (widen))
      (setq end (copy-marker end t))
      (goto-char beg)
      (while (re-search-forward ">\\s-*<" end t)
        (replace-match ">\n<" t t))
      (goto-char beg)
      (indent-region beg end nil))))
3
  • Thanks. I've been wanting this for years! Dec 30, 2012 at 18:54
  • This is actually the simplest and best solution. I'm going to use this often! Thank you!!! Sep 3, 2015 at 13:18
  • works for me. feels like the least complex solution too. ta very muchly
    – cammil
    Mar 25, 2016 at 9:40
9

In emacs 25, which I'm currently building from source, assuming you are in HTML mode, use
Ctrl-x
h

to select all, and then press Tab.

0
8

You can do a replace regexp

 M-x replace-regexp

 \(</[^>]+>\)

 \1C-q-j

Indent the whole buffer

 C-x h
 M-x indent-region
0
8

This question is quite old, but I wasn't really happy with the various answers. A simple way to re-indent an HTML file, given that you are running a relatively newer version of emacs (I am running 24.4.1) is to:

  • open the file in emacs
  • mark the entire file with C-x h (note: if you would like to see what is being marked, add (setq transient-mark-mode t) to your .emacs file)
  • execute M-x indent-region

What's nice about this method is that it does not require any plugins (Conway's suggestion), it does not require a replace regexp (nevcx's suggestion), nor does it require switching modes (jfm3's suggestion). Jay's suggestion is in the right direction — in general, executing C-M-q will indent according to a mode's rules — for example, C-M-q works, in my experience, in js-mode and in several other modes. But neither html-mode nor nxml-mode do not seem to implement C-M-q.

3
  • 1
    Great answer. Two lines. Done all the job perfectly!
    – Tony
    Jan 6, 2015 at 16:26
  • Follow up question, your solution won't indent the javascript in the html. Do you have any easy and fast solution for that? Thanks.
    – Tony
    Jan 6, 2015 at 16:30
  • This works if the line breaks are already in the right places. sgml-pretty-print helps with that (but in my view, still not making the best choices).
    – pnj
    Jan 27, 2015 at 13:51
6

Tidy can do what you want, but only for whole buffer it seems (and the result is XHTML)

M-x tidy-buffer
4

You can pipe a region to xmllint (if you have it) using:

M-|
Shell command on region: xmllint --format -

The result will end up in a new buffer.

I do this with XML, and it works, though I believe xmllint needs certain other options to work with HTML or other not-perfect XML. nxml-mode will tell you if you have a well-formed document.

2
  • And with a prefix argument, shell-command-on-region replaces the original region with the shell command's output. i.e.: C-u M-|
    – phils
    Sep 15, 2011 at 23:15
  • Thanks, phils, I knew that feature was there, but couldn't remember how to invoke it!
    – Geoff
    Sep 19, 2011 at 21:06
1

The easiest way to do it is via command line.

  • Make sure you have tidy installed
  • type tidy -i -m <<file_name>>

Note that -m option replaces the newly tidied file with the old one. If you don't want that, you can type tidy -i -o <<tidied_file_name>> <<untidied_file_name>>

The -i is for indentation. Alternatively, you can create a .tidyrc file that has settings such as

indent: auto
indent-spaces: 2
wrap: 72
markup: yes
output-xml: no
input-xml: no
show-warnings: yes
numeric-entities: yes
quote-marks: yes
quote-nbsp: yes
quote-ampersand: no
break-before-br: no
uppercase-tags: no
uppercase-attributes: no

This way all you have to do is type tidy -o <<tidied_file_name>> <<untidied_file_name>>.

For more just type man tidy on the command line.

1
  • Afaiu, this is called from the shell. I think he wants a solution within emacs. Oct 20, 2012 at 0:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.