Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
diffable-html
Advanced tools
Opinionated HTML formatter focused towards making HTML diffs readable.
The diffable-html npm package is designed to help developers compare and visualize differences between HTML documents. It is particularly useful for testing and debugging purposes, allowing users to see what has changed between two versions of an HTML document.
HTML Comparison
This feature allows you to compare two HTML strings and get a diff representation of the changes. The code sample demonstrates how to use the diffable-html package to compare two HTML documents and output the differences.
const diffableHtml = require('diffable-html');
const html1 = '<div><p>Hello World</p></div>';
const html2 = '<div><p>Hello Universe</p></div>';
const diff = diffableHtml(html1, html2);
console.log(diff);
Customizing Diff Output
This feature allows you to customize the output of the diff by passing options. The code sample shows how to enable wrapping of the diff output by passing an options object.
const diffableHtml = require('diffable-html');
const html1 = '<div><p>Hello World</p></div>';
const html2 = '<div><p>Hello Universe</p></div>';
const options = { wrap: true };
const diff = diffableHtml(html1, html2, options);
console.log(diff);
The html-differ package provides similar functionality for comparing HTML documents. It offers a more flexible API for customizing the comparison process and supports various output formats. Compared to diffable-html, html-differ may offer more advanced customization options.
The diff package is a general-purpose text comparison library that can be used to compare HTML documents as well. While it is not specifically designed for HTML, it provides a robust set of tools for comparing and visualizing differences in text, including HTML. It is more versatile but may require additional setup for HTML-specific use cases.
The jsdiff package is another general-purpose text comparison library that can be used for HTML. It provides a variety of diff algorithms and output formats, making it a powerful tool for comparing HTML documents. Like diff, it is not specifically tailored for HTML but is highly flexible and widely used.
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:
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.
Add the package as a dev-dependency:
# With npm
npm install --save-dev diffable-html
# With yarn
yarn add --dev diffable-html
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>
This formatter was initially developed to address the lack of some features in js-beautifier:
These features are needed to improve readability of HTML diffs.
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.
FAQs
Opinionated HTML formatter focused towards making HTML diffs readable.
We found that diffable-html demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.