anthropics / anthropics/claude-code

[BUG] Fenced code blocks in assistant messages render without syntax highlighting (VS Code extension)

Open
#81,179 1 comment 1 reaction 0 assignees View on GitHub
area:ide bug
Dominant language
Python
Stars
145k
Forks
23.1k
PR merge metrics
PR metrics pending

Description

### Preflight Checklist

- [x] I have searched [existing issues](https://github.com/anthropics/claude-code/issues?q=is%3Aissue%20state%3Aopen%20label%3Abug) 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?

Fenced code blocks in **assistant message text** render as flat monospace with a
per-line gray background and no syntax highlighting, even when the fence carries a
correct language tag (`` ```ts ``, `` ```js ``, `` ```html ``, `` ```tsx ``).

The gray background hugs each line's text width rather than spanning the full block
width, which reads like inline-`` styling being applied to a `

` element.

By contrast, code shown in **Edit / Write tool results** in the same panel renders
with full syntax highlighting and diff coloring. So a highlighter is clearly present
in the webview — it just doesn't appear to be applied to markdown code fences in
message text.

Screenshot:

Image

### What Should Happen?

Fenced code blocks in assistant messages get the same syntax highlighting as code in
tool results.

### Error Messages/Logs

```shell

```

### Steps to Reproduce

1. Open the Claude Code panel in VS Code.
2. Ask any question whose answer contains a multi-line fenced code block with a
language tag — e.g. "explain this PR with code examples", or simply
"show me a TypeScript function in a code block".
3. In the same conversation, have Claude edit a file so an Edit tool result appears.
4. Compare the two renderings: the tool-result code is highlighted; the code block in
the message text is not.

### Claude Model

Opus

### Is this a regression?

No, this never worked

### Last Working Version

_No response_

### Claude Code Version

2.1.219

### Platform

Anthropic API

### Operating System

macOS

### Terminal/Shell

Terminal.app (macOS)

### Additional Information

## Steps to reproduce

1. Open the Claude Code panel in VS Code.
2. Ask any question whose answer contains a multi-line fenced code block with a
language tag — e.g. "explain this PR with code examples", or simply
"show me a TypeScript function in a code block".
3. In the same conversation, have Claude edit a file so an Edit tool result appears.
4. Compare the two renderings: the tool-result code is highlighted; the code block in
the message text is not.

## Impact

Long code-heavy explanations (PR walkthroughs, before/after diffs, design writeups)
are hard to read in the panel. The workaround is to have Claude write the explanation
to a `.md` file and open it in the editor, which defeats the point of explaining
in-chat.

## Notes

- The webview-vs-native-renderer split above is inferred from the behavior difference,
not from reading the extension source — treat it as a hypothesis, not a diagnosis.
- If the flat style is deliberate rather than a bug, please read this as a feature
request for opt-in highlighting.

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the issue in the VS Code panel using a language-tagged fenced block, then compare assistant message rendering with the highlighted Edit or Write tool result. Start by locating the extension entry point that renders assistant markdown; done means fenced blocks in messages receive syntax highlighting and full block-width styling like tool-result code.

Written by the indexing model from the issue text.

Assessment

Tech stack
vscode
Domain
desktop-dev, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.