or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

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
npmpkg:npm/pretty@2.0.x

To install, run

npx @tessl/cli install tessl/npm-pretty@2.0.0

index.mddocs/

Pretty

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.

Package Information

  • Package Name: pretty
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install pretty

Core Imports

const pretty = require('pretty');

For ES modules (via Node.js interop):

import pretty from 'pretty';

Basic Usage

const pretty = require('pretty');

const htmlString = '<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home</title> </head> <body> This is content. </body> </html>';

// Basic formatting
const formatted = pretty(htmlString);

// With OCD mode for additional cleanup
const cleanFormatted = pretty(htmlString, { ocd: true });

Capabilities

HTML Beautification

The main function that formats HTML strings with customizable options.

/**
 * Formats HTML strings using js-beautify with opinionated defaults
 * @param str - HTML string to be formatted
 * @param options - Configuration options for formatting (optional)
 * @returns Formatted HTML string
 */
function pretty(str, options);

Parameters:

  • str (string): HTML string to be formatted
  • options (object, optional): Configuration options

Options:

interface Options {
  // Standard js-beautify options
  unformatted?: string[];     // HTML elements to preserve from formatting (default: ['code', 'pre', 'em', 'strong', 'span'])
  indent_inner_html?: boolean; // Whether to indent inner HTML (default: true)
  indent_char?: string;       // Character used for indentation (default: ' ')
  indent_size?: number;       // Number of indentation characters per level (default: 2)
  
  // Pretty-specific options
  ocd?: boolean;             // Enables additional cleanup operations (default: undefined)
  newlines?: string;         // Line separator when ocd is true (completely overrides sep if provided)
  sep?: string;              // Line separator when ocd is true (default: '\n')
  
  // Any other js-beautify HTML options are also supported
}

Returns: string - Formatted HTML string

Usage Examples:

const pretty = require('pretty');

// Basic usage with default formatting
const html = '<!DOCTYPE html><html><head><title>Test</title></head><body><div>Content</div></body></html>';
const formatted = pretty(html);

// Custom indentation
const customFormatted = pretty(html, {
  indent_size: 4,
  indent_char: ' '
});

// With OCD mode for additional cleanup
const cleanFormatted = pretty(html, { 
  ocd: true 
});

// Custom elements to preserve formatting
const preserveFormatted = pretty(html, {
  unformatted: ['code', 'pre', 'script', 'style']
});

OCD Mode

When ocd: true is enabled, additional cleanup operations are performed:

  • Condenses multiple newlines to single newlines
  • Trims leading and trailing whitespace from the entire string
  • Ensures trailing newline is inserted at the end
  • Normalizes whitespace before code comments by adding space above comments
  • Brings closing comments up to the same line as closing tags
const pretty = require('pretty');

const messyHtml = `


<!DOCTYPE html>
<html>
<head>
<title>Test</title><!--comment-->
</head>
<body>


<div>Content</div>
<!-- /end -->
</body>
</html>


`;

const cleaned = pretty(messyHtml, { ocd: true });
// Results in properly spaced HTML with normalized comments and whitespace

Default Configuration

The package uses the following default options:

const defaults = {
  unformatted: ['code', 'pre', 'em', 'strong', 'span'],
  indent_inner_html: true,
  indent_char: ' ',
  indent_size: 2,
  sep: '\n'
};

These defaults preserve the formatting of common inline elements while providing clean 2-space indentation for block elements.