search

arnab / jQuery.PrettyTextDiff

A wrapper around Google's diff_match_patch library, to make life easy
MIT License
269 stars 55 forks source link

Highlight entire line if a change is detected #10

Closed mgibbs189 closed 9 years ago

mgibbs189 commented 9 years ago

@arnab great work, PrettyTextDiff is awesome!

I was wondering if it's possible to shade an entire line if a change is detected on the line:

Notice how the change is only visible after scrolling:

Thanks for any insight!

arnab commented 9 years ago

Hi @mgibbs189 - thanks for the kind words.

You can use jQuery's has selector to look for your diff-container containing <ins> and <del> elements and style those. An example:

$(".diff-container:has(ins)").addClass("has-diff");

Does that work?

mgibbs189 commented 9 years ago

@arnab That code snippet looks like it'd highlight the entire diff body, even if only 1 line contains changes. I'm trying to highlight only the actual lines with changes.

E.g. from the first screenshot, [active_plugins] is its own line, same goes for [blog_charset].

Maybe I'm over-thinking this, and it'd be best to just add word-wrap: break-word and call it a day :smile:

arnab commented 9 years ago

What I mean is this library will add <ins> and <del> into the changing containers. So if you have every line in a separate DOM element, you can use the presence of ins/del to detect changing lines.

Sounds like you don't though. In that case, yeah, word-wrap might be the answer. UX wise too, it'd probably be easier to scan when you don't have to scan at all.

mgibbs189 commented 9 years ago

Agreed, thanks for the feedback