Diff2html diff not loading

Question

I am using diff2html to show the diffs in a git PR in an HTML page. I have added the necessary scripts and is calling the object like this

<script type="text/javascript">
    var diffHtml = Diff2Html.getPrettyHtml(
        'https://github.com/rtfpessoa/diff2html/pull/106',
            {
                inputFormat: 'diff', 
                showFiles: true, 
                matching: 'lines', 
                outputFormat: 'side-by-side'
            }
        );
        document.getElementById("diff-container").innerHTML = diffHtml;
</script>

Now this is showing Files changed (0). The URL I have given is the one given in the demo section of their website and have diff. I am doing this correctly ? Or how can I fetch from a the URL ?

funnydman · Answer 1 · 2019-12-19T09:55:19.150

0

Actually getPrettyHtml accepts a diff string, not the link itself. There is no way to handle diff calculations with diff2html itself, this library only prettifies it. You can easily retrieve diff with this GitHub tip:

Add .patch or .diff to the end of URLs for Git’s plaintext views.

To retrieve the data via URL you could take a look at this answer.

edited Dec 19 '19 at 09:55

answered Dec 19 '19 at 09:33

funnydman

9,083
4
40
55

Is there any function to load the diff from URL ? – Happy Coder Dec 19 '19 at 09:36
@HappyCoder I've added more information. Feel free to ask. – funnydman Dec 19 '19 at 10:03
Thanks. Now I am trying to pull the `diff` using AJAX, but it is blocked by `CORS` policy. Is there anyway to get around this ? – Happy Coder Dec 19 '19 at 10:20
@HappyCoder take a look at this discussion: https://gist.github.com/jesperorb/6ca596217c8dfba237744966c2b5ab1e – funnydman Dec 19 '19 at 10:54

score 0 · Answer 2 · answered Aug 24 '21 at 12:17

A bit irrelevant but one can use xdiff (PECL package) in PHP in order to produce unified model (ie. difference between string or file that is what the library likes) and supply that output to the Diff2HtmlUI to produce the nice Gitlab/Github diff based UI/UX.

That is how I did and its fantastically works:

Step 1: $string1 = 'contains from file-1/string1';
Step 2: $string2 = 'contains from file-2/string2';
Step 3: $getUnifiedDiff = xdiff_string_diff($string1, $string2);
Step 4: Initialise the configuration (as you've done above) and follow through 
var diff2htmlUi = new Diff2HtmlUI(targetElement, $getUnifiedDiff, configuration);
diff2htmlUi.draw();
diff2htmlUi.highlightCode();

~ All the best

Diff2html diff not loading

2 Answers2