Introduction to diff2html
diff2html is a powerful tool designed for visualizing diff output in a human-friendly HTML format. It is commonly used by developers to view changes between file versions in a more readable and visually appealing manner.
Getting Started with diff2html
To use diff2html, you can install it via npm:
npm install diff2html
Basic Usage
const Diff2Html = require('diff2html').Diff2Html;
const diffString = `diff --git a/sample.txt b/sample.txt\n index 83db48b..f7353e7 100644\n--- a/sample.txt\n+++ b/sample.txt\n@@ -1 +1 @@\n-Hello\n+Hello World`;
const outputHtml = Diff2Html.html(diffString, { drawFileList: true, matching: 'lines' });
console.log(outputHtml);
API Examples
1. Convert Diff to HTML
const diffExample = `diff --git a/index.js b/index.js\n index abcdef1..1234567 100644\n--- a/index.js\n+++ b/index.js\n@@ -1,2 +1,2 @@\n-console.log('Hello');\n+console.log('Hello World');`;
const htmlOutput = Diff2Html.html(diffExample, { drawFileList: true });
console.log(htmlOutput);
2. Generate a Side-by-Side Diff View
const sideBySideHtml = Diff2Html.html(diffExample, { inputFormat: 'diff', showFiles: true, matching: 'lines', outputFormat: 'side-by-side' });
console.log(sideBySideHtml);
3. Parse Diff as JSON
const diffJson = Diff2Html.parse(diffString);
console.log(diffJson);
Practical Application Example
Let’s create a basic Express.js application to visualize diffs using diff2html:
const express = require('express');
const fs = require('fs');
const Diff2Html = require('diff2html').Diff2Html;
const app = express();
app.get('/diff', (req, res) => {
const diffString = fs.readFileSync('path/to/your/diff.patch', 'utf8');
const diffHtml = Diff2Html.html(diffString, { outputFormat: 'side-by-side' });
res.send(`<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"></head><body>${diffHtml}</body></html>`);
});
app.listen(3000, () => console.log('Server running on http://localhost:3000'));
With this setup, you can run your Express server and navigate to http://localhost:3000/diff to see your diff visualized using diff2html.
Take advantage of diff2html to make your code reviews and version comparisons more intuitive and less error-prone.
Hash: 44c16ea1db0581822d5f847953e7490afe1009e29b5d413626b5fd085e3dfee0
