From 9aa194c8cec8f2ff7c8378d453a7cb545aaddf3b Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Sun, 19 Jan 2025 15:31:03 +0800
Subject: [PATCH] docs: use block component example for code snippets

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 components/content/CodeSnippet.vue          |  2 +-
 content/2.components/2.docs/code-snippet.md | 72 +++++++++++++++++----
 2 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/components/content/CodeSnippet.vue b/components/content/CodeSnippet.vue
index a8139bf2..d79e66c2 100644
--- a/components/content/CodeSnippet.vue
+++ b/components/content/CodeSnippet.vue
@@ -26,7 +26,7 @@ const {
   highlights?: string;
   meta?: string;
   start?: number;
-  offset?: string;
+  offset?: number;
 }>();
 
 const loadedCode = ref('');
diff --git a/content/2.components/2.docs/code-snippet.md b/content/2.components/2.docs/code-snippet.md
index 895f2e48..087afce4 100644
--- a/content/2.components/2.docs/code-snippet.md
+++ b/content/2.components/2.docs/code-snippet.md
@@ -16,10 +16,20 @@ badges:
 
 ::stack
 ::div{class="p-4"}
-:code-snippet{file="/components/DarkModeToggle.vue" language="vue"}
+  ::code-snippet
+  ---
+  file: /components/DarkModeToggle.vue
+  language: vue
+  ---
+  ::
 ::
 ```mdc
-:code-snippet{file="/components/DarkModeToggle.vue" language="vue"}
+::code-snippet
+---
+file: /components/DarkModeToggle.vue
+language: vue
+---
+::
 ```
 ::
 
@@ -27,29 +37,59 @@ badges:
 
 ::stack
 ::div{class="p-4"}
-:code-snippet{file="/composables/useBreadcrumb.ts" language="ts" title="useBreadcrumb" highlights="9-11" meta="line-numbers height=300"}
+  ::code-snippet
+  ---
+  file: /composables/useBreadcrumb.ts
+  language: ts
+  title: useBreadcrumb
+  highlights: 9-11
+  meta: line-numbers height=300
+  ---
+  ::
 ::
 ```mdc
-:code-snippet{file="/composables/useBreadcrumb.ts" language="ts" title="useBreadcrumb" highlights="9-11" meta="line-numbers height=300"}
+::code-snippet
+---
+file: /composables/useBreadcrumb.ts
+language: ts
+title: useBreadcrumb
+highlights: 9-11
+meta: line-numbers height=300
+---
+::
 ```
 ::
 
 Translates to:
 
-````md
-```ts [useBreadcrumb] {9-11} line-numbers height=300
+`````md
+````ts [useBreadcrumb] {9-11} line-numbers height=300
 // code imported from /composables/useBreadcrumb.ts
-```
 ````
+`````
 
 ### Using Offset Props
 
 ::stack
 ::div{class="p-4"}
-:code-snippet{file="/composables/useBreadcrumb.ts" language="ts" start="6" offset="4"}
+  ::code-snippet
+  ---
+  file: /composables/useBreadcrumb.ts
+  language: ts
+  start: 6
+  offset: 4
+  ---
+  ::
 ::
 ```mdc
-:code-snippet{file="/composables/useBreadcrumb.ts" language="ts" start="6" offset="4"}
+::code-snippet
+---
+file: /composables/useBreadcrumb.ts
+language: ts
+start: 6
+offset: 4
+---
+::
 ```
 ::
 
@@ -57,10 +97,20 @@ Translates to:
 
 ::stack
 ::div{class="p-4"}
-:code-snippet{url="https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue" language="vue"}
+  ::code-snippet
+  ---
+  url: https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue
+  language: vue
+  ---
+  ::
 ::
 ```mdc
-:code-snippet{url="https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue" language="vue"}
+::code-snippet
+---
+url: https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue
+language: vue
+---
+::
 ```
 ::