JSFiddle - React, Tailwind, and code Playground

by Ganesh_Babu_469

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.3/diff2html.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/3.4.0/diff.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.3/diff2html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.3/diff2html-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>diff</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>

JavaScript

const unifiedDiff = JsDiff.createPatch("fileName", "", "a\nb\nac\d\ne\n\n\nf", "test", "test");
    const diff2htmlUi = new Diff2HtmlUI({diff: unifiedDiff});
    diff2htmlUi.draw('#app', {inputFormat: 'json', showFiles: true, matching: 'lines'});