Skip to content

Changed lines in diff:<lang> blocks are visually unmarkedΒ #4109

Open

Description

@DmitrySharabin

Repro

Prism.highlight('-let a = 1;\n+const a = 1;\n', 'diff:javascript');
<span class="token deleted-sign deleted">
  <span class="token prefix deleted">-</span>
  <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span>
</span>

let, = and 1 carry their own JavaScript colors, so the deleted foreground color set by every theme reaches only the spaces between them. Plain diff is unaffected β€” there are no inner tokens to override it.

What was removed

src/plugins/diff-highlight/diff-highlight.css painted translucent line backgrounds behind changed lines, leaving inner syntax colors intact:

pre.diff-highlight > code .token.deleted:not(.prefix),
pre > code.diff-highlight .token.deleted:not(.prefix) {
	background-color: rgba(255, 0, 0, 0.1);
	color: inherit;
	display: block;
}

Default rendering never used it, so only users who opted in lost anything.

Notes for whoever fixes this

  • The selector still matches the new output unchanged: diff.js:38 derives the deleted/inserted alias from the token name, so deleted-sign and deleted-arrow both carry it and :not(.prefix) still excludes the markers.
  • color: inherit is load-bearing β€” without it the inner language's colors are lost.
  • Consecutive changed lines are a single token, so display: block paints one block per run, not per line.
  • A CSS-only plugin is not possible today: scripts/build.js:150 and :414 both require plugins/<id>/<id>.js.
  • diff:diff:<lang> nests the wrappers, so any background stacks.
  • If this moves into the default theme, funky.css previously overrode it with a stronger background and display: inline.

Activity

  1. added this to the 2.0 milestone on Sep 15, 2026
  2. added a commit that references this issue on Sep 25, 2026
    124657d
  3. added 2 commits that reference this issue on Oct 24, 2026
    1c63dbe
    f14d6e6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions