From d3e71e483201ae950f66fc24be17e49053376b92 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Sun, 5 Apr 2026 21:17:09 +0200 Subject: [PATCH] fix(web): ensure readable text in code blocks before Shiki loads Set prose-pre:text-foreground so code blocks have proper contrast against bg-muted even when Shiki hasn't loaded yet (no .shiki class). Previously the text color came from prose-invert which could be near-white in some contexts. Also add an UnlabeledCodeBlock story to test this case. Co-Authored-By: Claude Opus 4.6 (1M context) --- webui2/src/components/content/markdown.stories.tsx | 14 ++++++++++++++ webui2/src/components/content/markdown.tsx | 4 ++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/webui2/src/components/content/markdown.stories.tsx b/webui2/src/components/content/markdown.stories.tsx index 5375989272f1b3ebad341d50cead3c4c450d45f1..13d09a27edf0e4e1363535382950f43ff2dcc527 100644 --- a/webui2/src/components/content/markdown.stories.tsx +++ b/webui2/src/components/content/markdown.stories.tsx @@ -93,3 +93,17 @@ The problem was that \`buildQuery()\` wasn't escaping special characters in labe Closes #42.`, }, }; + +export const UnlabeledCodeBlock: Story = { + args: { + content: `Here is a code block without a language: + +\`\`\` +# Please enter the title and comment message. The first non-empty line will be +# used as the title. Lines starting with '#' will be ignored. +# An empty title aborts the operation. +\`\`\` + +And some text after.`, + }, +}; diff --git a/webui2/src/components/content/markdown.tsx b/webui2/src/components/content/markdown.tsx index 1dd4dca6f73455d0a163525fe9ab4a4c86ea91f6..40a9f17fb3dc291587da924c6cb035862e9b975f 100644 --- a/webui2/src/components/content/markdown.tsx +++ b/webui2/src/components/content/markdown.tsx @@ -180,11 +180,11 @@ export function Markdown({ content, className, repoContext }: MarkdownProps) { "prose prose-sm dark:prose-invert max-w-none", // Code blocks: border, rounded corners, fallback bg for non-highlighted blocks. // Shiki adds .shiki class which overrides the background via CSS in index.css. - "prose-pre:rounded-md prose-pre:border prose-pre:border-border prose-pre:bg-muted prose-pre:text-sm prose-pre:overflow-x-auto", + "prose-pre:rounded-md prose-pre:border prose-pre:border-border prose-pre:bg-muted prose-pre:text-foreground prose-pre:text-sm prose-pre:overflow-x-auto", // Inline code: muted background pill "prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded-sm prose-code:text-sm prose-code:before:content-none prose-code:after:content-none", // Reset inline code styles inside highlighted code blocks - "prose-pre:prose-code:bg-transparent prose-pre:prose-code:p-0 prose-pre:prose-code:text-inherit", + "prose-pre:prose-code:bg-transparent prose-pre:prose-code:p-0", "prose-img:inline prose-img:my-0", className, )}