Posnet/xkcd-substitutions

Highlight changed text so it is clear what has been changed

dzfranklin opened this issue · 1 comments

Showing the original on hover would be great.
For example with the injected css of

.xkcd-substitutions-substitution {
   background-color: yellow;
}

instead of directly replacing the text you could insert

<span class="xkcd-substitutions-substitution" title="${sanitize_attribute_val(origional_text)}">
    ${replacement_text}
</span>

where sanitize_attribute_val is something like

function sanitize_attribute_val(unsanitized){
    return unsanitized.replace(/([^A-z0-9])/g, function(symbol){
        return "&#" + symbol.charCodeAt() + ";"
    });

Would you accept a pull request?

There's an open issue #27 for changing the font. I wrote an implementation for that in pull request #48 which works similarly to what you suggested, by putting replacements in a span with a class. That means you could use something like the Stylish extension to add your own CSS and attach it to that class. If Posnet accepts my pull request, would that do what you want?