refactor: replace legacy syntax highlighters with ShowCode

- ReadFileTool: swap inline CodeBlock + duplicated header/button JSX for
  a single <ShowCode> — removes the fragile [&>div>div]:max-h-[300px]
  deep selector and the duplicated open-in-pane button pattern flagged in
  code review
- MarkdownRenderer/CodeBlock (desktop): replace react-syntax-highlighter
  (Prism) with ShowCode, aligning markdown code fences with the shared
  Shiki-based highlighter used throughout the chat UI

Author: michalkopanski

apps/desktop/src/renderer/components/MarkdownRenderer/components/CodeBlock/CodeBlock.tsx

@@ -1,10 +1,6 @@
 import { mermaid } from "@streamdown/mermaid";
+import { ShowCode } from "@superset/ui/ai-elements/show-code";
 import type { ReactNode } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import {
-	oneDark,
-	oneLight,
-} from "react-syntax-highlighter/dist/esm/styles/prism";
 import { useTheme } from "renderer/stores";
 import { Streamdown } from "streamdown";
 
@@ -26,7 +22,6 @@ interface CodeBlockProps {
 export function CodeBlock({ children, className, node }: CodeBlockProps) {
 	const theme = useTheme();
 	const isDark = theme?.type !== "light";
-	const syntaxStyle = isDark ? oneDark : oneLight;
 
 	const match = /language-(\w+)/.exec(className || "");
 	const language = match ? match[1] : undefined;
@@ -56,13 +51,12 @@ export function CodeBlock({ children, className, node }: CodeBlockProps) {
 	}
 
 	return (
-		<SyntaxHighlighter
-			style={syntaxStyle as Record<string, React.CSSProperties>}
-			language={language ?? "text"}
-			PreTag="div"
-			className="rounded-md text-sm"
-		>
-			{codeString}
-		</SyntaxHighlighter>
+		<ShowCode
+			className="my-4"
+			// biome-ignore lint/suspicious/noExplicitAny: ShowCode accepts BundledLanguage; language is an untyped string here
+			language={language as any}
+			code={codeString}
+			showLineNumbers
+		/>
 	);
 }

packages/ui/src/components/ai-elements/read-file-tool.tsx

@@ -3,7 +3,7 @@
 import { FileIcon } from "lucide-react";
 import type { BundledLanguage } from "shiki";
 import { ClickableFilePath } from "./clickable-file-path";
-import { CodeBlock } from "./code-block";
+import { ShowCode } from "./show-code";
 import { ToolCallRow } from "./tool-call-row";
 
 export type ReadFileToolProps = {
@@ -39,34 +39,22 @@ export function ReadFileTool({
 	return (
 		<ToolCallRow
 			className={className}
-			description={
-				<ClickableFilePath path={filename} onOpen={onOpenInPane} />
-			}
+			description={<ClickableFilePath path={filename} onOpen={onOpenInPane} />}
 			icon={FileIcon}
 			isError={isError}
 			isPending={isPending}
 			title="Read"
 		>
 			<div className="py-1.5 pl-2">
-				<div className="overflow-hidden rounded-md border border-border">
-					<div className="flex items-center gap-2 border-b border-border bg-muted/50 px-3 py-1.5 font-mono text-xs">
-						<ClickableFilePath
-							path={filename}
-							onOpen={onOpenInPane}
-							className="text-foreground"
-						/>
-						{lineRange && (
-							<span className="text-muted-foreground">{lineRange}</span>
-						)}
-					</div>
-					<CodeBlock
-						className="rounded-none border-0 [&>div>div]:max-h-[300px] [&_pre]:!p-2"
-						code={content}
-						colorize={false}
-						language={language}
-						showLineNumbers
-					/>
-				</div>
+				<ShowCode
+					code={content}
+					colorize={false}
+					filename={filename}
+					language={language}
+					lineRange={lineRange}
+					onOpen={onOpenInPane}
+					showLineNumbers
+				/>
 			</div>
 		</ToolCallRow>
 	);