From 34f8b0ac8dc8a0a939afb1c5eeb3a75aece70e4e Mon Sep 17 00:00:00 2001
From: KadirBalku <Kadir.Balku@gmail.com>
Date: Mon, 25 Mar 2024 22:53:05 +0100
Subject: [PATCH] fix: Better styling of auto rendering example

---
 docs/utils/index.md | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/docs/utils/index.md b/docs/utils/index.md
index 069b270..949dea5 100644
--- a/docs/utils/index.md
+++ b/docs/utils/index.md
@@ -39,7 +39,9 @@ destroyStore(userList)
 coming soon...
 
 ## Bone rendering
-```js
+::: code-group
+
+```js:line-numbers [main.js]
 // Global Configuration in main.js of your Vue.js application 
 import { createApp } from "vue";
 
@@ -61,8 +63,9 @@ app.component("Bone", bone);
 app.component("Wrapper_nested", Wrapper_nested);
 
 app.mount("#app");
+```
 
-
+```vue:line-numbers [MyComponent.vue]
 // Example component for auto rendering
 <template>
 <div v-for="boneName in state.structure" :key="boneName">
@@ -80,7 +83,7 @@ app.mount("#app");
 
 // implement a button for example if u want to edit data after rendering
 <button @click="saveData">
-    ...
+    Save
 </button>
 </template>
 
@@ -106,13 +109,15 @@ export default {
 
         function saveData() {
             // use formData to update data on ViUR server with 'Request.securePost()'.
-            ...
+
+            // use your code here
         }
 
         onBeforeMount() {
             // use Request to update state.skellist and state.structure
             // Note: u can use component props instead and use the Request class in parent components
-            ...
+
+            // use your code here
         }
 
         return{
@@ -125,4 +130,5 @@ export default {
 }
 </script>
 
-```
\ No newline at end of file
+```
+:::
\ No newline at end of file