Highlighter: Implement syntax-highlighted diff rendering

[marcoroth]

This pull request adds a diff view to the Highlighter, so a change between two versions of a template can be rendered with the same syntax highlighting, gutter and theming as the rest of the package. The motivating case is previewing what a Linter autocorrection would do, which currently has no way to be shown.

The renderer computes hunks itself rather than taking a pre-formatted diff, highlights both sides, and marks the characters that actually changed within each line:

app/views/gems/index.html.erb

      1 │ <div id="gems">
  -   2 │   <span class='card'>Hello</span>
  +     │   <span class="card">Hello</span>
      3 │   <img src="a.png">
      4 │ </div>

Options

auto collapses a pair only where that reads better, and only when color is on. A pure insertion or deletion is the clearest case, because the composite is exactly the line as it exists in one of the two versions, with the inserted part tinted, nothing synthetic:

  ±   2 │   <img src="a.png" alt="">

A genuine replacement produces text that appears in neither version, so it collapses only while the change stays under 24 characters a side, stays a minority of the line, and still fits the available width. Collapsing a line only to have it truncated would trade a line of height for a loss of content.

With NO_COLOR set nothing collapses, including insertions. The composite above would still be a valid line, but without the tint it no longer shows which part was added, so the stacked pair carries strictly more information:

  -   2 │   <img src="a.png">
  +     │   <img src="a.png" alt="">

The split layout gives each column its own numbering, since there a column is one version of the file and the ambiguity that motivates the blank added numbers does not exist:

      1 │ <div>                          ┃       1 │ <div>
  -   2 │   <SPAN>restructured</SPAN>    ┃   +   2 │   <section>
        │                                ┃   +   3 │     <span>restructured</span>
        │                                ┃   +   4 │   </section>
      3 │   <p>untouched</p>             ┃       5 │   <p>untouched</p>

It falls back to unified when the terminal cannot give each column readable width.

On the command line

herb-highlight diff takes two files:

herb-highlight diff before.html.erb after.html.erb

It also renders a diff that was produced elsewhere, read from an argument or from stdin, following the same rule as herb-format: with no argument and something piped in, stdin is used.

git diff -- app/views | herb-highlight diff

The input may be unified diff text as produced by git diff, which parseUnifiedDiff() turns into hunks, or JSON as {"original": "...", "modified": "..."} or {"hunks": [...]}.

Follow up work: wiring this into the Linter CLI in #1572.

[github-actions]

🌿 Interactive Playground and Documentation Preview

A preview deployment has been built for this pull request. Try out the changes live in the interactive playground:

• Playground Preview
• Documentation Preview
• Website Preview

---

_{🌱 Grown from commit 1e64ade}

---

✅ Preview deployment has been cleaned up.

[pkg-pr-new]

npx https://pkg.pr.new/@herb-tools/formatter@2035

npx https://pkg.pr.new/@herb-tools/language-server@2035

npx https://pkg.pr.new/@herb-tools/linter@2035

commit: 1e64ade