update

app.config.ts

@@ -1,36 +0,0 @@
-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/app.config.ts

@@ -1,17 +1,22 @@
 // @keep-sorted
 export default defineAppConfig({
-  component: {
+  ui: {
-    codeblock: {
+    prose: {
-      /** 代码块触发折叠的行数 */
+      // pre: {
-      triggerRows: 32,
+      //   slots: {
-      /** 代码块折叠后的行数 */
+      //     root: "relative my-4 group rounded-lg bg-(--c-bg-2,#0f1419)",
-      collapsedRows: 16,
+      //     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",
-      enableIndentGuide: true,
+      //     filename:
-      /** 代码块缩进导航(Indent Guige)竖线匹配空格数 */
+      //       "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)",
-      indent: 4,
+      //     icon: "w-3.5 h-3.5 shrink-0 opacity-80",
-      /** tab渲染宽度 */
+      //     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)",
-      tabSize: 3,
+      //     base: "overflow-auto m-0 text-(--c-text-1,#e8eaed) shiki font-mono text-sm leading-relaxed",
+      //   },
+      // },
+      codeIcon: {
+        config: "i-lucide-settings",
+      },
     },
   },
 });

app/assets/css/code.css

@@ -11,7 +11,7 @@
   width: 5.25rem;
   padding-right: 1rem;
   text-align: right;
-  color: #999999;
+  color: white;
   user-select: none;
   font-size: 0.85em;
 }

app/assets/css/main.css

@@ -3,7 +3,6 @@
 /* @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;
@@ -20,6 +19,27 @@
   --font-roboto: "LXGW WenKai", sans-serif;
 } */
 
+/* 先定义计数器 */
+pre[class*="language-"] {
+  counter-reset: line;
+}
+
+/* 每个代码行 <span> / <div> 前自增计数并打印 */
+pre[class*="language-"] code > * {
+  counter-increment: line;
+  position: relative;
+  padding-left: 3rem; /* 行号留出空间 */
+}
+
+pre[class*="language-"] code > *::before {
+  content: counter(line);
+  position: absolute;
+  left: 0;
+  width: 2rem;
+  text-align: right;
+  color: #6b7280; /* Tailwind gray-500 */
+}
+
 @theme {
   --font-roboto: "JetBrains Maple Mono", sans-serif;
   --font-display: "JetBrains Maple Mono", sans-serif;

app/components/content/Alert.vue

@@ -13,6 +13,9 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  title: "",
+  icon: "",
+  color: "",
   type: "info",
   card: false,
   flat: false,
@@ -95,7 +98,7 @@ const iconName = computed(() => props.icon || config.value.icon);
         </div>
 
         <!-- Description -->
-        <div class="text-sm text-white/85 leading-relaxed">
+        <div class="text-sm font-bold text-zinc-800 dark:text-white/85 leading-relaxed">
           <slot></slot>
         </div>
       </div>

content/blogs/showcase/index.md

@@ -35,18 +35,6 @@ categories: ["Development"]
 
 你也可以把它嵌入到任意文章中：`<GithubCard repo="owner/repo" />`。
 
-## 提示/警告（Warning）
-
-使用站内 `Warning` 组件展示一个警告框（支持命名 title 槽或 props 回退）：
-
-::Warning{title="注意"}
-这是通过 `::Warning` 区块语法渲染的示例警告。
-::
-
-或者使用组件语法（支持 slot 或 props）：
-
-<Warning title="另一个警告">这里是警告内容（slot）示例。</Warning>
-
 ## 告警框（Alert）
 
 `Alert` 组件支持多种类型，可以用来展示不同类型的通知信息：