htmlfy
v0.5.0
Published
HTML formatter yo!. Prettify, minify, and more!
Downloads
545,577
Maintainers
Readme
htmlfy
HTML formatter yo! Prettify, minify and more!
htmlfy
is a fork of html-formatter. Most of the processing logic has been preserved, and full credit for that goes to the original author. I've made the following major enhancements.
- Fully typed.
- Converted to ESM.
- Added configuration options.
- Refactored the code, including naming changes.
Install
npm install htmlfy
API
Most projects will only need to use prettify
and/or minify
.
Prettify
Turn single-line or ugly HTML into highly formatted HTML. This is a wrapper for all other functions, except trimify
, and then it adds indentation.
import { prettify } from 'htmlfy'
const html = `<main class="hello there world"><div>Welcome to htmlfy! </div></main>`
console.log(prettify(html))
/*
<main class="hello there world">
<div>
Welcome to htmlfy!
</div>
</main>
*/
Minify
Turn well-formatted or ugly HTML into a single line of HTML.
This feature is not a replacement for compressors like htmlnano, which focus on giving you the smallest data-size possible; but rather, it simply removes tabs, returns, and redundant whitespace.
import { minify } from 'htmlfy'
const html =
`<main class="hello there world">
<div>
Welcome to htmlfy!
</div>
</main>`
console.log(minify(html))
/*
<main class="hello there world"><div>Welcome to htmlfy!</div></main>
*/
Closify
This is done when using prettify, but you can use it in a one-off scenario if needed.
Ensure void elements are "self-closing".
import { closify } from 'htmlfy'
const html = `<br><input type="text">`
console.log(closify(html))
/*
<br /><input type="text" />
*/
Entify
This is done when using prettify, but you can use it in a one-off scenario if needed.
Enforce entity characters for textarea content. This also performs basic minification on textareas before setting entities. When running this function as a standalone, you'll likely want to pass minify
as true
for full minification of the textarea. The minification does not process any other tags.
import { entify } from 'htmlfy'
const html = `<main class="hello there world"><div>Welcome to htmlfy! </div></main><textarea >
Did you know that 3 > 2?
This is another paragraph.
</textarea><textarea class=" more stuff "> </textarea>`
console.log(entify(html, true))
/*
<main class="hello there world"><div>Welcome to htmlfy! </div></main><textarea>Did you know that 3 > 2? This is another paragraph.</textarea><textarea class="more stuff"></textarea>
*/
Trimify
Trim leading and trailing whitespace for whatever HTML element(s) you'd like. This is a standalone function, which is not run with prettify
by default.
import { trimify } from 'htmlfy'
const html = `<div>
Hello World
</div>`
console.log(trimify(html, [ 'div' ]))
/* <div>Hello World</div> */
Default Import
If needed, you can use a default import for htmlfy
.
import * as htmlfy from 'htmlfy'
console.log(htmlfy.prettify('<main><div>Hello World</div></main'))
Common JS Import
Although meant to be an ESM module, you can import using require
.
const { prettify } = require('htmlfy')
Configuration
These configuration options can only be passed to prettify
.
Default config:
{
ignore: {},
strict: false,
tab_size: 2
}
Ignore
Tell htmlfy to not process some elements and leave them as-is.
import { prettify } from 'htmlfy'
const html = `
<main><div>Hello World</div></main>
<style>
body {
width: 100
}
</style>`
console.log(prettify(html, { ignore: [ 'style' ] }))
/*
<main>
<div>
Hello World
</div>
</main>
<style>
body {
width: 100;
}
</style>
*/
Strict
If set to true
, removes comments and ensures void elements are not self-closing.
import { prettify } from 'htmlfy'
const html = `<main><br /><div><!-- Hello World --></div></main>`
console.log(prettify(html, { strict: true }))
/*
<main>
<br>
<div></div>
</main>
*/
Tab Size
Determines the number of spaces, per tab, for indentation.
import { prettify } from 'htmlfy'
const html = `<main class="hello there world"><div>Welcome to htmlfy! </div></main>`
console.log(prettify(html, { tab_size: 4 }))
/*
<main class="hello there world">
<div>
Welcome to htmlfy!
</div>
</main>
*/
Trim
Trim leading and trailing whitespace from textarea
elements, since all whitespace is preserved by default.
import { prettify } from 'htmlfy'
const html = '<textarea> Hello World </textarea>'
console.log(prettify(html, { trim: [ 'textarea' ]}))
/*<textarea>Hello World</textarea>*/
For compatibility and possible future expansion, we require declaring an array with the value 'textarea', as opposed to using something like
{ trim: true }
. Passing in additional HTML element values has no effect, since we already trim whitespace for all other elements.