Improve comparison by highlighting code fragments better

[rien]

In #1583 it was mentioned that the comparison could be a bit clearer. It is not clear which highlighted parts are matched with each other. If the user clicks on a highlighted/matched fragment where the other fragment is out of the view, it scrolls to that part, but this is not obvious and bugged.

Possible improvements

• Show matched fragments that are ignored because of template code, but visualize them in a distinct manner (e.g. greyed-out?)
• Add a visible way to highlight matched fragments, for example a label or tag in the top of each fragment
• A way to iterate or scroll through the matching Fragments
• A way to show the underlying matching tokens contained within a match

In the past there has been a a collapsible sidebar with a list of all fragments, this was removed because the UI was confusing and complex. We could re-implement this with a better UI.

Related bugs/issues that could be fixed with this issue:

• Compare view shows original labels in anonymised view #1380
• Numbers are not legible in matches mode #1157

What should be changed

The code responsible for the highlighting is contained within the components in https://github.com/dodona-edu/dolos/tree/main/web/src/components/pair - specifically PairCodeMatchEditor.vue (one side of the pair) and PairCodeMatch.vue (both sides, with communication between).

The code quality in these components is not superb because it mostly comes down to convincing the Monaco Editor to show these fragments properly, and highlighting sections of code is a tricky thing.
While adding this feature, these components could be split up and cleaned up a bit.