html-parsingjs-beautify

JavaScript/HTML beautifier - remove newlines around `html` tags

I'm using js-beautify to beautify my HTML like this:

import { html_beautify } from 'js-beautify';

// later in the component
html_beautify(localHtmlContent, {indent_size: 2});

which makes my html go from this:

<!Doctype html>
<html>
  <body>
    <div>
      <h1>Title</h1>
      <p>Paragraph</p>
    </div>
  </body>
</html>

to this:

<!Doctype html>
<html>

  <body>
    <div>
      <h1>Title</h1>
      <p>Paragraph</p>
    </div>
  </body>

</html>

and I don't want the newlines between <html> and before </html>...

How do I achieve this?

I tried removing the newlines myself, but I think there "must" be a way to remove this with some parameter...

Solution

  • Found his handy extra_liners param in the docs:

    -E, --extra_liners List of tags (defaults to [head,body,/html] that should have an extra newline before them.

    so I got to have the extra newlines removed by setting extra_liners: [], like this:

    npm i js-beautify  
npm i @types/js-beautify
 
import { html_beautify } from 'js-beautify';
 
// later in the component - (localHtmlContent is my piece of state that keeps the html)
<button {...props}
  onClick={() =>
    setLocalHtmlContent(
      html_beautify(localHtmlContent, {
        indent_size: 2,
        indent_inner_html: true,
        extra_liners: [],
      }),
    )
  }
/>