fix: prevent code ligatures from being applied when disabled in diff viewer

[shuuji3]

🔗 Linked issue

fix#2754

🧭 Context

While the normal code viewer respects the ligature setting, the diff viewer ignores the same setting.

📚 Description

Ligatures style is applied here:

npmx.dev/app/assets/main.css

Lines 290 to 293 in 636d8ad

	/* Settings-based configuration for code ligatures. On by default. */
	:root[data-code-ligatures='false'] code {
	font-variant-ligatures: none;
	}

But the diff viewer has no <code> block in the code line. This change ensures to have <code> for each line and apply the ligatures setting.

Example result

In https://main.npmx.dev/diff/nitro/v/2.2.28...3.0.260610-beta?file=lib/class-file.js, this line if( this.__.src === undefined ) this.load(); will be rendered as follows:

Before

<tddata-v-f41da3b8="" class="pe-6 text-nowrap"><deldata-v-f41da3b8=""><spandata-v-f41da3b8="" class=""><spanclass="line"><spanstyle="color:#F97583;--shiki-light:#CD3443"> if</span><spanstyle="color:#E1E4E8;--shiki-light:#24292E">( </span><spanstyle="color:#79B8FF;--shiki-light:#005CC5">this</span><spanstyle="color:#E1E4E8;--shiki-light:#24292E">.__.src </span><spanstyle="color:#F97583;--shiki-light:#CD3443">===</span><spanstyle="color:#79B8FF;--shiki-light:#005CC5"> undefined</span><spanstyle="color:#E1E4E8;--shiki-light:#24292E"> ) </span><spanstyle="color:#79B8FF;--shiki-light:#005CC5">this</span><spanstyle="color:#E1E4E8;--shiki-light:#24292E">.</span><spanstyle="color:#B392F0;--shiki-light:#6F42C1">load</span><spanstyle="color:#E1E4E8;--shiki-light:#24292E">();
</span></span></code></del></td>

After

https://npmxdev-git-shuuji3-fixligature-in-diff-viewer-npmx.vercel.app/diff/nitro/v/2.2.28...3.0.260610-beta?file=lib/class-file.js

<tddata-v-f41da3b8="" class="pe-6 text-nowrap"><deldata-v-f41da3b8=""><codedata-v-f41da3b8="" class=""><spanclass="line"><spanstyle="color:#F97583;--shiki-light:#CD3443"> if</span><spanstyle="color:#E1E4E8;--shiki-light:#24292E">( </span><spanstyle="color:#79B8FF;--shiki-light:#005CC5">this</span><spanstyle="color:#E1E4E8;--shiki-light:#24292E">.__.src </span><spanstyle="color:#F97583;--shiki-light:#CD3443">===</span><spanstyle="color:#79B8FF;--shiki-light:#005CC5"> undefined</span><spanstyle="color:#E1E4E8;--shiki-light:#24292E"> ) </span><spanstyle="color:#79B8FF;--shiki-light:#005CC5">this</span><spanstyle="color:#E1E4E8;--shiki-light:#24292E">.</span><spanstyle="color:#B392F0;--shiki-light:#6F42C1">load</span><spanstyle="color:#E1E4E8;--shiki-light:#24292E">();
</span></span></code></del></td>

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jul 12, 2026 6:51am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored		Jul 12, 2026 6:51am
npmx-lunaria	Ignored		Jul 12, 2026 6:51am

[coderabbitai]

📝 Walkthrough

Walkthrough

The diff line renderer now wraps each rendered segment in a <code> element instead of a <span>, preserving the existing segment iteration, class binding, and HTML content rendering.

Changes

Diff rendering

Layer / File(s)	Summary
Use code wrapper for rendered segments app/components/Diff/Line.vue	Rendered diff segments are wrapped with <code> inside the dynamic line-kind component instead of <span>.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The change satisfies #2754 by wrapping diff lines in , so the ligature setting can be applied consistently.
Out of Scope Changes check	✅ Passed	The patch is narrowly scoped to the diff line wrapper change and introduces no obvious unrelated edits.
Title check	✅ Passed	The title clearly describes the main diff viewer ligature fix and matches the changeset.
Description check	✅ Passed	The description is directly related to the change and explains the ligature issue and fix.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch shuuji3/fix/ligature-in-diff-viewer

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!