Configuration to make emacs ediff perform decently

Question

In my emacs on Windows, when doing ediff-files or ediff-buffers with two HTML files share strong structural similarity, but ediff failed to find such structure similarity. But with the same two files, DiffNow.com can find the structure similarity, and highlight the minor difference.

I suspect that it might be caused by my inappropriate configuration for ediff.

Could you give me some pointers of how to configure ediff to do find more structure similarity.

Thanks a lot!

Here is the examples:

file_1.html:

<template name="image_add_form">

    <div class="modal fade" id="image_add_form">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div class="modal-title">
                    </div>
                </div>
                <div class="modal-body">
                    <form class="js-add-image">
                        <input type="text" name="img_src"/>
                        <br/>
                        <input type="text" name="img_alt"/>
                        <button class="btn btn-success">save</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-warning" data-dismiss="modal">
                        cancel
                    </button>
                </div> 
            </div>
        </div>
    </div>
</template>

file_2.html:

<template name="image_add_form">

    <div class="modal fade" id="image_add_form">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div class="modal-title">
                    </div>
                </div>
                <div class="modal-body">
                    <form class="js-add-image">
                        <input type="text" name="img_src"/>
                        <br/>
                        <input type="text" name="img_alt"/>
                        <button class="btn btn-success">save</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-warning" data-dismiss="modal">
                        cancel
                    </button>
                </div> 
            </div>
        </div>
    </div>
</template>

By human eyes, and DiffNow.com, the structure similarity is very clear.

Upon further investigation, it seems that the diff.exe from cygwin might be the cause of the trouble:

Here is the output of the diff outcome

diff file_1.html file_2.html

2,7c2,24
<
< <div class="modal fade" id="image_add_form">
<   <div class="modal-dialog">
<     <div class="modal-content">
<       <div class="modal-header">
<         <div class="modal-title">
---
>
>     <div class="modal fade" id="image_add_form">
>         <div class="modal-dialog">
>             <div class="modal-content">
>                 <div class="modal-header">
>                     <button type="button" class="close" data-dismiss="modal">&times;</button>
>                     <div class="modal-title">
>                     </div>
>                 </div>
>                 <div class="modal-body">
>                     <form class="js-add-image">
>                         <input type="text" name="img_src"/>
>                         <br/>
>                         <input type="text" name="img_alt"/>
>                         <button class="btn btn-success">save</button>
>                     </form>
>                 </div>
>                 <div class="modal-footer">
>                     <button class="btn btn-warning" data-dismiss="modal">
>                         cancel
>                     </button>
>                 </div>
>             </div>
9,20d25
<       </div>
<       <div class="modal-body">
<         <form class="js-add-image">
<           <input type="text" name="img_src"/>
<           <br/><input type="text" name="img_alt"/>
<           <button class="btn btn-success">save</button>
<         </form>
<       </div>
<       <div class="modal-footer">
<         <button class="btn btn-warning" data-dismiss="modal">cancel</button>
<       </div>
<       </div>
22,26c27
<
< </div>
<
<   </template>
<
---
> </template>

It already failed to identify the structure similarity.

Maybe, some switches to diff need to apply?

For example, with switch "-w" (ignore all space)

diff -w file_1.html file_2.html
6a7
>                     <button type="button" class="close" data-dismiss="modal">&times;</button>
13c14,15
<           <br/><input type="text" name="img_alt"/>
---
>                         <br/>
>                         <input type="text" name="img_alt"/>
18c20,22
<         <button class="btn btn-warning" data-dismiss="modal">cancel</button>
---
>                     <button class="btn btn-warning" data-dismiss="modal">
>                         cancel
>                     </button>
22d25
<
24d26
<
26d27
<

This is what I'm looking for.

Answer 1

diff is a line-based algorithm. It only ever reports that whole lines differ. In your first example, many lines have been reindented, causing them to differ. The -w flag tells it to ignore lines whose only difference is in the number of whitespace characters, which as you see lets it highlight the lines which have more significant differences. You might prefer -b instead, however, as -w will actually ignore lines where spaces have been added in the middle of words. -i will ignore case changes.

-d tells it to spend more cpu time looking for the minimal set of changes. This doesn't often change what is reported by the diff, but modern cpus are so fast that the extra time cost is usually unnoticeable. You might as well use it all the time.

-u is particularly helpful, as it presents a unified diff that is easier to read.

There is a program called wdiff which finds words which differ rather than lines, but I don't know off-hand if there are any emacs modes which use it.