[BUG] 2.1.198: chat code blocks have no container styling, so the host's default inline-code background leaks through as ragged per-line runs (stock VS Code)

Preflight Checklist

• [x] I have searched existing issues and this hasn't been reported yet
• [x] This is a single bug report (please file separate reports for different bugs)
• [x] I am using the latest version of Claude Code

What's Wrong?

Environment

• Extension: anthropic.claude-code 2.1.198 (linux-x64)
• Host: stock VS Code (not Cursor, not a fork)
• OS: Linux
• Theme: any (reproduced on default dark, light, solarized)

What happens

The 2.1.198 changelog says:

Improved syntax highlighting accuracy in code blocks, diffs, and file previews by upgrading to highlight.js 11

Token colors did improve. But the code block container itself still has no styling: no background tile, no border. What renders instead is worse than flat: each line of code shows a ragged background run that hugs the text and stops at the end of the line (screenshot below).

That ragged background is not the extension styling anything. It is VS Code's host-injected webview default bleeding through. Every webview gets this from src/vs/workbench/contrib/webview/browser/pre/index.html:

code {
  background-color: var(--vscode-textPreformat-background);
  padding: 1px 3px;
  border-radius: 4px;
}
pre code { padding: 0; }

The host resets only padding on pre code, not background-color. Since <code> is display: inline, the inline-code background paints each line box separately inside the <pre>, producing per-line gray runs with ragged right edges instead of a block tile.

Every other integrated chat surface (Copilot Chat, claude.ai, GitHub markdown) renders code blocks on a distinct container tile. The highlight.js upgrade makes the gap more visible, not less: accurate token colors on a broken container.

Shipped CSS, quoted from the 2.1.198 build

webview/index.css in anthropic.claude-code-2.1.198-linux-x64, the complete set of rules for these elements:

.codeBlockWrapper_-a7MRw{position:relative;margin:8px 0}
.codeBlockWrapper_-a7MRw pre{overflow-x:auto;white-space:pre;box-sizing:border-box;border-radius:4px;max-width:100%;margin:0;padding:8px}
.root_-a7MRw code{font-family:var(--app-monospace-font-family);word-break:break-word;border-radius:3px;padding:2px 4px;font-size:.9em}
.root_-a7MRw pre code{padding:0}

Two defects:

1. No background and no border on the pre container. The border-radius: 4px is there, rounding corners of a tile that is never painted.
2. No background: transparent on pre code, so the host default described above leaks into every code block as the per-line ragged runs.

Why this is not a duplicate of #45841 or #71646

• #71646 is about var(--vscode-*) tokens referenced WITHOUT fallbacks, which breaks in hosts that do not inject them (Cursor). This issue reproduces in stock VS Code, where all tokens ARE injected. The root cause here is different: the container rules are missing entirely, and the host's default inline-code style leaks into blocks. There is nothing to fall back from.
• #45841 (mine) and #71646 were both closed as completed on 2026-06-30T17:01:37Z, the same second, with no comment and no linked PR. I verified the 2.1.198 build after that close: the CSS above is what ships. Whatever closed them, it was not a fix.

Suggested fix

VS Code already provides the exact theme token for this. Six lines:

.codeBlockWrapper_HASH pre {
  background: var(--vscode-textCodeBlock-background, var(--vscode-editor-background));
  border: 1px solid var(--vscode-widget-border, rgba(127, 127, 127, .25));
  padding: 10px 12px;
}
.root_HASH code { background: rgba(127, 127, 127, .13) }
.root_HASH pre code { background: transparent; padding: 0 }

--vscode-textCodeBlock-background is registered by VS Code specifically as "Background color for code blocks in text" (defaults #dcdcdc66 light / #0a0a0a66 dark), so this follows every theme automatically. The pre code { background: transparent } line kills the host-default leak. The fallbacks also cover the fork-host case from #71646 for free.

Related detail found while diffing the build: .toolResult_uq5aLg references var(--app-code-background), which is never defined anywhere in index.css (grep for --app-code-background: returns nothing). Same bug family, one step worse than a missing fallback.

Workaround I am carrying

A script that appends the CSS above to the installed extension's index.css, plus a systemd path unit that re-applies it after every extension auto-update, because each update wipes the patch. It has survived every release for months, which is also how I can state precisely what each version ships.

Screenshots: [before/after attached]

<img width="860" height="220" alt="Image" src="https://github.com/user-attachments/assets/854955df-f2c4-4156-85fb-a2311aa7c60c" />

<img width="860" height="171" alt="Image" src="https://github.com/user-attachments/assets/74c8f4ba-aa6e-4477-8836-940b3931cb78" />

What Should Happen?

code and code blocks should be readable and not a garbled mess

Error Messages/Logs

Steps to Reproduce

ask for a code block example in claude code vscode extension

Claude Model

Opus

Is this a regression?

No, this never worked

Last Working Version

_No response_

Claude Code Version

2.1.198

Platform

Anthropic API

Operating System

Ubuntu/Debian Linux

Terminal/Shell

Terminal.app (macOS)

Additional Information

Please do not close it without at least 10 seconds of a human review. I know, probably asking too much.