Fix Syntax highlight for token change in added/deleted code (#12238)
* Fix Syntax highlight for token change in added/deleted code
For diffs we first syntax highlight the before and after line then use a 3rd party diff library to find the difference in them and create a substring based on that, which we then highlight a 2nd time to show the specific difference within a line that has changed. In a specific case if the diffrence also changes the chroma class it will split in the middle of the attr and cause broken HTML:
```
<span class="nx">oldtext<span>
<span class="k">var newtext<span>
```
Will then split on
```
<span class="
```
Where the difference starts, and produce something broken like:
```
<span class="<span class="removed-code">nx"oldtext</span></span
```
Fix that by detecting when it happens and putting the HTML back together properly before highlighting the added/deleted code.
Fixes#12235
* fix lint
* apply fix to all diff sections. Also handle case where insert/remove starts with a closing span
* Add a test for this new code
* remove comment
Co-authored-by: Lauris BH <lauris@nix.lv>