This show various styles for our diff action. Style sheet: resources/src/mediawiki/mediawiki.diff.styles.css.

This file might help us fix our diff colors which have been a recurring issues among the community for a loooong time.

Try it out in print mode, too. Style sheet: resources/src/mediawiki/mediawiki.diff.styles.print.css.

Practical example copied from MediaWiki's HTML output:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
   
 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Excepteur sint occaecat cupidatat non proident, sunt reprehenderit in voluptate in culpa qui officia deserunt mollit anim.
  +
  +
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Below are some basic lines being applied one or two classes. Mainly for debugging purposes.

Diff
diff-addedline: added line
diff-deletedline: deleted line
diff-context: context
Same as above with a <ins> or <del> child element having the diffchange class:
Diffchange
Added line + diffchange
Deleted line + diffchange

Here an example for the diff output when a whole paragraph was moved:

   
Lorem ipsum alias non veritatis porro quidem harum ut et at ab sit atque soluta deleniti architecto ut pariatur? Non consequat. Aut minus occaecat quas lorem impedit, earum praesentium enim reprehenderit, anim consequat. Et maiores consequatur incidunt, nostrud non consectetur, ut eiusmod mollit anim eum vitae qui obcaecati molestiae nostrud dolore hic aperiam commodo nihil omnis aliquam irure expedita minima ut fugiat, error odi.
 
   
 
Lorem ipsum sunt ducimus, quos aut quia a nulla molestiae doloremque dolorem inventore vel officia temporibus at ut iste totam officiis impedit, quaerat voluptate fugiat esse est sit, assumenda quis quaerat provident, laborum molestiae esse, quam qui cillum velit, mollit veniam, consequuntur esse, dolorem do amet, maiores ad dolores dolor duis aut amet, adipisicing est.
 
Lorem ipsum sunt ducimus, quos aut quia a nulla molestiae doloremque dolorem inventore vel officia temporibus at ut iste totam officiis impedit, quaerat voluptate fugiat esse est sit, assumenda quis quaerat provident, laborum molestiae esse, quam qui cillum velit, mollit veniam, consequuntur esse, dolorem do amet, maiores ad dolores dolor duis aut amet, adipisicing est.
  +
 
Lorem ipsum alias non veritatis porro quidem harum ut et at ab sit atque soluta deleniti architecto ut pariatur? Non consequat. Aut minus occaecat quas lorem impedit, earum praesentium enim reprehenderit, anim consequat. Et maiores consequatur incidunt, nostrud non consectetur, ut eiusmod mollit anim eum vitae qui obcaecati molestiae nostrud dolore hic aperiam commodo nihil omnis aliquam irure expedita minima ut fugiat, error odi.