feat: add blog detail content component with markdown parsing, syntax highlighting, and reading progress tracking

components/blog-detail-content.tsx

@@ -4,6 +4,8 @@ import Image from "next/image";
 import Link from "next/link";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Icon } from "@iconify/react";
 import { Badge, Card, Typography } from "poyraz-ui/atoms";
@@ -379,9 +381,18 @@ export function BlogDetailContent({ post }: BlogDetailContentProps) {
                         <div className="border-b border-border bg-muted/40 px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground">
                           {language || "code"}
                         </div>
-                        <pre className="overflow-x-auto bg-zinc-950/95 p-3 text-[13px] leading-6 text-zinc-100">
-                          <code>{codeText}</code>
-                        </pre>
+                        <SyntaxHighlighter
+                          language={language}
+                          style={oneDark}
+                          customStyle={{
+                            margin: 0,
+                            borderRadius: 0,
+                            fontSize: "13px",
+                            lineHeight: "1.6",
+                          }}
+                        >
+                          {codeText}
+                        </SyntaxHighlighter>
                       </Card>
                     );
                   },

package.json

@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "@iconify/react": "^6.0.2",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "framer-motion": "^12.38.0",
     "gray-matter": "^4.0.3",
     "mermaid": "^11.13.0",
@@ -36,6 +35,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
     "medium-to-markdown": "^0.0.3",

pnpm-lock.yaml

@@ -11,9 +11,6 @@ importers:
       '@iconify/react':
         specifier: ^6.0.2
         version: 6.0.2(react@19.2.3)
-      '@types/react-syntax-highlighter':
-        specifier: ^15.5.13
-        version: 15.5.13
       framer-motion:
         specifier: ^12.38.0
         version: 12.38.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -63,6 +60,9 @@ importers:
       '@types/react-dom':
         specifier: ^19
         version: 19.2.3(@types/react@19.2.14)
+      '@types/react-syntax-highlighter':
+        specifier: ^15.5.13
+        version: 15.5.13
       eslint:
         specifier: ^9
         version: 9.39.4(jiti@2.6.1)
@@ -1639,6 +1639,7 @@ packages:
   '@xmldom/xmldom@0.8.11':
     resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
     engines: {node: '>=10.0.0'}
+    deprecated: this version has critical issues, please update to the latest version
 
   abab@2.0.6:
     resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}