Style inline code in docs as a pill instead of literal backticks
Tailwind Typography's default inline <code> style is just bold text with decorative backtick characters added via CSS content - with docs like CONFIG_REFERENCE.md that use backticks constantly, it read as unstyled/half-parsed. Swapped it for the same muted rounded-pill look already used for inline code elsewhere in the app (e.g. the dashboard's "no scripts configured" message). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,20 @@
|
|||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
import remarkGfm from "remark-gfm";
|
import remarkGfm from "remark-gfm";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
export function MarkdownViewer({ content }: { content: string }) {
|
export function MarkdownViewer({ content }: { content: string }) {
|
||||||
return (
|
return (
|
||||||
<div className="prose prose-neutral dark:prose-invert max-w-none prose-pre:bg-muted prose-pre:text-foreground">
|
<div
|
||||||
|
className={cn(
|
||||||
|
"prose prose-neutral dark:prose-invert max-w-none",
|
||||||
|
"prose-pre:bg-muted prose-pre:text-foreground",
|
||||||
|
// Typography's default inline `code` style is just bold text wrapped in decorative
|
||||||
|
// backtick characters - swap that for the same muted pill used for inline code
|
||||||
|
// elsewhere in the app (see the "no scripts configured" message on the dashboard).
|
||||||
|
"prose-code:before:content-none prose-code:after:content-none",
|
||||||
|
"prose-code:rounded prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:font-mono prose-code:font-normal prose-code:text-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user