feat: code block line numbers

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Nov 19, 2024 · 404e5a4 · 404e5a4
1 parent 2110ffb
commit 404e5a4
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
@@ -19,7 +19,11 @@
       <UiScrollArea>
         <div
           class="overflow-x-auto py-3 text-sm"
-          :class="[!inGroup && !filename && 'inline-copy', !language && 'pl-3', !inGroup]"
+          :class="[
+            !inGroup && !filename && 'inline-copy',
+            !language && 'pl-3', !inGroup,
+            showLineNumber && 'show-line-number',
+          ]"
         >
           <slot />
         </div>
@@ -58,8 +62,14 @@ const props = defineProps({
     type: Array as () => number[],
     default: () => [],
   },
+  meta: {
+    type: String,
+    default: null,
+  },
 });
 
+const showLineNumber = computed(() => props.meta.includes('line-numbers'));
+
 const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon));
 const icon = iconMap.get(props.filename?.toLowerCase()) || iconMap.get(props.language);
 </script>
@@ -75,7 +85,7 @@ const icon = iconMap.get(props.filename?.toLowerCase()) || iconMap.get(props.lan
 }
 
 .shiki .line.highlight {
-  background-color: hsl(var(--muted) / 0.8);
+  background-color: hsl(var(--muted) / 0.9);
 }
 
 .shiki .line {
@@ -86,4 +96,9 @@ const icon = iconMap.get(props.filename?.toLowerCase()) || iconMap.get(props.lan
 .inline-copy .line {
   padding-right: 2.75rem;
 }
+
+.show-line-number .line::before {
+  content: attr(line);
+  @apply text-sm w-5 inline-block text-right mr-4 text-muted-foreground;
+}
 </style>
diff --git a/components/content/ProsePre.vue b/components/content/ProsePre.vue
@@ -1,5 +1,11 @@
 <template>
-  <ProseCode :code="code" :language="language" :filename="filename" :highlights="highlights" :meta="meta">
+  <ProseCode
+    :code="code"
+    :language="language"
+    :filename="filename"
+    :highlights="highlights"
+    :meta="meta"
+  >
     <pre :class="$props.class" :style="style"><slot /></pre>
   </ProseCode>
 </template>

diff --git a/content/2.components/1.prose.md b/content/2.components/1.prose.md
@@ -71,6 +71,12 @@ icon: lucide:letter-text
     console.log('Code block');
   };
   ```
+
+  ```ts{1} [Line Numbers] line-numbers
+  // line-numbers is enabled
+  const line2 = 'This is line 2';
+  const line3 = 'This is line 3';
+  ```
   ::
 
   ````md [Code]
@@ -91,6 +97,12 @@ icon: lucide:letter-text
     console.log('Code block');
   };
   ```
+
+  ```ts{1} [Line Numbers] line-numbers
+  // line-numbers is enabled
+  const line2 = 'This is line 2';
+  const line3 = 'This is line 3';
+  ```
   ````
 ::