anthropics / anthropics/claude-code
[BUG] Fenced code blocks in assistant messages render without syntax highlighting (VS Code extension)
- 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:
### 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