How can this be integrated to diff2html?

[UnderNotic]

Is there a way to place the output from jsdiff to diff2html?

[rolshevsky]

@UnderNotic sure, you can do it in the following way:

var diff = JsDiff.createPatch('fileName', 'oldString', 'newString', 'oldHeader', 'newHeader');
var diff2htmlUi = new Diff2HtmlUI({ diff: diff });

diff2htmlUi.draw('#line-by-line', {inputFormat: 'diff', showFiles: true, matching: 'lines'});
diff2htmlUi.fileListCloseable('#line-by-line', false);

[fracasula]

@UnderNotic here's another way, very similar to the above:

import {createPatch} from 'diff';
import {Diff2Html} from 'diff2html';
import 'diff2html/dist/diff2html.min.css';

const input = createPatch('diff', this.textA, this.textB);

document.getElementById('textDiff').innerHTML = Diff2Html.getPrettyHtml(
    input,
    {
        inputFormat: 'diff',
        matching: 'lines'
    }
);

[PabodhaWimalasuriya123]

@kpdecker

hi, I need a small help from you.

I am using jsdiff to generate unified different string between two strings. Then using diff2html to generate the html.

var unifiedDiff = Diff.createPatch("", beforeChange, afterChange, "", "");
var diffHtml = Diff2Html.getPrettyHtml(unifiedDiff, { inputFormat: 'diff', matching: 'lines', outputFormat: 'side-by-side' })

My problem is, how can I get rid of compressed lines highlighted with a red arrow ? (And show available data lines on those compressed lines ?).

Is there any option to disable this behavior ?

Thank You.

[ISNIT0]

I ended up getting what I needed without diff2html by doing this:

const style = {
    added: 'background-color: rgb(204, 232, 204);color: rgb(0, 55, 0);',
    removed: 'background-color: rgb(232, 204, 204);color: rgb(55, 0, 0);text-decoration:line-through;',
};
const diff = Diff.diffSentences(oldText, currentText);
const html = [];
for (const sentence of diff) {
    if (sentence.added) {
        html.push(`<span style='${style.added}'>${sentence.value.replace(/\n/g, '<br />')}</span>`);
    } else if (sentence.removed) {
        html.push(`<span style='${style.removed}'>${sentence.value.replace(/\n/g, '<br />')}</span>`);
    }
}
const outHTML = html.join('<br />');

Outputs something like this: