Update GuideContent.tsx

web/app/guides/[slug]/GuideContent.tsx

@@ -1,31 +1,27 @@
 "use client"
 
+import type React from "react"
 import { useState, useEffect } from "react"
 import CopyableCode from "@/components/CopyableCode"
 
-function processContent(content: string) {
-  const codeBlockRegex = /<pre><code>([\s\S]*?)<\/code><\/pre>/g
-  return content.replace(codeBlockRegex, (match, code) => {
-    return `<CopyableCodePlaceholder code="${encodeURIComponent(code)}" />`
+function processContent(content: string): React.ReactNode[] {
+  const parts = content.split(/(```[\s\S]*?```)/g)
+  return parts.map((part, index) => {
+    if (part.startsWith("```") && part.endsWith("```")) {
+      const code = part.slice(3, -3).trim()
+      return <CopyableCode key={index} code={code} />
+    }
+    return <div key={index} dangerouslySetInnerHTML={{ __html: part }} />
   })
 }
 
 export default function GuideContent({ content }: { content: string }) {
-  const [processedContent, setProcessedContent] = useState<string>("")
+  const [processedContent, setProcessedContent] = useState<React.ReactNode[]>([])
 
   useEffect(() => {
     setProcessedContent(processContent(content))
   }, [content])
 
-  useEffect(() => {
-    const placeholders = document.querySelectorAll("CopyableCodePlaceholder")
-    placeholders.forEach((placeholder, index) => {
-      const code = decodeURIComponent(placeholder.getAttribute("code") || "")
-      const codeElement = <CopyableCode key={index} code={code} />
-      placeholder.replaceWith(codeElement)
-    })
-  }, []) // Removed unnecessary dependency: processedContent
-
   return (
     <div
       className="prose prose-gray max-w-none
@@ -38,7 +34,9 @@ export default function GuideContent({ content }: { content: string }) {
       [&>ol]:list-decimal [&>ol]:pl-5 [&>ol]:mb-4
       [&>ol>li]:text-gray-600 [&>ol>li]:mb-2
       [&>a]:text-blue-600 [&>a:hover]:underline"
-      dangerouslySetInnerHTML={{ __html: processedContent }}
-    />
+    >
+      {processedContent}
+    </div>
   )
 }
+