Feature #4232


[ce, ee, pr, compare] redo diffs, support side by side diffs, html diffs

Added by Daniel D over 7 years ago. Updated over 7 years ago.

Target version:
Start date:
Due date:
% Done:


Estimated time:
(Total: 0.00 h)
Commit Number:


One of the most requested features is side by side diffs for multiple files at the same time (eg. pull request & compare pages).

Currently we have side by side diffs implemented for a single files only using the javascript library mergely. This doesn't include inline comments and uses different syntax highlighting to the rest of Rhodecode. Copy paste of code also works differently between the pr page and the side/side view.

There is another javascript diff library:, which gives very good results, however integrating inline comments and context loading into this proved to be a lot of trouble, also the syntax highlighting doesn't support partial code blocks very well, eg:

51 this is the end of a doc string
52 """
53    return True

will mark the return True part as a string.

Therefore the things we need in diffs are:

  • Syntax highlighting based on the entire file, rather than the partial diff
  • Inline comments + all relevant functionality
  • Ajax file context loading (eg. click to load more lines of a file before/after the changed lines)
  • In the browser conversion between raw/unified/side diffs - using JS

This will be exposed as a reusuable widget that can be used anywhere in Rhodecode, taking a diff reference as a sole argument.

The steps to create the diff are:

  1. Generate the diff chunks for each file
  2. Get the old and new versions of the files, highlight using pygments
  3. Use custom pygments renderer to generate the diff context:
    1. Using the original highlighted file lines which will have proper syntax highlighting colors
    2. Support both unified/sideside without modification
    3. Use a table that is copypaste friendly
    4. Add inline comments + functionality
    5. Expose load more file lines context functionality markers
  4. Render this in the template
  5. Apply javascript events lazily to avoid the overheads of adding events to every single element

This will also require an endpoint to get the partial N-M lines context of a file @ revision via ajax

Subtasks 3 (3 open0 closed)

Bug #4256: [ce, ee, ux] Source code highlight colors conflict with red/green inserted/deleted blocksNewDaniel D03.10.2016

Task #4288: [ce, ee] unify controllers that use diffsResolvedDaniel D19.10.2016

Task #4289: [ce, ee] clean up pygments lexer functions + handlingNewDaniel D21.10.2016


Also available in: Atom PDF