tessl/npm-pretty
HTML beautification wrapper around js-beautify with opinionated defaults and OCD mode for additional formatting cleanup.
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-pretty@2.0.00
# Pretty
1
2
Pretty provides HTML beautification functionality as a wrapper around js-beautify with opinionated default settings and additional formatting options. It offers configurable indentation, preserves specific inline elements from formatting, and includes an "OCD mode" for comprehensive cleanup operations.
3
4
## Package Information
5
6
- **Package Name**: pretty
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install pretty`
10
11
## Core Imports
12
13
```javascript
14
const pretty = require('pretty');
15
```
16
17
For ES modules (via Node.js interop):
18
19
```javascript
20
import pretty from 'pretty';
21
```
22
23
## Basic Usage
24
25
```javascript
26
const pretty = require('pretty');
27
28
const htmlString = '<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home</title> </head> <body> This is content. </body> </html>';
29
30
// Basic formatting
31
const formatted = pretty(htmlString);
32
33
// With OCD mode for additional cleanup
34
const cleanFormatted = pretty(htmlString, { ocd: true });
35
```
36
37
## Capabilities
38
39
### HTML Beautification
40
41
The main function that formats HTML strings with customizable options.
42
43
```javascript { .api }
44
/**
45
* Formats HTML strings using js-beautify with opinionated defaults
46
* @param str - HTML string to be formatted
47
* @param options - Configuration options for formatting (optional)
48
* @returns Formatted HTML string
49
*/
50
function pretty(str, options);
51
```
52
53
**Parameters:**
54
55
- `str` (string): HTML string to be formatted
56
- `options` (object, optional): Configuration options
57
58
**Options:**
59
60
```javascript { .api }
61
interface Options {
62
// Standard js-beautify options
63
unformatted?: string[]; // HTML elements to preserve from formatting (default: ['code', 'pre', 'em', 'strong', 'span'])
64
indent_inner_html?: boolean; // Whether to indent inner HTML (default: true)
65
indent_char?: string; // Character used for indentation (default: ' ')
66
indent_size?: number; // Number of indentation characters per level (default: 2)
67
68
// Pretty-specific options
69
ocd?: boolean; // Enables additional cleanup operations (default: undefined)
70
newlines?: string; // Line separator when ocd is true (completely overrides sep if provided)
71
sep?: string; // Line separator when ocd is true (default: '\n')
72
73
// Any other js-beautify HTML options are also supported
74
}
75
```
76
77
**Returns:** string - Formatted HTML string
78
79
**Usage Examples:**
80
81
```javascript
82
const pretty = require('pretty');
83
84
// Basic usage with default formatting
85
const html = '<!DOCTYPE html><html><head><title>Test</title></head><body><div>Content</div></body></html>';
86
const formatted = pretty(html);
87
88
// Custom indentation
89
const customFormatted = pretty(html, {
90
indent_size: 4,
91
indent_char: ' '
92
});
93
94
// With OCD mode for additional cleanup
95
const cleanFormatted = pretty(html, {
96
ocd: true
97
});
98
99
// Custom elements to preserve formatting
100
const preserveFormatted = pretty(html, {
101
unformatted: ['code', 'pre', 'script', 'style']
102
});
103
```
104
105
### OCD Mode
106
107
When `ocd: true` is enabled, additional cleanup operations are performed:
108
109
- **Condenses multiple newlines** to single newlines
110
- **Trims leading and trailing whitespace** from the entire string
111
- **Ensures trailing newline** is inserted at the end
112
- **Normalizes whitespace before code comments** by adding space above comments
113
- **Brings closing comments** up to the same line as closing tags
114
115
```javascript
116
const pretty = require('pretty');
117
118
const messyHtml = `
119
120
121
<!DOCTYPE html>
122
<html>
123
<head>
124
<title>Test</title><!--comment-->
125
</head>
126
<body>
127
128
129
<div>Content</div>
130
<!-- /end -->
131
</body>
132
</html>
133
134
135
`;
136
137
const cleaned = pretty(messyHtml, { ocd: true });
138
// Results in properly spaced HTML with normalized comments and whitespace
139
```
140
141
## Default Configuration
142
143
The package uses the following default options:
144
145
```javascript { .api }
146
const defaults = {
147
unformatted: ['code', 'pre', 'em', 'strong', 'span'],
148
indent_inner_html: true,
149
indent_char: ' ',
150
indent_size: 2,
151
sep: '\n'
152
};
153
```
154
155
These defaults preserve the formatting of common inline elements while providing clean 2-space indentation for block elements.