From OpenWetWare
Jump to: navigation, search
File:WikEdDiff screenshot.png
The wikEdDiff improved diff view is shown below the standard view. Red indicates deleted text, green indicates added text.

wikEdDiff is a user script that provides an improved and often easier to read diff view for comparing article versions on Wikipedia and other MediaWiki installations. wikEdDiff has also been integrated into wikEd, the full-featured JavaScript in-browser editor. wikEdDiff is also a demo and "technology preview" for the possible integration of this diff style into the official Wikipedia software.


  • Additions and deletions are highlighted by color in one continuous text
  • Block moves are detected and indicated by color
  • Unchanged regions of the text are omitted from the output
  • Highly optimized for MediaWiki source texts


The wikEdDiff JavaScript code can be found under User:Cacycle/wikEdDiff.js. If you like the way it displays diff views, please translate the diff.js routines into PHP with the long-term goal to integrate them into the MediaWiki software. wikEdDiff is based on the Cacycle diff routines that provide the improved diff view.

The diff routines as well as the wikEdDiff program are highly user configurable, see below.


wikEdDiff displays a button below the standard diff view. After pushing this button the program fetches the versions in the background using Ajax techniques and displays an improved diff right below the button.

For users of wikEd this is automatically done without the need to push a button. This feature can be disabled from the wikEd control bar.

Changed text is indicated by colors: red indicates deleted text, green indicates added text, and all other colors indicate moved text blocks and their original position.

Supported browsers

The code should work for most modern browsers. The following browsers have been tested (please add your experiences to the list):

  • Mozilla Firefox
  • Mozilla Firefox 3.0.11
  • Mozilla SeaMonkey 1.1.1
  • Internet Explorer 7.0.5730.11
  • Internet Explorer 6.0.2900.2180
  • Epiphany (browser) 2.22.3 with Gecko 1.9 engine

Not supported:

  • Opera 9.20 (does not run, have not checked why)


Simply add the following code snippets to your User:YourUsername/monobook.js (or whatever skin used, see Wikipedia:Monobook for details) page. This installation code works for all MediaWiki installations. You need a user account and you have to be logged in in order to install and use wikEdDiff. After saving, you have to refresh (bypass) your browser's cache to see the changes: hold down Shift while clicking Reload (or press Ctrl-Shift-R).

  • Please do not copy the complete wikEdDiff program code to your page
  • Users of the in-browser editor wikEd do not need to install wikEdDiff
1. Log in under your username
2. If you are on the English Wikipedia click the following link to edit your User:YourUsername/monobook.js page: Special:Mypage/monobook.js, otherwise open the respective page by hand
3. If you are not using the default skin Monobook (see your preferences) then you have to replace monobook.js in the page name by the used skin, e.g. User:YourUsername/cologneblue.js for the Cologne Blue skin (see Wikipedia:Monobook for details)
4. Add the following code to that edit page:
 // install User:Cacycle/wikEdDiff enhanced diff view using ajax

On non-Wikipedia wikis you might have to use the old-fashioned way instead:

// install [[User:Cacycle/wikEdDiff]] enhanced diff view using ajax
document.write('<script type="text/javascript" src="'
+ ''
+ '&action=raw&ctype=text/javascript&dontcountme=s"></script>');
If there is already code on your User:YourUsername/monobook.js page, please make sure not to paste the installation code between /*...*/ tags.
5. Save the page
6. Refresh your browser's cache: hold down Shift while clicking Reload (or press Ctrl-Shift-R)
7. The wikEdDiff button WikEdDiff.png should now be displayed below every standard diff display


The diff routines as well as the wikEdDiff program are highly user configurable. All user configurable settings are listed at the beginning of the code pages diff.js and wikEdDiff.js.

The following wikEdDiff variables can be set on your monobook.js page before loading wikEdDiff.js (see Cacycle diff for more options):

diff.js routines URL:

var wikEdDiffScriptSrc = '';

Allow ajax requests from local copy for testing:

var wikEdAllowLocalAjax = false;

wikEdDiff css rules:

var wikEdDiffCSS = [];
WikEdDiffInitObject(wikEdDiffCSS, {
  '.wikEdDiffWrapper':       'margin: 0 0 1em 0;',
  '.wikEdDiffButtonWrapper': 'text-align: center;',
  '.wikEdDiffButton':        'padding: 0; margin: 0.2em 0 0.33em 0;',
  '.wikEdDiffDiv':           'background: #faf8f6; padding: 0.5em; border: 1px solid; border-color: #808080;'

Use local copies of images for testing (set to true in local copy of edit page):

 var wikEdUseLocalImages = false;

Path to local images for testing:

var wikEdImagePathLocal = 'file:///D:/wikEd/images/';

Path to images:

var wikEdImagePath = '';

Image filenames:

var wikEdImage = [];
WikEdDiffInitImage(wikEdImage, {
  'wikEdDiff': 'c/c6/WikEdDiff.png'

User readable texts:

var wikEdText = [];
WikEdDiffInitObject(wikEdText, {
  'wikEdDiffButtonImg alt':'wikEdDiff',
  'wikEdDiffButton title': 'Show improved diff view',
  'wikEdDiffLoading':      '...'

Show complete unshortened article text for local diff:

var wikEdFullDiff = false;

See also

  • wikEd, a full-featured MediaWiki-integrated text editor that adds enhanced text processing functions to edit pages. wikEd provides syntax highlighting, search and replace functions, and on-page previews. wikEdDiff has been integrated into this program and diff views are automatically generated without the need to push a button, a feature can be disabled from the wikEd control bar.
  • Cacycle diff, the diff routines used for wikEdDiff