Github-styled unified text diff viewer (read-only)

I want to show a unified textual diff viewer of a SQL query. This editor view would be read-only. The design from the design team is borrowed from Github where changes are highlighted per line.

It would look something like this:

I have the data of the before/after of the full query along with a diff array containing of which lines had changes of which type (plus vs minus).

I’m confused on how to give CodeMirror a unified, annotated doc to render. This seems preferable to trying to render one text query in the editor and compare it with the second query to derive the display.

The general idea would be to put a data structure describing the lines in some state field, and have separate gutters for the old and new line numbers, plus a gutter for the +/- signs, rendering markers based on the content of that data structure.

(Or, if this is read-only, just render it without an editor, optionally using Lezer to highlight the code. That’s what the Chrome devtools do.)