* 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>