28

I just realised recently how useful it would be to show diffs in posts. Mostly on programming sites, but it could be useful on language sites as well.

For Stack Overflow, Software Engineering, etc.:

In CSS you have to use the American spelling of "color":

@@@css
 .error {
-  colour: red;
+  color: red;
 }
@@@

Closely following the standard diff format (as used by Git, etc.) which might render as:

enter image description here

Or on English Language & Usage, English Language Learners, etc.:

They -was-+were+ having a good time.

Which might render as:

enter image description here

I'm not suggesting the exact markup/markdown to use, nor the display formatting (although I've changed the images slightly to use Stack Exchange's existing colours for diff additions and deletions), but rather I'm wondering if people would find the concept useful (if implemented well). Since Stack Exchange is already using these colours when viewing edit diffs, it shouldn't be a big problem for colour-blind people.

Now that I've made an edit to this post, you can click on the edited ... link to see how Stack Exchange already handles displaying diffs on the "inline" tab.

5
  • 3
    This is something that should be supported by Prettify (our syntax highlighter), but it would require including additional parsers, which increases the amount of code that has to be downloaded each time a page is loaded. That’s a big deal for a site that is as large as Stack Overflow. Commented Nov 15, 2019 at 2:55
  • @CodyGray Isn't the code cached between requests?
    – Cool Fool
    Commented Nov 15, 2019 at 2:56
  • No, the file is sent from the server to the client on every page load. With millions of hits per day, that adds up. I'm not entirely sure why there is no caching. Stack Overflow turns this off; all JS they serve comes with max-age=0. Again, I'm not sure why. You'd really need to ask a web developer, and preferably one who actually works for Stack Overflow. See also: a previous discussion about changing to a different syntax highlighter, by a former SO employee Commented Nov 15, 2019 at 6:46
  • @CodyGray On my browser at least, prettify-full.en.js is loaded from cache when I click onto a different page. markup.js is loaded each time, but as far as I can tell it's for loading ads and has nothing to do with markdown.
    – Cool Fool
    Commented Nov 16, 2019 at 1:56
  • Sounds like Stack Overflow should consider using a service worker. Commented Nov 16, 2019 at 4:13

1 Answer 1

5

You can use strikethrough tags <s> </s>, although it's inconvenient to do so for code blocks because you have to use <pre> </pre> tags instead of regular code markup, preventing the code from being highlighted at all. It also doesn't add color, but color could get annoying.

.error {
  colour: red;
  color: red;
}
2
  • That's a good workaround minus the colour for deleted text, but you can't indicate inserted or replaced text that way.
    – Cool Fool
    Commented Nov 15, 2019 at 5:26
  • 1
    @CoolFool You can use bold/italics to indicate inserted text.
    – Laurel
    Commented Nov 15, 2019 at 5:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .