diff --git a/apps/web/src/components/Markdown.tsx b/apps/web/src/components/Markdown.tsx index 8f6f1e0..8caef0a 100644 --- a/apps/web/src/components/Markdown.tsx +++ b/apps/web/src/components/Markdown.tsx @@ -13,44 +13,49 @@ interface MarkdownProps { /** * Markdown renderer component * Safely renders markdown content with GitHub Flavored Markdown support + * Styled to match npm.com's beautiful README rendering */ export function Markdown({ content, className = '' }: MarkdownProps): React.ReactElement { return (
+
{children}
);
@@ -61,7 +66,18 @@ export function Markdown({ content, className = '' }: MarkdownProps): React.Reac
);
},
- // Make links open in new tab
+ // Better styled pre blocks
+ pre: ({ children, ...props }) => {
+ return (
+
+ {children}
+
+ );
+ },
+ // Make links open in new tab with better styling
a: ({ href, children, ...props }) => {
const isExternal = href?.startsWith('http');
return (
@@ -69,13 +85,26 @@ export function Markdown({ content, className = '' }: MarkdownProps): React.Reac
href={href}
target={isExternal ? '_blank' : undefined}
rel={isExternal ? 'noopener noreferrer' : undefined}
- className="text-primary hover:underline"
+ className="text-blue-600 dark:text-blue-400 hover:underline font-medium"
{...props}
>
{children}
);
},
+ // Better table styling
+ table: ({ children, ...props }) => {
+ return (
+