update

app.config.ts

@@ -1,10 +1,35 @@
 export default defineAppConfig({
   ui: {
     prose: {
+      pre: {
+        slots: {
+          root: "relative my-4 group rounded-lg bg-(--c-bg-2,#0f1419)",
+          header:
+            "sticky top-0 z-20 flex items-center justify-between gap-3 px-4 py-2.5 bg-(--c-bg-2,#0f1419) border-b border-(--c-border,#2a2e38) backdrop-blur-sm",
+          filename:
+            "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-(--c-bg-3,#1a1f2e) text-xs font-mono text-(--c-text-1,#e8eaed) whitespace-nowrap border border-(--c-border,#2a2e38)",
+          icon: "w-3.5 h-3.5 shrink-0 opacity-80",
+          copy: "px-2.5 py-1.5 rounded-md text-xs font-mono bg-(--c-bg-3,#1a1f2e) hover:bg-(--c-border,#2a2e38) transition-colors text-(--c-text-2,#a8adb8) hover:text-(--c-text-1,#e8eaed) border border-transparent hover:border-(--c-border,#2a2e38)",
+          base: "overflow-auto m-0 text-(--c-text-1,#e8eaed) shiki font-mono text-sm leading-relaxed",
+        },
+      },
       codeIcon: {
         terminal: "i-ph-terminal-window-duotone",
         config: "i-lucide-settings",
         package: "i-lucide-package",
+        json: "i-ph-file-json",
+        ts: "i-ph-file-ts",
+        js: "i-ph-file-js",
+        vue: "i-ph-file-vue",
+        py: "i-ph-file-py",
+        sh: "i-ph-terminal-window-duotone",
+        bash: "i-ph-terminal-window-duotone",
+        yml: "i-ph-file-yaml",
+        yaml: "i-ph-file-yaml",
+        md: "i-ph-file-md",
+        html: "i-ph-file-html",
+        css: "i-ph-file-css",
+        xml: "i-ph-file-xml",
       },
     },
   },

app/assets/css/code.css

@@ -1,19 +1,21 @@
 @layer utilities {
-  pre code .line {
+  .line {
-    @apply block relative min-h-[1rem];
+    @apply block relative min-h-[1rem] pl-[6.25rem];
   }
 }
 
-pre code .line::before {
+.line::before {
   content: attr(data-line);
   position: absolute;
-  top: 0;
+  left: 0;
-  left: -6.25rem;
+  width: 5.25rem;
-  color: #cccccc;
+  padding-right: 1rem;
+  text-align: right;
+  color: #999999;
   user-select: none;
+  font-size: 0.85em;
 }
 
-.dark pre code .line::before {
+.dark .line::before {
-  color: #777777;
+  color: #666666;
-  opacity: 0.43;
 }

app/assets/css/main.css

@@ -3,6 +3,7 @@
 /* @import url("https://fontsapi.zeoseven.com/292/main/result.css"); */
 @import "tailwindcss";
 @import "@nuxt/ui";
+@import "code.css";
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
 @tailwind utilities;

nuxt.config.ts

@@ -98,11 +98,7 @@ export default defineNuxtConfig({
           depth: 4,
         },
         highlight: {
-          theme: {
+          theme: "github-dark",
-            default: "github-light",
-            dark: "github-dark",
-            light: "github-light",
-          },
           langs: ["bash", "c", "python"],
         },
         remarkPlugins: {