feat: slightly better highlight for code

Author: izadoesdev

apps/docs/app/(home)/blog/[slug]/page.tsx

@@ -14,6 +14,7 @@ import { Footer } from '@/components/footer';
 import { SciFiButton } from '@/components/landing/scifi-btn';
 import { Prose } from '@/components/prose';
 import { getPosts, getSinglePost } from '@/lib/blog-query';
+import type { Post } from '@/types/post';
 
 const STRIP_HTML_REGEX = /<[^>]+>/g;
 const WORD_SPLIT_REGEX = /\s+/;
@@ -96,12 +97,11 @@ export default async function PostPage({
 }) {
 	const { slug } = await params;
 	const result = (await getSinglePost(slug)) as {
-		post?: import('@/types/post').Post;
+		post?: Post;
 		error?: boolean;
 		status?: number;
 		statusText?: string;
 	};
-
 	if (!result?.post) {
 		return (
 			<>

apps/docs/components/prose.tsx

@@ -1,11 +1,13 @@
 import type { ComponentPropsWithoutRef } from 'react';
+import { enhanceCodeBlocks } from '@/lib/enhance-code-blocks';
 import { cn } from '@/lib/utils';
 
 interface ProseProps extends ComponentPropsWithoutRef<'article'> {
 	html: string;
 }
 
 export function Prose({ children, html, className }: ProseProps) {
+	const enhancedHtml = html ? enhanceCodeBlocks(html) : '';
 	return (
 		<article
 			className={cn(
@@ -31,13 +33,6 @@ export function Prose({ children, html, className }: ProseProps) {
 				'prose-li:marker:text-foreground/60',
 				'prose-ol:my-4',
 				'prose-ul:my-4',
-				'prose-code:bg-muted',
-				'prose-code:px-1.5',
-				'prose-code:py-0.5',
-				'prose-code:rounded',
-				'prose-code:text-foreground',
-				'prose-pre:bg-muted',
-				'prose-pre:rounded',
 				'prose-img:rounded',
 				'prose-table:border-border',
 				'prose-blockquote:border-l-2',
@@ -48,7 +43,11 @@ export function Prose({ children, html, className }: ProseProps) {
 			)}
 		>
 			{/** biome-ignore lint/security/noDangerouslySetInnerHtml: Needed to render markdown */}
-			{html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : children}
+			{html ? (
+				<div dangerouslySetInnerHTML={{ __html: enhancedHtml }} />
+			) : (
+				children
+			)}
 		</article>
 	);
 }

apps/docs/lib/enhance-code-blocks.ts

@@ -0,0 +1,26 @@
+/**
+ * Enhance HTML content with better code block styling
+ */
+export function enhanceCodeBlocks(html: string): string {
+	let enhanced = html;
+
+	// First handle code blocks (pre > code)
+	enhanced = enhanced.replace(
+		/<pre><code([^>]*)>/g,
+		'<pre class="not-prose relative my-6 overflow-x-auto rounded border border-border bg-muted p-4 font-mono text-sm leading-6 [&_code]:bg-transparent [&_code]:p-0"><code$1 class="block text-foreground">'
+	);
+
+	// Handle pre blocks without inner code tag
+	enhanced = enhanced.replace(
+		/<pre(?![^>]*class=.*not-prose)([^>]*)>/g,
+		'<pre$1 class="not-prose relative my-6 overflow-x-auto rounded border border-border bg-muted p-4 font-mono text-sm leading-6 text-foreground">'
+	);
+
+	// Handle inline code (not inside pre blocks)
+	enhanced = enhanced.replace(
+		/<code(?![^>]*class=.*block)([^>]*)>/g,
+		'<code$1 class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground">'
+	);
+
+	return enhanced;
+}