fix markdown code highlighting (#1176)

src/components/file-preview/MarkdownPreview.tsx

@@ -90,7 +90,7 @@ export default function MarkdownPreview({ source, className }: MarkdownPreviewPr
           ),
           code: ({ className: codeClass, children, ...props }) => {
             const match = /language-(\w+)/.exec(codeClass || '');
-            const isInline = !match && !codeClass;
+            const isInline = !match && !codeClass && !String(children).includes('\n');
             if (isInline) {
               return (
                 <code

src/pages/Chat/AcpMessageSegment.tsx

@@ -43,10 +43,10 @@ function AcpMarkdownPart({ text, tone }: { text: string; tone: RenderTone }) {
         components={{
           code({ className, children, ...props }) {
             const match = /language-(\w+)/.exec(className || '');
-            const isInline = !match && !className;
+            const isInline = !match && !className && !String(children).includes('\n');
             if (isInline) {
               return (
-                <code className="rounded bg-black/5 px-1.5 py-0.5 font-mono text-sm break-all dark:bg-white/10" {...props}>
+                <code className="font-mono text-sm break-all" {...props}>
                   {children}
                 </code>
               );

src/pages/Chat/ChatMessage.tsx

@@ -654,10 +654,10 @@ function AssistantMarkdown({
         components={{
           code({ className, children, ...props }) {
             const match = /language-(\w+)/.exec(className || '');
-            const isInline = !match && !className;
+            const isInline = !match && !className && !String(children).includes('\n');
             if (isInline) {
               return (
-                <code className="bg-black/5 dark:bg-white/5 px-1.5 py-0.5 rounded text-sm font-mono break-words break-all" {...props}>
+                <code className="text-sm font-mono break-words break-all" {...props}>
                   {children}
                 </code>
               );

tests/e2e/chat-assistant-markdown-plain.spec.ts

@@ -144,7 +144,10 @@ test.describe('ClawX assistant reply Markdown styling', () => {
       const assistantProse = page.getByTestId('acp-assistant-message').filter({ hasText: 'Plain Markdown reply' }).locator('.prose').first();
       await expect(assistantProse).toBeVisible({ timeout: 30_000 });
       await expect(assistantProse.locator('strong')).toHaveText('works');
-      await expect(assistantProse.locator('code')).toHaveText('worksToo()');
+      const inlineCode = assistantProse.locator('code');
+      await expect(inlineCode).toHaveText('worksToo()');
+      await expect.poll(() => inlineCode.evaluate((el) => window.getComputedStyle(el).backgroundColor))
+        .toBe('rgba(0, 0, 0, 0)');
 
       const assistantStyles = await assistantProse.evaluate((el) => {
         const style = window.getComputedStyle(el);

tests/e2e/chat-code-block-wrap.spec.ts

@@ -137,6 +137,8 @@ test.describe('ClawX chat code block wrapping', () => {
 
       const codeBlock = assistantProse.locator('pre').first();
       await expect(codeBlock).toBeVisible();
+      const code = codeBlock.locator('code');
+      await expect(code).not.toHaveClass(/bg-black\/5/);
 
       const metrics = await codeBlock.evaluate((el) => {
         const style = window.getComputedStyle(el);
@@ -160,6 +162,8 @@ test.describe('ClawX chat code block wrapping', () => {
 
       await expect(codeBlock).toContainText(LONG_LOG_LINE);
       await expect(codeBlock).toContainText(LONG_PATH);
+      await expect.poll(() => code.evaluate((el) => window.getComputedStyle(el).backgroundColor))
+        .toBe('rgba(0, 0, 0, 0)');
     } finally {
       await closeElectronApp(app);
     }

tests/unit/acp-chat-components.test.tsx

@@ -89,6 +89,29 @@ describe('ACP chat timeline components', () => {
     useArtifactPanel.setState({ open: false, tab: 'changes', focusedFile: null });
   });
 
+  it('does not apply background highlighting to chat code', () => {
+    const state = snapshot({
+      itemOrder: ['msg-a:0'],
+      itemsById: {
+        'msg-a:0': {
+          kind: 'message-segment',
+          id: 'msg-a:0',
+          role: 'assistant',
+          messageId: 'msg-a',
+          segmentIndex: 0,
+          parts: [{ kind: 'markdown', text: '```\nAGENTS\n├── raw/\n└── wiki/\n```\n\nand `inline`' }],
+        },
+      },
+    });
+
+    const { container } = render(<AcpTimeline snapshot={state} />);
+    const blockCode = container.querySelector('pre code');
+    const inlineCode = Array.from(container.querySelectorAll('code')).find((element) => element.textContent === 'inline');
+
+    expect(blockCode).not.toHaveClass('bg-black/5');
+    expect(inlineCode).not.toHaveClass('bg-black/5');
+  });
+
   it('renders tool-only turn file controls once after timeline items and routes preview and changes', () => {
     const state = snapshot({
       itemOrder: ['tool:write-file'],