From 6ba692a3154f5bc60251cc4e6e61780bb6b46756 Mon Sep 17 00:00:00 2001
From: Soul <710790342@qq.com>
Date: Sat, 14 Sep 2024 04:24:54 +0800
Subject: [PATCH 1/2] fix pre tag overflow the wrap

---
 template/api-examples.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/template/api-examples.md b/template/api-examples.md
index 6bd8bb5c1700..d525dec8201f 100644
--- a/template/api-examples.md
+++ b/template/api-examples.md
@@ -47,3 +47,12 @@ const { site, theme, page, frontmatter } = useData()
 ## More
 
 Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
+
+<style scoped>
+pre {
+  width: 100%;
+  overflow: auto;
+  background-color: var(--vp-code-block-bg);
+  padding: 1em;
+}
+</style>

From 4778bc7ff28f1a30b7f9f465fe28c0d1e66c03f7 Mon Sep 17 00:00:00 2001
From: Soul <710790342@qq.com>
Date: Sun, 15 Sep 2024 13:34:02 +0800
Subject: [PATCH 2/2] fix the content of pre tag overflow the wrap

---
 template/api-examples.md | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/template/api-examples.md b/template/api-examples.md
index d525dec8201f..841a5dc66f7f 100644
--- a/template/api-examples.md
+++ b/template/api-examples.md
@@ -36,23 +36,22 @@ const { site, theme, page, frontmatter } = useData()
 ## Results
 
 ### Theme Data
-<pre>{{ theme }}</pre>
+<div class="language-json">
+  <pre>{{ theme }}</pre>  
+</div>
+
 
 ### Page Data
-<pre>{{ page }}</pre>
+<div class="language-json">
+  <pre>{{ page }}</pre>  
+</div>
 
 ### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
+<div class="language-json">
+  <pre>{{ frontmatter }}</pre>  
+</div>
 
 ## More
 
 Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
 
-<style scoped>
-pre {
-  width: 100%;
-  overflow: auto;
-  background-color: var(--vp-code-block-bg);
-  padding: 1em;
-}
-</style>