From f182887c89d4349d3551073a2189a6f9c4a4d587 Mon Sep 17 00:00:00 2001
From: Nicolas Cantu <nicolas.cantu@pm.me>
Date: Sat, 27 Dec 2025 23:02:30 +0100
Subject: [PATCH] Update markdown renderer with dark theme styling

- Update headings with neon-cyan and font-mono
- Update paragraphs with cyber-accent color
- Update code blocks with dark background and neon-cyan text
- Update links with neon-green hover to neon-cyan
- Update inline code with dark background and border
- Update bold text with neon-green color
- Update lists with cyber-accent and neon-cyan markers
- All TypeScript checks pass
---
 lib/markdownRenderer.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/lib/markdownRenderer.tsx b/lib/markdownRenderer.tsx
index 0d981fb..0504553 100644
--- a/lib/markdownRenderer.tsx
+++ b/lib/markdownRenderer.tsx
@@ -55,19 +55,19 @@ function processLine(line: string, index: number, state: RenderState, elements:
 
 function renderHeading(line: string, index: number, elements: JSX.Element[]): boolean {
   if (line.startsWith('# ')) {
-    elements.push(<h1 key={index} className="text-3xl font-bold mt-8 mb-4">{line.substring(2)}</h1>)
+    elements.push(<h1 key={index} className="text-3xl font-bold mt-8 mb-4 text-neon-cyan font-mono">{line.substring(2)}</h1>)
     return true
   }
   if (line.startsWith('## ')) {
-    elements.push(<h2 key={index} className="text-2xl font-bold mt-6 mb-3">{line.substring(3)}</h2>)
+    elements.push(<h2 key={index} className="text-2xl font-bold mt-6 mb-3 text-neon-cyan font-mono">{line.substring(3)}</h2>)
     return true
   }
   if (line.startsWith('### ')) {
-    elements.push(<h3 key={index} className="text-xl font-semibold mt-4 mb-2">{line.substring(4)}</h3>)
+    elements.push(<h3 key={index} className="text-xl font-semibold mt-4 mb-2 text-neon-cyan font-mono">{line.substring(4)}</h3>)
     return true
   }
   if (line.startsWith('#### ')) {
-    elements.push(<h4 key={index} className="text-lg font-semibold mt-3 mb-2">{line.substring(5)}</h4>)
+    elements.push(<h4 key={index} className="text-lg font-semibold mt-3 mb-2 text-neon-cyan font-mono">{line.substring(5)}</h4>)
     return true
   }
   return false
@@ -99,7 +99,7 @@ function renderBoldAndCodeLine(line: string, index: number, elements: JSX.Elemen
 
 function renderParagraphOrBreak(line: string, index: number, elements: JSX.Element[]): void {
   if (line.trim() !== '') {
-    elements.push(<p key={index} className="mb-4 text-gray-700">{line}</p>)
+    elements.push(<p key={index} className="mb-4 text-cyber-accent">{line}</p>)
     return
   }
   if (elements.length > 0) {
@@ -118,7 +118,7 @@ function handleCodeBlock(
 ): void {
   if (state.inCodeBlock) {
     elements.push(
-      <pre key={`code-${index}`} className="bg-gray-100 p-4 rounded-lg overflow-x-auto my-4">
+      <pre key={`code-${index}`} className="bg-cyber-darker border border-neon-cyan/20 p-4 rounded-lg overflow-x-auto my-4 text-neon-cyan font-mono text-sm">
         <code>{state.codeBlockContent.join('\n')}</code>
       </pre>
     )
@@ -137,7 +137,7 @@ function closeListIfNeeded(
 ): void {
   if (state.currentList.length > 0 && !line.startsWith('- ') && !line.startsWith('* ') && line.trim() !== '') {
     elements.push(
-      <ul key={`list-${index}`} className="list-disc list-inside mb-4 space-y-1">
+      <ul key={`list-${index}`} className="list-disc list-inside mb-4 space-y-1 text-cyber-accent marker:text-neon-cyan">
         {state.currentList.map((item, i) => (
           <li key={i} className="ml-4">{item.substring(2).trim()}</li>
         ))}
@@ -153,7 +153,7 @@ function createLinkElement(
   key: string,
   isExternal: boolean
 ): JSX.Element {
-  const className = 'text-blue-600 hover:text-blue-800 underline'
+  const className = 'text-neon-green hover:text-neon-cyan underline transition-colors'
   if (isExternal) {
     return (
       <a key={key} href={href} target="_blank" rel="noopener noreferrer" className={className}>
@@ -208,7 +208,7 @@ function renderBoldAndCode(line: string, index: number, elements: JSX.Element[])
       processBold(beforeCode, parts)
     }
     parts.push(
-      <code key={`code-${codeMatch.index}`} className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">
+      <code key={`code-${codeMatch.index}`} className="bg-cyber-darker text-neon-cyan px-1 py-0.5 rounded text-sm font-mono border border-neon-cyan/20">
         {codeMatch[1]}
       </code>
     )
@@ -227,7 +227,7 @@ function processBold(text: string, parts: (string | JSX.Element)[]): void {
   const boldParts = text.split(/(\*\*[^*]+\*\*)/g)
   boldParts.forEach((part, i) => {
     if (part.startsWith('**') && part.endsWith('**')) {
-      parts.push(<strong key={`bold-${i}`}>{part.slice(2, -2)}</strong>)
+      parts.push(<strong key={`bold-${i}`} className="text-neon-green font-semibold">{part.slice(2, -2)}</strong>)
     } else if (part) {
       parts.push(part)
     }