1. diffable-html
Opinionated HTML formatter focused towards making HTML diffs readable.
diffable-html
Package: diffable-html
Created by: rayrutjes
Last modified: Wed, 18 Oct 2023 14:43:36 GMT
Version: 5.0.0
License: MIT
Downloads: 2,699,040
Repository: https://github.com/rayrutjes/diffable-html

Install

npm install diffable-html
yarn add diffable-html

Opinionated HTML formatter focused towards making HTML diffs readable.

NPM version
Build Status

This formatter will normalize your HTML in a way that when you diff it, you get a clear sense of what changed.

This is a "zero-config" and opinionated HTML formatter. Default rules might change in future releases in which case we will push a major release.

Feel free to open issues to discuss better defaults.

Formatting consists of:

  • indenting every level with 2 spaces
  • align attributes
  • put every opening and closing tag on its own line
  • trimming text nodes

Be aware that this plugin is intended for making HTML diffs more readable.
We took the compromise of not dealing with white-spaces like the browsers do.

Install

Add the package as a dev-dependency:

 # With npm
npm install --save-dev diffable-html

# With yarn
yarn add --dev diffable-html

Example

 import toDiffableHtml from 'diffable-html';

const html = `
<div id="header">
  <h1>Hello World!</h1>
  <ul id="main-list" class="list"><li><a href="#">My HTML</a></li></ul>
</div>
`

console.log(toDiffableHtml(html));

Will output:

 <div id="header">
  <h1>
    Hello World!
  </h1>
  <ul
    id="main-list"
    class="list"
  >
    <li>
      <a href="#">
        My HTML
      </a>
    </li>
  </ul>
</div>

Yet another HTML formatting plugin?

This formatter was initially developed to address the lack of some features in js-beautifier:

  • Put the inner content of each tag on its own line (beautify-web/js-beautify#980)
  • Put closing bracket on its own line (beautify-web/js-beautify#937)
  • Indent every text node

These features are needed to improve readability of HTML diffs.

Usage with Jest

Development of this plugin was motivated by making testing of Vue.js components easier
by the use of Jest with snapshot tests.

You can find a serializer for formatting your HTML here Jest serializer.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code