I have been working on implementing text differencing in JavaScript using a specific code, and so far, it has been working well.
Recently, I attempted to enhance the display by adding a text-decoration that would show a line over incorrect parts of the sentence. I wanted something like this: https://i.sstatic.net/BZPZd.png
However, I encountered an issue where the text-decoration: line-through; in CSS did not function as expected.
Below is the CSS code section where I tried to insert the text-decoration:
Despite being able to modify text and background colors, the text-decoration feature does not seem to work!
del: Identifies incorrect parts in red
ins: Identifies correct parts in green
del {
text-decoration: line-through !important;
color: #b30000;
background: #fadad7;
}
ins {
background: #eaf2c2;
color: #406619;
text-decoration: none;
}
If you are interested in reviewing the JavaScript library, feel free to ask. Here are the specific sections that contain ins and del:
convertChangesToXML: function (changes) {
var ret = [];
for (var i = 0; i < changes.length; i++) {
var change = changes[i];
if (change.added) {
ret.push("<ins class='diff'>");
} else if (change.removed) {
ret.push("<del class='diff'>");
}
ret.push(escapeHTML(change.value));
if (change.added) {
ret.push('</ins>');
} else if (change.removed) {
ret.push('</del>');
}
}
return ret.join('');
},