diff --git a/assets/styles/layout/_code.scss b/assets/styles/layout/_code.scss
index 3735a13f8..9d21c5797 100644
--- a/assets/styles/layout/_code.scss
+++ b/assets/styles/layout/_code.scss
@@ -27,7 +27,7 @@ pre[class*="language-"] {
     background: transparent;
     margin: 0;
     padding: 0;
-    max-height: 60rem;
+    max-height: 40rem;
     overflow: auto;
 
     &:before, &:after {
diff --git a/doc/accordion/BasicDoc.vue b/doc/accordion/BasicDoc.vue
index 503b82883..389269865 100644
--- a/doc/accordion/BasicDoc.vue
+++ b/doc/accordion/BasicDoc.vue
@@ -53,7 +53,8 @@ export default {
             culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -81,7 +82,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -109,7 +111,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/accordion/ControlledDoc.vue b/doc/accordion/ControlledDoc.vue
index 4ef93f09e..3a1b18ebe 100644
--- a/doc/accordion/ControlledDoc.vue
+++ b/doc/accordion/ControlledDoc.vue
@@ -65,7 +65,8 @@ export default {
             officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -106,7 +107,8 @@ export default {
             }
         }
     }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -143,7 +145,8 @@ export default {
     import { ref } from 'vue';
 
     const active = ref(0);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/accordion/DisabledDoc.vue b/doc/accordion/DisabledDoc.vue
index bef341147..bb9a2ed2f 100644
--- a/doc/accordion/DisabledDoc.vue
+++ b/doc/accordion/DisabledDoc.vue
@@ -55,7 +55,8 @@ export default {
         </p>
     </AccordionTab>
     <AccordionTab header="Header IV" :disabled="true"> </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -84,7 +85,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -113,7 +115,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/accordion/DynamicDoc.vue b/doc/accordion/DynamicDoc.vue
index fdf8601c7..cee87f650 100644
--- a/doc/accordion/DynamicDoc.vue
+++ b/doc/accordion/DynamicDoc.vue
@@ -27,7 +27,8 @@ export default {
     <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -51,7 +52,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ const tabs = ref([
     { title: 'Title 2', content: 'Content 2' },
     { title: 'Title 3', content: 'Content 3' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/accordion/MultipleDoc.vue b/doc/accordion/MultipleDoc.vue
index b45e90cff..2c770f710 100644
--- a/doc/accordion/MultipleDoc.vue
+++ b/doc/accordion/MultipleDoc.vue
@@ -53,7 +53,8 @@ export default {
             culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -81,7 +82,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -109,7 +111,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/accordion/TemplateDoc.vue b/doc/accordion/TemplateDoc.vue
index 7b1d2340b..8e8c6db31 100644
--- a/doc/accordion/TemplateDoc.vue
+++ b/doc/accordion/TemplateDoc.vue
@@ -78,7 +78,8 @@ export default {
             officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -134,7 +135,8 @@ export default {
     line-height: 1.5;
     margin: 0;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/accordion/pt/PTDoc.vue b/doc/accordion/pt/PTDoc.vue
index 58f860ab2..9279bd184 100644
--- a/doc/accordion/pt/PTDoc.vue
+++ b/doc/accordion/pt/PTDoc.vue
@@ -38,7 +38,8 @@ export default {
         }">
         <p>{{ tab.content }}</p>
     </AccordionTab>
-</Accordion>`,
+</Accordion>
+`,
                 options: `
 <template>
     <div class="card">
@@ -75,7 +76,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -107,7 +109,8 @@ const panelClass = (props, parent, index) => {
         }
     ];
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/accordion/theming/TailwindDoc.vue b/doc/accordion/theming/TailwindDoc.vue
index e81028ee5..02144e398 100644
--- a/doc/accordion/theming/TailwindDoc.vue
+++ b/doc/accordion/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     toggleable: {
         enterFromClass: 'max-h-0',
         enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
@@ -89,7 +90,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/animate/BasicDoc.vue b/doc/animate/BasicDoc.vue
index a0e840573..dd051aee9 100644
--- a/doc/animate/BasicDoc.vue
+++ b/doc/animate/BasicDoc.vue
@@ -31,7 +31,8 @@ export default {
     <div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
         <span class="text-900 text-3xl font-bold">flip up</span>
     </div>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center">
@@ -43,7 +44,8 @@ export default {
             <span class="text-900 text-3xl font-bold">flip up</span>
         </div>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center">
diff --git a/doc/autocomplete/AccessibilityDoc.vue b/doc/autocomplete/AccessibilityDoc.vue
index 3aed121d3..28257f832 100644
--- a/doc/autocomplete/AccessibilityDoc.vue
+++ b/doc/autocomplete/AccessibilityDoc.vue
@@ -168,7 +168,8 @@ export default {
 <span id="ac2">Email</span>
 <AutoComplete aria-labelledby="ac2" />
 
-<AutoComplete aria-label="City" />`
+<AutoComplete aria-label="City" />
+`
             }
         };
     }
diff --git a/doc/autocomplete/BasicDoc.vue b/doc/autocomplete/BasicDoc.vue
index 0f405724c..80e9285d2 100644
--- a/doc/autocomplete/BasicDoc.vue
+++ b/doc/autocomplete/BasicDoc.vue
@@ -16,7 +16,8 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" />`,
+<AutoComplete v-model="value" :suggestions="items" @complete="search" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -38,7 +39,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +57,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/DisabledDoc.vue b/doc/autocomplete/DisabledDoc.vue
index b5ec9650a..675113909 100644
--- a/doc/autocomplete/DisabledDoc.vue
+++ b/doc/autocomplete/DisabledDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<AutoComplete disabled placeholder="Disabled" />`,
+<AutoComplete disabled placeholder="Disabled" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -24,7 +25,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -34,7 +36,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/DropdownDoc.vue b/doc/autocomplete/DropdownDoc.vue
index 1d4c63ac7..0c7e73372 100644
--- a/doc/autocomplete/DropdownDoc.vue
+++ b/doc/autocomplete/DropdownDoc.vue
@@ -19,7 +19,8 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />`,
+<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +44,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -62,7 +64,8 @@ const search = (event) => {
 
     items.value = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/FloatLabelDoc.vue b/doc/autocomplete/FloatLabelDoc.vue
index fa0821dde..3143eb06f 100644
--- a/doc/autocomplete/FloatLabelDoc.vue
+++ b/doc/autocomplete/FloatLabelDoc.vue
@@ -22,7 +22,8 @@ export default {
 <span class="p-float-label">
     <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
     <label for="ac">Float Label</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -47,7 +48,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -67,7 +69,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/ForceSelectionDoc.vue b/doc/autocomplete/ForceSelectionDoc.vue
index 96e769ebf..91f366512 100644
--- a/doc/autocomplete/ForceSelectionDoc.vue
+++ b/doc/autocomplete/ForceSelectionDoc.vue
@@ -19,7 +19,8 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />`,
+<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -41,7 +42,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +60,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/GroupDoc.vue b/doc/autocomplete/GroupDoc.vue
index 810732874..8692ce65c 100644
--- a/doc/autocomplete/GroupDoc.vue
+++ b/doc/autocomplete/GroupDoc.vue
@@ -65,7 +65,8 @@ export default {
             <div>{{ slotProps.item.label }}</div>
         </div>
     </template>
-</AutoComplete>`,
+</AutoComplete>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -140,7 +141,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -209,7 +211,8 @@ const search = (event) => {
     filteredCities.value = newFilteredCities;
 
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/InvalidDoc.vue b/doc/autocomplete/InvalidDoc.vue
index 4f24ec053..c0e250725 100644
--- a/doc/autocomplete/InvalidDoc.vue
+++ b/doc/autocomplete/InvalidDoc.vue
@@ -16,7 +16,8 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />`,
+<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -38,7 +39,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +57,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/MultipleDoc.vue b/doc/autocomplete/MultipleDoc.vue
index 34d4853a6..60018de8b 100644
--- a/doc/autocomplete/MultipleDoc.vue
+++ b/doc/autocomplete/MultipleDoc.vue
@@ -16,7 +16,8 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />`,
+<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -38,7 +39,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
@@ -55,7 +57,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/ObjectsDoc.vue b/doc/autocomplete/ObjectsDoc.vue
index 0a2e2ecdc..41d3fd207 100644
--- a/doc/autocomplete/ObjectsDoc.vue
+++ b/doc/autocomplete/ObjectsDoc.vue
@@ -22,7 +22,8 @@ export default {
             filteredCountries: null,
             code: {
                 basic: `
-<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />`,
+<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +59,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -90,7 +92,8 @@ const search = (event) => {
         }
     }, 250);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/TemplateDoc.vue b/doc/autocomplete/TemplateDoc.vue
index 4724bc025..61977f157 100644
--- a/doc/autocomplete/TemplateDoc.vue
+++ b/doc/autocomplete/TemplateDoc.vue
@@ -35,7 +35,8 @@ export default {
             <div>{{ slotProps.option.name }}</div>
         </div>
     </template>
-</AutoComplete>`,
+</AutoComplete>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -78,7 +79,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -117,7 +119,8 @@ const search = (event) => {
         }
     }, 250);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/VirtualScrollDoc.vue b/doc/autocomplete/VirtualScrollDoc.vue
index 876443903..a58de6a10 100644
--- a/doc/autocomplete/VirtualScrollDoc.vue
+++ b/doc/autocomplete/VirtualScrollDoc.vue
@@ -21,7 +21,8 @@ export default {
             code: {
                 basic: `
 <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
-    :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />`,
+    :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -56,7 +57,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -85,7 +87,8 @@ const searchItems = (event) => {
 
     filteredItems.value = _filteredItems;
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/form/VeeValidateDoc.vue b/doc/autocomplete/form/VeeValidateDoc.vue
index 2d8aa9651..dde4ffbcd 100644
--- a/doc/autocomplete/form/VeeValidateDoc.vue
+++ b/doc/autocomplete/form/VeeValidateDoc.vue
@@ -54,7 +54,8 @@ export default {
             <Button type="submit" label="Submit" />
         </form>
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -106,7 +107,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/autocomplete/pt/PTDoc.vue b/doc/autocomplete/pt/PTDoc.vue
index ab62970d0..2b065ec30 100644
--- a/doc/autocomplete/pt/PTDoc.vue
+++ b/doc/autocomplete/pt/PTDoc.vue
@@ -34,7 +34,8 @@ export default {
             class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -66,7 +67,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -93,7 +95,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/autocomplete/theming/TailwindDoc.vue b/doc/autocomplete/theming/TailwindDoc.vue
index e8a6c2fb8..f1f78819e 100644
--- a/doc/autocomplete/theming/TailwindDoc.vue
+++ b/doc/autocomplete/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -107,7 +108,8 @@ const items = ref([]);
 const search = (event) => {
     items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/avatar/AvatarGroupDoc.vue b/doc/avatar/AvatarGroupDoc.vue
index e9fe57b5c..54914ab9d 100644
--- a/doc/avatar/AvatarGroupDoc.vue
+++ b/doc/avatar/AvatarGroupDoc.vue
@@ -28,7 +28,8 @@ export default {
     <Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle" />
     <Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
     <Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
-</AvatarGroup>`,
+</AvatarGroup>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -62,7 +64,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/avatar/IconDoc.vue b/doc/avatar/IconDoc.vue
index 17a60f2a9..06fea33e7 100644
--- a/doc/avatar/IconDoc.vue
+++ b/doc/avatar/IconDoc.vue
@@ -41,7 +41,8 @@ export default {
 <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
 <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
 
-<Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />`,
+<Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -70,7 +71,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -99,7 +101,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/avatar/ImageDoc.vue b/doc/avatar/ImageDoc.vue
index c2f86b95c..622aba1f4 100644
--- a/doc/avatar/ImageDoc.vue
+++ b/doc/avatar/ImageDoc.vue
@@ -37,7 +37,8 @@ export default {
 
 <Avatar v-badge.danger="4" class="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge" />
 
-<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />`,
+<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -64,7 +65,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -91,7 +93,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/avatar/LabelDoc.vue b/doc/avatar/LabelDoc.vue
index 28f2c8292..aec2fa890 100644
--- a/doc/avatar/LabelDoc.vue
+++ b/doc/avatar/LabelDoc.vue
@@ -41,7 +41,8 @@ export default {
 <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
 <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
 
-<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />`,
+<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
+`,
                 options: `
 <template>
     <div class="flex flex-wrap gap-5">
@@ -68,7 +69,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="flex flex-wrap gap-5">
@@ -95,7 +97,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/avatar/pt/PTDoc.vue b/doc/avatar/pt/PTDoc.vue
index 02a16e813..af8cc4cca 100644
--- a/doc/avatar/pt/PTDoc.vue
+++ b/doc/avatar/pt/PTDoc.vue
@@ -16,7 +16,8 @@ export default {
     :pt="{
         image: { class: 'w-4rem h-4rem' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
@@ -24,7 +25,8 @@ export default {
             image: { class: 'w-4rem h-4rem' }
         }"
     />
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
diff --git a/doc/avatar/theming/TailwindDoc.vue b/doc/avatar/theming/TailwindDoc.vue
index 9718052b1..a882558f6 100644
--- a/doc/avatar/theming/TailwindDoc.vue
+++ b/doc/avatar/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     avatar: {
         root: ({ props, parent }) => ({
             class: [
@@ -82,7 +83,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/badge/BasicDoc.vue b/doc/badge/BasicDoc.vue
index ac0baf0ab..f1cdb45ec 100644
--- a/doc/badge/BasicDoc.vue
+++ b/doc/badge/BasicDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Badge value="2"></Badge>`,
+<Badge value="2"></Badge>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -24,7 +25,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -34,7 +36,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/badge/ButtonDoc.vue b/doc/badge/ButtonDoc.vue
index a0e00bc5e..15d46cb76 100644
--- a/doc/badge/ButtonDoc.vue
+++ b/doc/badge/ButtonDoc.vue
@@ -16,7 +16,8 @@ export default {
             code: {
                 basic: `
 <Button type="button" label="Emails" badge="8" />
-<Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />`,
+<Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -27,7 +28,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -38,7 +40,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/badge/PositionDoc.vue b/doc/badge/PositionDoc.vue
index 68a00a14a..f3701992c 100644
--- a/doc/badge/PositionDoc.vue
+++ b/doc/badge/PositionDoc.vue
@@ -18,7 +18,8 @@ export default {
                 basic: `
 <i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
 <i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />
-<i v-badge.danger class="pi pi-envelope p-overlay-badge" style="font-size: 2rem" />`,
+<i v-badge.danger class="pi pi-envelope p-overlay-badge" style="font-size: 2rem" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-4">
@@ -30,7 +31,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-4">
@@ -42,7 +44,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/badge/SeverityDoc.vue b/doc/badge/SeverityDoc.vue
index 6a8d2870c..5aefac39c 100644
--- a/doc/badge/SeverityDoc.vue
+++ b/doc/badge/SeverityDoc.vue
@@ -22,7 +22,8 @@ export default {
 <Badge value="8" severity="success"></Badge>
 <Badge value="4" severity="info"></Badge>
 <Badge value="12" severity="warning"></Badge>
-<Badge value="3" severity="danger"></Badge>`,
+<Badge value="3" severity="danger"></Badge>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -36,7 +37,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -50,7 +52,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/badge/SizeDoc.vue b/doc/badge/SizeDoc.vue
index 1e6079b4f..a96d48c0e 100644
--- a/doc/badge/SizeDoc.vue
+++ b/doc/badge/SizeDoc.vue
@@ -18,7 +18,8 @@ export default {
                 basic: `
 <Badge value="6" size="xlarge" severity="success"></Badge>
 <Badge value="4" size="large" severity="warning"></Badge>
-<Badge value="2"></Badge>`,
+<Badge value="2"></Badge>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
@@ -30,7 +31,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
@@ -42,7 +44,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/badge/pt/PTDoc.vue b/doc/badge/pt/PTDoc.vue
index ebdb96083..6b8259d92 100644
--- a/doc/badge/pt/PTDoc.vue
+++ b/doc/badge/pt/PTDoc.vue
@@ -43,7 +43,8 @@ export default {
         }
     }"
     class="pi pi-calendar text-4xl"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center align-items-center gap-2">
@@ -66,7 +67,8 @@ export default {
             class="pi pi-calendar text-4xl"
         />
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center align-items-center gap-2">
diff --git a/doc/badge/theming/TailwindDoc.vue b/doc/badge/theming/TailwindDoc.vue
index 94bd69eb8..b452db482 100644
--- a/doc/badge/theming/TailwindDoc.vue
+++ b/doc/badge/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     directives: {
         badge: {
             root: ({ context }) => ({
@@ -83,7 +84,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/blockui/BasicDoc.vue b/doc/blockui/BasicDoc.vue
index 976d8996f..0dac2b33b 100644
--- a/doc/blockui/BasicDoc.vue
+++ b/doc/blockui/BasicDoc.vue
@@ -37,7 +37,8 @@ export default {
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
     </Panel>
-</BlockUI>`,
+</BlockUI>
+`,
                 options: `
 <template>
     <div class="card">
@@ -64,7 +65,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -87,7 +89,8 @@ export default {
 import { ref } from "vue";
 
 const blocked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/blockui/DocumentDoc.vue b/doc/blockui/DocumentDoc.vue
index 8ebf22fd0..5004afa40 100644
--- a/doc/blockui/DocumentDoc.vue
+++ b/doc/blockui/DocumentDoc.vue
@@ -17,7 +17,8 @@ export default {
             code: {
                 basic: `
 <BlockUI :blocked="blocked" fullScreen />
-<Button label="Block" @click="blocked = true" />`,
+<Button label="Block" @click="blocked = true" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -43,7 +44,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -63,7 +65,8 @@ const blockDocument = () => {
         blocked.value = false;
     }, 3000);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/blockui/pt/PTDoc.vue b/doc/blockui/pt/PTDoc.vue
index 07f74e1f2..5330b7fb0 100644
--- a/doc/blockui/pt/PTDoc.vue
+++ b/doc/blockui/pt/PTDoc.vue
@@ -27,7 +27,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</BlockUI>`,
+</BlockUI>
+`,
                 options: `
 <template>
     <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
@@ -36,7 +37,8 @@ export default {
             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
     </BlockUI>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
diff --git a/doc/blockui/theming/TailwindDoc.vue b/doc/blockui/theming/TailwindDoc.vue
index 8470d20dd..0b22d50c9 100644
--- a/doc/blockui/theming/TailwindDoc.vue
+++ b/doc/blockui/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     blockui: {
         root: 'relative',
         mask: 'bg-black/40'
@@ -46,7 +47,8 @@ export default {
 import { ref } from "vue";
 
 const blocked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/breadcrumb/BasicDoc.vue b/doc/breadcrumb/BasicDoc.vue
index 7f0cda45d..f5e1dd9b4 100644
--- a/doc/breadcrumb/BasicDoc.vue
+++ b/doc/breadcrumb/BasicDoc.vue
@@ -19,7 +19,8 @@ export default {
             items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
             code: {
                 basic: `
-<Breadcrumb :home="home" :model="items" />`,
+<Breadcrumb :home="home" :model="items" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -67,7 +69,8 @@ const items = ref([
     {label: 'Backpacks'},
     {label: 'Item'}
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/breadcrumb/RouterDoc.vue b/doc/breadcrumb/RouterDoc.vue
index 1db6febca..044d47581 100644
--- a/doc/breadcrumb/RouterDoc.vue
+++ b/doc/breadcrumb/RouterDoc.vue
@@ -48,7 +48,8 @@ export default {
             <span v-bind="props.label">{{ label }}</span>
         </a>
     </template>
-</Breadcrumb>`,
+</Breadcrumb>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -87,7 +88,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -122,7 +124,8 @@ const items = ref([
     {label: 'Backpacks'},
     {label: 'Item'}
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/breadcrumb/TemplateDoc.vue b/doc/breadcrumb/TemplateDoc.vue
index d2271f7c7..bf055101c 100644
--- a/doc/breadcrumb/TemplateDoc.vue
+++ b/doc/breadcrumb/TemplateDoc.vue
@@ -28,7 +28,8 @@ export default {
             <span :class="item.icon"></span>
         </a>
     </template>
-</Breadcrumb>`,
+</Breadcrumb>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -51,7 +52,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -71,7 +73,8 @@ import { ref } from "vue";
 const home = ref({ icon: 'pi pi-home', url: 'https://primevue.org/' });
 const items = ref([{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/breadcrumb/pt/PTDoc.vue b/doc/breadcrumb/pt/PTDoc.vue
index ad55160ea..74c8f282e 100644
--- a/doc/breadcrumb/pt/PTDoc.vue
+++ b/doc/breadcrumb/pt/PTDoc.vue
@@ -33,7 +33,8 @@ export default {
             class: props.index === items.length - 1 ? 'font-italic' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -66,7 +67,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -96,7 +98,8 @@ const items = ref([
     {label: 'Backpacks'},
     {label: 'Item'}
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/breadcrumb/theming/TailwindDoc.vue b/doc/breadcrumb/theming/TailwindDoc.vue
index d7d6c8c22..be761471b 100644
--- a/doc/breadcrumb/theming/TailwindDoc.vue
+++ b/doc/breadcrumb/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     breadcrumb: {
         root: {
             class: ['overflow-x-auto', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md p-4']
@@ -58,7 +59,8 @@ const items = ref([
     {label: 'Backpacks'},
     {label: 'Item'}
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/BadgesDoc.vue b/doc/button/BadgesDoc.vue
index c17f6ff03..ce28f7b00 100644
--- a/doc/button/BadgesDoc.vue
+++ b/doc/button/BadgesDoc.vue
@@ -16,7 +16,8 @@ export default {
             code: {
                 basic: `
 <Button type="button" label="Emails" badge="8" />
-<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />`,
+<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -26,7 +27,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -36,7 +38,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/BasicDoc.vue b/doc/button/BasicDoc.vue
index 88d32158c..7f4c60f84 100644
--- a/doc/button/BasicDoc.vue
+++ b/doc/button/BasicDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Submit" />`,
+<Button label="Submit" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/ButtonSetDoc.vue b/doc/button/ButtonSetDoc.vue
index 8036272c1..18b19e949 100644
--- a/doc/button/ButtonSetDoc.vue
+++ b/doc/button/ButtonSetDoc.vue
@@ -22,7 +22,8 @@ export default {
     <Button label="Save" icon="pi pi-check" />
     <Button label="Delete" icon="pi pi-trash" />
     <Button label="Cancel" icon="pi pi-times" />
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -35,7 +36,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -48,7 +50,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/DisabledDoc.vue b/doc/button/DisabledDoc.vue
index daf94fcb7..3ba0326b2 100644
--- a/doc/button/DisabledDoc.vue
+++ b/doc/button/DisabledDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Submit" disabled />`,
+<Button label="Submit" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/IconOnlyDoc.vue b/doc/button/IconOnlyDoc.vue
index 6f651d07d..6a4cf573e 100644
--- a/doc/button/IconOnlyDoc.vue
+++ b/doc/button/IconOnlyDoc.vue
@@ -100,7 +100,8 @@ export default {
 <Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
 <Button icon="pi pi-bell" severity="warning" text rounded aria-label="Notification" />
 <Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
-<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />`,
+<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -157,7 +158,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -214,7 +216,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/IconsDoc.vue b/doc/button/IconsDoc.vue
index d2fdbfb80..71dde88cf 100644
--- a/doc/button/IconsDoc.vue
+++ b/doc/button/IconsDoc.vue
@@ -18,7 +18,8 @@ export default {
                 basic: `
 <Button icon="pi pi-check" aria-label="Submit" />
 <Button label="Submit" icon="pi pi-check" />
-<Button label="Submit" icon="pi pi-check" iconPos="right" />`,
+<Button label="Submit" icon="pi pi-check" iconPos="right" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3  justify-content-center">
@@ -29,7 +30,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3  justify-content-center">
@@ -40,7 +42,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/LinkDoc.vue b/doc/button/LinkDoc.vue
index bb29e24af..22ea6835d 100644
--- a/doc/button/LinkDoc.vue
+++ b/doc/button/LinkDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Link" link />`,
+<Button label="Link" link />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/LoadingDoc.vue b/doc/button/LoadingDoc.vue
index 93f2a3878..fc780de64 100644
--- a/doc/button/LoadingDoc.vue
+++ b/doc/button/LoadingDoc.vue
@@ -15,7 +15,8 @@ export default {
             loading: false,
             code: {
                 basic: `
-<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />`,
+<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -39,7 +40,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +60,8 @@ const load = () => {
         loading.value = false;
     }, 2000);
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/button/OutlinedDoc.vue b/doc/button/OutlinedDoc.vue
index b437c8a49..4a0b1a500 100644
--- a/doc/button/OutlinedDoc.vue
+++ b/doc/button/OutlinedDoc.vue
@@ -26,7 +26,8 @@ export default {
 <Button label="Info" severity="info" outlined />
 <Button label="Warning" severity="warning" outlined />
 <Button label="Help" severity="help" outlined />
-<Button label="Danger" severity="danger" outlined />`,
+<Button label="Danger" severity="danger" outlined />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -41,7 +42,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -56,7 +58,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/RaisedDoc.vue b/doc/button/RaisedDoc.vue
index a6e87230b..f38bd57f8 100644
--- a/doc/button/RaisedDoc.vue
+++ b/doc/button/RaisedDoc.vue
@@ -26,7 +26,8 @@ export default {
 <Button label="Info" severity="info" raised />
 <Button label="Warning" severity="warning" raised />
 <Button label="Help" severity="help" raised />
-<Button label="Danger" severity="danger" raised />`,
+<Button label="Danger" severity="danger" raised />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -41,7 +42,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -56,7 +58,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/RaisedTextDoc.vue b/doc/button/RaisedTextDoc.vue
index 0643cfade..ff1f6488f 100644
--- a/doc/button/RaisedTextDoc.vue
+++ b/doc/button/RaisedTextDoc.vue
@@ -28,7 +28,8 @@ export default {
 <Button label="Warning" severity="warning" text raised />
 <Button label="Help" severity="help" text raised />
 <Button label="Danger" severity="danger" text raised />
-<Button label="Plain" plain text raised />`,
+<Button label="Plain" plain text raised />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -44,7 +45,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -60,7 +62,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/RoundedDoc.vue b/doc/button/RoundedDoc.vue
index 0cccd2082..0d5874680 100644
--- a/doc/button/RoundedDoc.vue
+++ b/doc/button/RoundedDoc.vue
@@ -26,7 +26,8 @@ export default {
 <Button label="Info" severity="info" rounded />
 <Button label="Warning" severity="warning" rounded />
 <Button label="Help" severity="help" rounded />
-<Button label="Danger" severity="danger" rounded />`,
+<Button label="Danger" severity="danger" rounded />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -41,7 +42,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -56,7 +58,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/SeverityDoc.vue b/doc/button/SeverityDoc.vue
index a650dddf8..fa8d93f03 100644
--- a/doc/button/SeverityDoc.vue
+++ b/doc/button/SeverityDoc.vue
@@ -26,7 +26,8 @@ export default {
 <Button label="Info" severity="info" />
 <Button label="Warning" severity="warning" />
 <Button label="Help" severity="help" />
-<Button label="Danger" severity="danger" />`,
+<Button label="Danger" severity="danger" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -41,7 +42,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -56,7 +58,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/SizesDoc.vue b/doc/button/SizesDoc.vue
index c60b69aef..4d6c44bef 100644
--- a/doc/button/SizesDoc.vue
+++ b/doc/button/SizesDoc.vue
@@ -18,7 +18,8 @@ export default {
                 basic: `
 <Button label="Small" icon="pi pi-check" size="small" />
 <Button label="Normal" icon="pi pi-check" />
-<Button label="Large" icon="pi pi-check" size="large" />`,
+<Button label="Large" icon="pi pi-check" size="large" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
@@ -29,7 +30,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
@@ -40,7 +42,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/TemplateDoc.vue b/doc/button/TemplateDoc.vue
index 67c3a8bf2..52aa1d027 100644
--- a/doc/button/TemplateDoc.vue
+++ b/doc/button/TemplateDoc.vue
@@ -18,7 +18,8 @@ export default {
                 basic: `
 <Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
     <img alt="logo" src="/images/logo.svg" class="h-2rem" />
-</Button>`,
+</Button>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -29,7 +30,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -40,7 +42,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/TextDoc.vue b/doc/button/TextDoc.vue
index fd4d8d29e..b254fd669 100644
--- a/doc/button/TextDoc.vue
+++ b/doc/button/TextDoc.vue
@@ -28,7 +28,8 @@ export default {
 <Button label="Warning" severity="warning" text />
 <Button label="Help" severity="help" text />
 <Button label="Danger" severity="danger" text />
-<Button label="Plain" plain text />`,
+<Button label="Plain" plain text />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -44,7 +45,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -60,7 +62,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/button/pt/PTDoc.vue b/doc/button/pt/PTDoc.vue
index 4b9384fcc..91f9e69ba 100644
--- a/doc/button/pt/PTDoc.vue
+++ b/doc/button/pt/PTDoc.vue
@@ -16,7 +16,8 @@ export default {
     :pt="{ 
         root: { class: 'bg-indigo-600 border-indigo-600' } 
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3 justify-content-center">
@@ -26,7 +27,8 @@ export default {
             }"
         />
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3 justify-content-center">
diff --git a/doc/button/theming/TailwindDoc.vue b/doc/button/theming/TailwindDoc.vue
index b0c692f4f..51cd43a7b 100644
--- a/doc/button/theming/TailwindDoc.vue
+++ b/doc/button/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     button: {
         root: ({ props, context }) => ({
             class: [
diff --git a/doc/calendar/AccessibilityDoc.vue b/doc/calendar/AccessibilityDoc.vue
index 76e4409ef..54d1cd345 100644
--- a/doc/calendar/AccessibilityDoc.vue
+++ b/doc/calendar/AccessibilityDoc.vue
@@ -202,7 +202,8 @@ export default {
 <span id="date2">Date</span>
 <Calendar aria-labelledby="date2" />
 
-<Calendar aria-label="Date" />`
+<Calendar aria-label="Date" />
+`
             }
         };
     }
diff --git a/doc/calendar/BasicDoc.vue b/doc/calendar/BasicDoc.vue
index af940fd2b..4cfbf95d9 100644
--- a/doc/calendar/BasicDoc.vue
+++ b/doc/calendar/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" />`,
+<Calendar v-model="date" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/ButtonBarDoc.vue b/doc/calendar/ButtonBarDoc.vue
index 09f9394f8..f45b54a46 100644
--- a/doc/calendar/ButtonBarDoc.vue
+++ b/doc/calendar/ButtonBarDoc.vue
@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" showButtonBar />`,
+<Calendar v-model="date" showButtonBar />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/DateTemplateDoc.vue b/doc/calendar/DateTemplateDoc.vue
index a5c517709..f551de20f 100644
--- a/doc/calendar/DateTemplateDoc.vue
+++ b/doc/calendar/DateTemplateDoc.vue
@@ -25,7 +25,8 @@ export default {
         <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
         <template v-else>{{ slotProps.date.day }}</template>
     </template>
-</Calendar>`,
+</Calendar>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -46,7 +47,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -63,7 +65,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/DisabledDoc.vue b/doc/calendar/DisabledDoc.vue
index 2f7576808..dd04bdb7e 100644
--- a/doc/calendar/DisabledDoc.vue
+++ b/doc/calendar/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" disabled />`,
+<Calendar v-model="date" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/FloatLabelDoc.vue b/doc/calendar/FloatLabelDoc.vue
index 53b680e90..339f43c44 100644
--- a/doc/calendar/FloatLabelDoc.vue
+++ b/doc/calendar/FloatLabelDoc.vue
@@ -21,7 +21,8 @@ export default {
 <span class="p-float-label">
     <Calendar v-model="date" inputId="birth_date" />
     <label for="birth_date">Birth Date</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -40,7 +41,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +57,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/FormatDoc.vue b/doc/calendar/FormatDoc.vue
index 6f9e804a7..b869493f5 100644
--- a/doc/calendar/FormatDoc.vue
+++ b/doc/calendar/FormatDoc.vue
@@ -34,7 +34,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" dateFormat="dd/mm/yy" />`,
+<Calendar v-model="date" dateFormat="dd/mm/yy" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -50,7 +51,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -62,7 +64,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/IconDoc.vue b/doc/calendar/IconDoc.vue
index cf63943f6..ad37b1a03 100644
--- a/doc/calendar/IconDoc.vue
+++ b/doc/calendar/IconDoc.vue
@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" showIcon />`,
+<Calendar v-model="date" showIcon />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/InlineDoc.vue b/doc/calendar/InlineDoc.vue
index 5e0b079bb..addd9f5ae 100644
--- a/doc/calendar/InlineDoc.vue
+++ b/doc/calendar/InlineDoc.vue
@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" inline showWeek />`,
+<Calendar v-model="date" inline showWeek />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/InvalidDoc.vue b/doc/calendar/InvalidDoc.vue
index d1faeb76a..d6049feed 100644
--- a/doc/calendar/InvalidDoc.vue
+++ b/doc/calendar/InvalidDoc.vue
@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" class="p-invalid" />`,
+<Calendar v-model="date" class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/MinMaxDoc.vue b/doc/calendar/MinMaxDoc.vue
index 496f60e83..50002f094 100644
--- a/doc/calendar/MinMaxDoc.vue
+++ b/doc/calendar/MinMaxDoc.vue
@@ -17,7 +17,8 @@ export default {
             maxDate: null,
             code: {
                 basic: `
-<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />`,
+<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -51,7 +52,8 @@ export default {
         this.maxDate.setFullYear(nextYear);
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -78,7 +80,8 @@ minDate.value.setMonth(prevMonth);
 minDate.value.setFullYear(prevYear);
 maxDate.value.setMonth(nextMonth);
 maxDate.value.setFullYear(nextYear);
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/calendar/MonthPickerDoc.vue b/doc/calendar/MonthPickerDoc.vue
index 9ca78a949..8080fc80f 100644
--- a/doc/calendar/MonthPickerDoc.vue
+++ b/doc/calendar/MonthPickerDoc.vue
@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" view="month" dateFormat="mm/yy" />`,
+<Calendar v-model="date" view="month" dateFormat="mm/yy" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/MultipleDoc.vue b/doc/calendar/MultipleDoc.vue
index 89fa42fbd..6e42da1d3 100644
--- a/doc/calendar/MultipleDoc.vue
+++ b/doc/calendar/MultipleDoc.vue
@@ -15,7 +15,8 @@ export default {
             dates: null,
             code: {
                 basic: `
-<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />`,
+<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const dates = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/MultipleMonthsDoc.vue b/doc/calendar/MultipleMonthsDoc.vue
index 3a61aaa35..3fe82289b 100644
--- a/doc/calendar/MultipleMonthsDoc.vue
+++ b/doc/calendar/MultipleMonthsDoc.vue
@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" :numberOfMonths="2" />`,
+<Calendar v-model="date" :numberOfMonths="2" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/RangeDoc.vue b/doc/calendar/RangeDoc.vue
index f9e95f0f3..f332d9417 100644
--- a/doc/calendar/RangeDoc.vue
+++ b/doc/calendar/RangeDoc.vue
@@ -15,7 +15,8 @@ export default {
             dates: null,
             code: {
                 basic: `
-<Calendar v-model="dates" selectionMode="range" :manualInput="false" />`,
+<Calendar v-model="dates" selectionMode="range" :manualInput="false" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const dates = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/TimeDoc.vue b/doc/calendar/TimeDoc.vue
index f126e6d7e..9677423aa 100644
--- a/doc/calendar/TimeDoc.vue
+++ b/doc/calendar/TimeDoc.vue
@@ -30,7 +30,8 @@ export default {
                 basic: `
 <Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
 <Calendar id="calendar-24h" v-model="datetime24h" showTime hourFormat="24" />
-<Calendar id="calendar-timeonly" v-model="time" timeOnly />`,
+<Calendar id="calendar-timeonly" v-model="time" timeOnly />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -59,7 +60,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -84,7 +86,8 @@ import { ref } from "vue";
 const datetime12h = ref();
 const datetime24h = ref();
 const time = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/TouchUIDoc.vue b/doc/calendar/TouchUIDoc.vue
index 5a2f33473..8c8e49bb3 100644
--- a/doc/calendar/TouchUIDoc.vue
+++ b/doc/calendar/TouchUIDoc.vue
@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" touchUI />`,
+<Calendar v-model="date" touchUI />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/YearPickerDoc.vue b/doc/calendar/YearPickerDoc.vue
index f65a3442e..f1926788a 100644
--- a/doc/calendar/YearPickerDoc.vue
+++ b/doc/calendar/YearPickerDoc.vue
@@ -15,7 +15,8 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" view="year" dateFormat="yy" />`,
+<Calendar v-model="date" view="year" dateFormat="yy" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/form/VeeValidateDoc.vue b/doc/calendar/form/VeeValidateDoc.vue
index ef63e0f46..b3b8d5044 100644
--- a/doc/calendar/form/VeeValidateDoc.vue
+++ b/doc/calendar/form/VeeValidateDoc.vue
@@ -54,7 +54,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -96,7 +97,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/calendar/pt/PTDoc.vue b/doc/calendar/pt/PTDoc.vue
index 539915e3a..fbd5b564a 100644
--- a/doc/calendar/pt/PTDoc.vue
+++ b/doc/calendar/pt/PTDoc.vue
@@ -31,7 +31,8 @@ export default {
             root: { class: 'bg-teal-500 border-teal-500' }
         }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -56,7 +57,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -77,7 +79,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/calendar/theming/TailwindDoc.vue b/doc/calendar/theming/TailwindDoc.vue
index c16e4a718..29f613170 100644
--- a/doc/calendar/theming/TailwindDoc.vue
+++ b/doc/calendar/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -161,7 +162,8 @@ export default {
 import { ref } from "vue";
 
 const date = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/card/AdvancedDoc.vue b/doc/card/AdvancedDoc.vue
index 068ceaea6..92fbbd3f5 100644
--- a/doc/card/AdvancedDoc.vue
+++ b/doc/card/AdvancedDoc.vue
@@ -46,7 +46,8 @@ export default {
         <Button icon="pi pi-check" label="Save" />
         <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
     </template>
-</Card>`,
+</Card>
+`,
                 options: `
 <template>
     <div class="card flex align-items-center justify-content-center">
@@ -71,7 +72,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex align-items-center justify-content-center">
@@ -96,7 +98,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/card/BasicDoc.vue b/doc/card/BasicDoc.vue
index a47632890..bbb64cf55 100644
--- a/doc/card/BasicDoc.vue
+++ b/doc/card/BasicDoc.vue
@@ -30,7 +30,8 @@ export default {
             quas!
         </p>
     </template>
-</Card>`,
+</Card>
+`,
                 options: `
 <template>
     <div class="card">
@@ -47,7 +48,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -64,7 +66,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/card/pt/PTDoc.vue b/doc/card/pt/PTDoc.vue
index ed10bb1b4..6214850d2 100644
--- a/doc/card/pt/PTDoc.vue
+++ b/doc/card/pt/PTDoc.vue
@@ -28,7 +28,8 @@ export default {
             quas!
         </p>
     </template>
-</Card>`,
+</Card>
+`,
                 options: `
 <template>
     <div class="card">
@@ -42,7 +43,8 @@ export default {
             </template>
         </Card>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/card/theming/TailwindDoc.vue b/doc/card/theming/TailwindDoc.vue
index f91d756be..c8a6855be 100644
--- a/doc/card/theming/TailwindDoc.vue
+++ b/doc/card/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     card: {
         root: {
             class: [
@@ -62,7 +63,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/carousel/BasicDoc.vue b/doc/carousel/BasicDoc.vue
index 7863246dc..b1520d120 100644
--- a/doc/carousel/BasicDoc.vue
+++ b/doc/carousel/BasicDoc.vue
@@ -69,7 +69,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -141,7 +142,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -209,7 +211,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/carousel/CircularDoc.vue b/doc/carousel/CircularDoc.vue
index 03a994231..f2eef2b40 100644
--- a/doc/carousel/CircularDoc.vue
+++ b/doc/carousel/CircularDoc.vue
@@ -71,7 +71,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -144,7 +145,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -213,7 +215,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/carousel/NumScrollDoc.vue b/doc/carousel/NumScrollDoc.vue
index 4a7dab3e9..633476450 100644
--- a/doc/carousel/NumScrollDoc.vue
+++ b/doc/carousel/NumScrollDoc.vue
@@ -71,7 +71,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -144,7 +145,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -213,7 +215,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/carousel/ResponsiveDoc.vue b/doc/carousel/ResponsiveDoc.vue
index 4eda87f70..a0c2a6ce6 100644
--- a/doc/carousel/ResponsiveDoc.vue
+++ b/doc/carousel/ResponsiveDoc.vue
@@ -74,7 +74,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -147,7 +148,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -215,7 +217,8 @@ const getSeverity = (status) => {
             return null;
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/carousel/VerticalDoc.vue b/doc/carousel/VerticalDoc.vue
index f9a7f62e4..10a70b403 100644
--- a/doc/carousel/VerticalDoc.vue
+++ b/doc/carousel/VerticalDoc.vue
@@ -72,7 +72,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -146,7 +147,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -215,7 +217,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/carousel/pt/PTDoc.vue b/doc/carousel/pt/PTDoc.vue
index 6911b981a..58e978a71 100644
--- a/doc/carousel/pt/PTDoc.vue
+++ b/doc/carousel/pt/PTDoc.vue
@@ -82,7 +82,8 @@ export default {
             </div>
         </div>
     </template>
-</Carousel>`,
+</Carousel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -162,7 +163,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -238,7 +240,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/carousel/theming/TailwindDoc.vue b/doc/carousel/theming/TailwindDoc.vue
index 9c72769db..50ac17489 100644
--- a/doc/carousel/theming/TailwindDoc.vue
+++ b/doc/carousel/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     carousel: {
         root: 'flex flex-col',
         content: 'flex flex-col overflow-auto',
@@ -136,7 +137,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/cascadeselect/AccessibilityDoc.vue b/doc/cascadeselect/AccessibilityDoc.vue
index 172c1cd91..9083174dc 100644
--- a/doc/cascadeselect/AccessibilityDoc.vue
+++ b/doc/cascadeselect/AccessibilityDoc.vue
@@ -127,7 +127,8 @@ export default {
 <span id="dd1"></span>Options</span>
 <CascadeSelect aria-labelledby="dd1" />
 
-<CascadeSelect aria-label="Options" />`
+<CascadeSelect aria-label="Options" />
+`
             }
         };
     }
diff --git a/doc/cascadeselect/BasicDoc.vue b/doc/cascadeselect/BasicDoc.vue
index 4f7119050..5e71cd959 100644
--- a/doc/cascadeselect/BasicDoc.vue
+++ b/doc/cascadeselect/BasicDoc.vue
@@ -93,7 +93,8 @@ export default {
             code: {
                 basic: `
 <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />`,
+    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -184,7 +185,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -271,7 +273,8 @@ const countries = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/cascadeselect/DisabledDoc.vue b/doc/cascadeselect/DisabledDoc.vue
index 2062ca28e..adf548a48 100644
--- a/doc/cascadeselect/DisabledDoc.vue
+++ b/doc/cascadeselect/DisabledDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />`,
+<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -24,7 +25,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -34,7 +36,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/cascadeselect/FloatLabelDoc.vue b/doc/cascadeselect/FloatLabelDoc.vue
index 6ceff09a6..694d3fb47 100644
--- a/doc/cascadeselect/FloatLabelDoc.vue
+++ b/doc/cascadeselect/FloatLabelDoc.vue
@@ -96,7 +96,8 @@ export default {
     <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
         :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     <label for="cs-city">City</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -190,7 +191,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -280,7 +282,8 @@ const countries = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/cascadeselect/InvalidDoc.vue b/doc/cascadeselect/InvalidDoc.vue
index fa7856371..701ca9e8f 100644
--- a/doc/cascadeselect/InvalidDoc.vue
+++ b/doc/cascadeselect/InvalidDoc.vue
@@ -90,7 +90,8 @@ export default {
             code: {
                 basic: `
 <CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />`,
+    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -181,7 +182,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -268,7 +270,8 @@ const countries = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/cascadeselect/LoadingStateDoc.vue b/doc/cascadeselect/LoadingStateDoc.vue
index f117b9a2a..eb271200f 100644
--- a/doc/cascadeselect/LoadingStateDoc.vue
+++ b/doc/cascadeselect/LoadingStateDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />`,
+<CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -24,7 +25,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -34,7 +36,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/cascadeselect/TemplateDoc.vue b/doc/cascadeselect/TemplateDoc.vue
index 9cba80708..13fdda079 100644
--- a/doc/cascadeselect/TemplateDoc.vue
+++ b/doc/cascadeselect/TemplateDoc.vue
@@ -111,7 +111,8 @@ export default {
             <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
         </div>
     </template>
-</CascadeSelect>`,
+</CascadeSelect>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -211,7 +212,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -307,7 +309,8 @@ const countries = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/cascadeselect/form/VeeValidateDoc.vue b/doc/cascadeselect/form/VeeValidateDoc.vue
index d767c7377..9ad869073 100644
--- a/doc/cascadeselect/form/VeeValidateDoc.vue
+++ b/doc/cascadeselect/form/VeeValidateDoc.vue
@@ -138,7 +138,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -259,7 +260,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/cascadeselect/pt/PTDoc.vue b/doc/cascadeselect/pt/PTDoc.vue
index 044d74e55..0e0f74689 100644
--- a/doc/cascadeselect/pt/PTDoc.vue
+++ b/doc/cascadeselect/pt/PTDoc.vue
@@ -107,7 +107,8 @@ export default {
     :pt="{
         root: { style: { minWidth: '14rem' } }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -207,7 +208,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -303,7 +305,8 @@ const countries = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/cascadeselect/theming/TailwindDoc.vue b/doc/cascadeselect/theming/TailwindDoc.vue
index ab6d61052..7252ebcac 100644
--- a/doc/cascadeselect/theming/TailwindDoc.vue
+++ b/doc/cascadeselect/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -147,7 +148,8 @@ const countries = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chart/AccessibilityDoc.vue b/doc/chart/AccessibilityDoc.vue
index 7435c5d43..1d070f8fa 100644
--- a/doc/chart/AccessibilityDoc.vue
+++ b/doc/chart/AccessibilityDoc.vue
@@ -16,7 +16,8 @@ export default {
         return {
             code: {
                 basic: `
-<Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" />`
+<Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" />
+`
             }
         };
     }
diff --git a/doc/chart/BasicDoc.vue b/doc/chart/BasicDoc.vue
index b5f0b8aa9..7843d79bd 100644
--- a/doc/chart/BasicDoc.vue
+++ b/doc/chart/BasicDoc.vue
@@ -22,7 +22,8 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" />`,
+<Chart type="bar" :data="chartData" :options="chartOptions" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -94,7 +95,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -162,7 +164,8 @@ const setChartOptions = () => {
         }
     };
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/ComboDoc.vue b/doc/chart/ComboDoc.vue
index b4f649a2c..9e75db236 100644
--- a/doc/chart/ComboDoc.vue
+++ b/doc/chart/ComboDoc.vue
@@ -16,7 +16,8 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -107,7 +108,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -194,7 +196,8 @@ const setChartOptions = () => {
         }
     };
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/DoughnutDoc.vue b/doc/chart/DoughnutDoc.vue
index e9a3a1804..66945b26f 100644
--- a/doc/chart/DoughnutDoc.vue
+++ b/doc/chart/DoughnutDoc.vue
@@ -18,7 +18,8 @@ export default {
             },
             code: {
                 basic: `
-<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -56,7 +57,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -90,7 +92,8 @@ const setChartData = () => {
         ]
     };
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/HorizontalBarDoc.vue b/doc/chart/HorizontalBarDoc.vue
index 1fa0fe6f7..cb1976a87 100644
--- a/doc/chart/HorizontalBarDoc.vue
+++ b/doc/chart/HorizontalBarDoc.vue
@@ -16,7 +16,8 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />`,
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
+`,
                 options: `
 <template>
     <div class="card">
@@ -102,7 +103,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -184,7 +186,8 @@ const setChartOptions = () => {
         }
     };
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/LineDoc.vue b/doc/chart/LineDoc.vue
index 646e3786f..a6006e8eb 100644
--- a/doc/chart/LineDoc.vue
+++ b/doc/chart/LineDoc.vue
@@ -16,7 +16,8 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -98,7 +99,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -176,7 +178,8 @@ const setChartOptions = () => {
         }
     };
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/LineStylesDoc.vue b/doc/chart/LineStylesDoc.vue
index e5aec7f95..96eb244ce 100644
--- a/doc/chart/LineStylesDoc.vue
+++ b/doc/chart/LineStylesDoc.vue
@@ -16,7 +16,8 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -107,7 +108,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -194,7 +196,8 @@ const setChartOptions = () => {
         }
     };
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/MultiAxisDoc.vue b/doc/chart/MultiAxisDoc.vue
index 5ca0f7ca8..187d0f8c0 100644
--- a/doc/chart/MultiAxisDoc.vue
+++ b/doc/chart/MultiAxisDoc.vue
@@ -16,7 +16,8 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -116,7 +117,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -212,7 +214,8 @@ const setChartOptions = () => {
         }
     };
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/PieChartDoc.vue b/doc/chart/PieChartDoc.vue
index b1a258bc6..495a07b7d 100644
--- a/doc/chart/PieChartDoc.vue
+++ b/doc/chart/PieChartDoc.vue
@@ -24,7 +24,8 @@ export default {
             },
             code: {
                 basic: `
-<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -68,7 +69,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -108,7 +110,8 @@ const setChartData = () => {
         ]
     };
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/PolarAreaDoc.vue b/doc/chart/PolarAreaDoc.vue
index 0892e3674..e7ff2a161 100644
--- a/doc/chart/PolarAreaDoc.vue
+++ b/doc/chart/PolarAreaDoc.vue
@@ -16,7 +16,8 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -81,7 +82,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -142,7 +144,8 @@ const setChartOptions = () => {
         }
     };
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/RadarDoc.vue b/doc/chart/RadarDoc.vue
index 01855b3b2..77d6580fc 100644
--- a/doc/chart/RadarDoc.vue
+++ b/doc/chart/RadarDoc.vue
@@ -16,7 +16,8 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -89,7 +90,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -158,7 +160,8 @@ const setChartOptions = () => {
         }
     };
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/StackedBarDoc.vue b/doc/chart/StackedBarDoc.vue
index 3b135b5fb..d1f6d3693 100644
--- a/doc/chart/StackedBarDoc.vue
+++ b/doc/chart/StackedBarDoc.vue
@@ -16,7 +16,8 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -108,7 +109,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -196,7 +198,8 @@ const setChartOptions = () =>  {
         }
     };
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/VerticalBarDoc.vue b/doc/chart/VerticalBarDoc.vue
index 5077120ee..dc856443e 100644
--- a/doc/chart/VerticalBarDoc.vue
+++ b/doc/chart/VerticalBarDoc.vue
@@ -16,7 +16,8 @@ export default {
             chartOptions: null,
             code: {
                 basic: `
-<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />`,
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
+`,
                 options: `
 <template>
     <div class="card">
@@ -101,7 +102,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -182,7 +184,8 @@ const setChartOptions = () => {
         }
     };
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/pt/PTDoc.vue b/doc/chart/pt/PTDoc.vue
index ee7ca7f5b..ab3b9681e 100644
--- a/doc/chart/pt/PTDoc.vue
+++ b/doc/chart/pt/PTDoc.vue
@@ -38,7 +38,8 @@ export default {
     :pt="{
         root: { class: 'w-full md:w-30rem' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -89,7 +90,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -136,7 +138,8 @@ const setChartData = () => {
         ]
     };
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/chart/theming/TailwindDoc.vue b/doc/chart/theming/TailwindDoc.vue
index 9b4700fbd..3fa45d933 100644
--- a/doc/chart/theming/TailwindDoc.vue
+++ b/doc/chart/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     chart: {
         root: 'relative'
     }
@@ -52,7 +53,8 @@ const chartOptions = ref({
         }
     }
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/checkbox/BasicDoc.vue b/doc/checkbox/BasicDoc.vue
index f5c7d0633..8ad31d9b4 100644
--- a/doc/checkbox/BasicDoc.vue
+++ b/doc/checkbox/BasicDoc.vue
@@ -16,6 +16,7 @@ export default {
             code: {
                 basic: `
 <Checkbox v-model="checked" :binary="true" />
+
 `,
                 options: `
 <template>
@@ -33,6 +34,7 @@ export default {
     }
 };
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/checkbox/DisabledDoc.vue b/doc/checkbox/DisabledDoc.vue
index 69d008084..38a2cfef5 100644
--- a/doc/checkbox/DisabledDoc.vue
+++ b/doc/checkbox/DisabledDoc.vue
@@ -16,6 +16,7 @@ export default {
             code: {
                 basic: `
 <Checkbox v-model="checked" disabled />
+
 `,
                 options: `
 <template>
@@ -33,6 +34,7 @@ export default {
     }
 };
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/checkbox/DynamicDoc.vue b/doc/checkbox/DynamicDoc.vue
index 5b221070d..161489459 100644
--- a/doc/checkbox/DynamicDoc.vue
+++ b/doc/checkbox/DynamicDoc.vue
@@ -30,6 +30,7 @@ export default {
     <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
     <label :for="category.key">{{ category.name }}</label>
 </div>
+
 `,
                 options: `
 <template>
@@ -58,6 +59,7 @@ export default {
     }
 };
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/checkbox/GroupDoc.vue b/doc/checkbox/GroupDoc.vue
index 2c9a83498..7eeb6a623 100644
--- a/doc/checkbox/GroupDoc.vue
+++ b/doc/checkbox/GroupDoc.vue
@@ -48,6 +48,7 @@ export default {
         <label for="ingredient4" class="ml-2"> Onion </label>
     </div>
 </div>
+
 `,
                 options: `
 <template>
@@ -80,6 +81,7 @@ export default {
     }
 };
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/checkbox/InvalidDoc.vue b/doc/checkbox/InvalidDoc.vue
index c7bbc57a7..bd13809ac 100644
--- a/doc/checkbox/InvalidDoc.vue
+++ b/doc/checkbox/InvalidDoc.vue
@@ -16,6 +16,7 @@ export default {
             code: {
                 basic: `
 <Checkbox v-model="checked" class="p-invalid" />
+
 `,
                 options: `
 <template>
@@ -33,6 +34,7 @@ export default {
     }
 };
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/checkbox/form/VeeValidateDoc.vue b/doc/checkbox/form/VeeValidateDoc.vue
index 62e372098..2cb30fd08 100644
--- a/doc/checkbox/form/VeeValidateDoc.vue
+++ b/doc/checkbox/form/VeeValidateDoc.vue
@@ -54,6 +54,7 @@ export default {
         <Toast />
     </div>
 </template>
+
 `,
                 options: `
 <template>
@@ -96,6 +97,7 @@ export default {
     }
 };
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/checkbox/pt/PTDoc.vue b/doc/checkbox/pt/PTDoc.vue
index 60d305eb3..a96d4de45 100644
--- a/doc/checkbox/pt/PTDoc.vue
+++ b/doc/checkbox/pt/PTDoc.vue
@@ -30,6 +30,7 @@ export default {
         })
     }"
 />
+
 `,
                 options: `
 <template>
@@ -55,6 +56,7 @@ export default {
     }
 };
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/chip/BasicDoc.vue b/doc/chip/BasicDoc.vue
index 34b16499b..0d54b5bff 100644
--- a/doc/chip/BasicDoc.vue
+++ b/doc/chip/BasicDoc.vue
@@ -20,7 +20,8 @@ export default {
 <Chip label="Action" />
 <Chip label="Comedy" />
 <Chip label="Mystery" />
-<Chip label="Thriller" removable />`,
+<Chip label="Thriller" removable />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-2">
@@ -33,7 +34,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-2">
@@ -46,7 +48,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chip/IconDoc.vue b/doc/chip/IconDoc.vue
index 8405f0b0d..339ff9656 100644
--- a/doc/chip/IconDoc.vue
+++ b/doc/chip/IconDoc.vue
@@ -20,7 +20,8 @@ export default {
 <Chip label="Apple" icon="pi pi-apple" />
 <Chip label="Facebook" icon="pi pi-facebook" />
 <Chip label="Google" icon="pi pi-google" />
-<Chip label="Microsoft" icon="pi pi-microsoft" removable />`,
+<Chip label="Microsoft" icon="pi pi-microsoft" removable />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-2">
@@ -32,7 +33,8 @@ export default {
 </template>
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-2">
@@ -44,7 +46,8 @@ export default {
 </template>
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chip/ImageDoc.vue b/doc/chip/ImageDoc.vue
index 381e29686..a2dcbfe07 100644
--- a/doc/chip/ImageDoc.vue
+++ b/doc/chip/ImageDoc.vue
@@ -20,7 +20,8 @@ export default {
 <Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" />
 <Chip label="Asiya Javayant" image="/images/avatar/asiyajavayant.png" />
 <Chip label="Onyama Limba" image="/images/avatar/onyamalimba.png" />
-<Chip label="Xuxue Feng" image="/images/avatar/xuxuefeng.png" removable />`,
+<Chip label="Xuxue Feng" image="/images/avatar/xuxuefeng.png" removable />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-2">
@@ -33,7 +34,8 @@ export default {
 
 <script >
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-2">
@@ -46,7 +48,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chip/TemplateDoc.vue b/doc/chip/TemplateDoc.vue
index f94347d05..ed06bd943 100644
--- a/doc/chip/TemplateDoc.vue
+++ b/doc/chip/TemplateDoc.vue
@@ -20,7 +20,8 @@ export default {
 <Chip class="pl-0 pr-3">
     <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
     <span class="ml-2 font-medium">PRIME</span>
-</Chip>`,
+</Chip>
+`,
                 options: `
 <template>
     <div class="card">
@@ -33,7 +34,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -46,7 +48,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chip/pt/PTDoc.vue b/doc/chip/pt/PTDoc.vue
index f574b4adb..a61aadce3 100644
--- a/doc/chip/pt/PTDoc.vue
+++ b/doc/chip/pt/PTDoc.vue
@@ -26,7 +26,8 @@ export default {
         root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
         label: { class: 'text-white' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <Chip
@@ -37,7 +38,8 @@ export default {
             label: { class: 'text-white' }
         }"
     />
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <Chip
diff --git a/doc/chip/theming/TailwindDoc.vue b/doc/chip/theming/TailwindDoc.vue
index 7f7b97259..39c5af656 100644
--- a/doc/chip/theming/TailwindDoc.vue
+++ b/doc/chip/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     chip: {
         root: {
             class: ['inline-flex items-center', 'bg-gray-200 text-gray-800 rounded-[16px] px-3 dark:text-white/80 dark:bg-gray-900']
@@ -44,7 +45,8 @@ export default {
 </template>
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chips/AccessibilityDoc.vue b/doc/chips/AccessibilityDoc.vue
index 7ce48f87a..34189f29b 100644
--- a/doc/chips/AccessibilityDoc.vue
+++ b/doc/chips/AccessibilityDoc.vue
@@ -78,7 +78,8 @@ export default {
 <span id="chips2">Tags</span>
 <Chips aria-labelledby="chips2" />
 
-<Chips aria-label="Tags" />`
+<Chips aria-label="Tags" />
+`
             }
         };
     }
diff --git a/doc/chips/BasicDoc.vue b/doc/chips/BasicDoc.vue
index 6908bbcc7..10e05aae0 100644
--- a/doc/chips/BasicDoc.vue
+++ b/doc/chips/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Chips v-model="value" />`,
+<Chips v-model="value" />
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chips/DisabledDoc.vue b/doc/chips/DisabledDoc.vue
index c988ba8ba..5ccf6232e 100644
--- a/doc/chips/DisabledDoc.vue
+++ b/doc/chips/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Chips v-model="value" disabled />`,
+<Chips v-model="value" disabled />
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chips/FloatLabelDoc.vue b/doc/chips/FloatLabelDoc.vue
index 4be48d0a2..54fbdef77 100644
--- a/doc/chips/FloatLabelDoc.vue
+++ b/doc/chips/FloatLabelDoc.vue
@@ -21,7 +21,8 @@ export default {
 <span class="p-float-label">
     <Chips id="chips" v-model="value" />
     <label for="chips">Chips</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -40,7 +41,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
@@ -55,7 +57,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chips/InvalidDoc.vue b/doc/chips/InvalidDoc.vue
index b539949f5..a3d0856a6 100644
--- a/doc/chips/InvalidDoc.vue
+++ b/doc/chips/InvalidDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Chips v-model="value" class="p-invalid" />`,
+<Chips v-model="value" class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chips/SeparatorDoc.vue b/doc/chips/SeparatorDoc.vue
index 886916721..165ac6955 100644
--- a/doc/chips/SeparatorDoc.vue
+++ b/doc/chips/SeparatorDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Chips v-model="value" separator=","  />`,
+<Chips v-model="value" separator=","  />
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -31,7 +32,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chips/TemplateDoc.vue b/doc/chips/TemplateDoc.vue
index d9302acb1..d521a35d8 100644
--- a/doc/chips/TemplateDoc.vue
+++ b/doc/chips/TemplateDoc.vue
@@ -29,7 +29,8 @@ export default {
             <i class="pi pi-user-plus" style="font-size: 14px"></i>
         </div>
     </template>
-</Chips>`,
+</Chips>
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -52,7 +53,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
@@ -71,7 +73,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chips/form/VeeValidateDoc.vue b/doc/chips/form/VeeValidateDoc.vue
index cafb23cf1..f07869c2d 100644
--- a/doc/chips/form/VeeValidateDoc.vue
+++ b/doc/chips/form/VeeValidateDoc.vue
@@ -52,7 +52,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -93,7 +94,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
diff --git a/doc/chips/pt/PTDoc.vue b/doc/chips/pt/PTDoc.vue
index 01b239c0f..d7820a737 100644
--- a/doc/chips/pt/PTDoc.vue
+++ b/doc/chips/pt/PTDoc.vue
@@ -27,7 +27,8 @@ export default {
         container: { class: 'flex-1' },
         token: { class: 'bg-primary' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card">
@@ -50,7 +51,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -69,7 +71,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/chips/theming/TailwindDoc.vue b/doc/chips/theming/TailwindDoc.vue
index c959b8007..ad8f3d6f2 100644
--- a/doc/chips/theming/TailwindDoc.vue
+++ b/doc/chips/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     chips: {
         root: ({ props }) => ({
             class: [
@@ -60,7 +61,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/colorpicker/BasicDoc.vue b/doc/colorpicker/BasicDoc.vue
index c004bc8da..45ce3927e 100644
--- a/doc/colorpicker/BasicDoc.vue
+++ b/doc/colorpicker/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             color: null,
             code: {
                 basic: `
-<ColorPicker v-model="color" />`,
+<ColorPicker v-model="color" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const color = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/colorpicker/DisabledDoc.vue b/doc/colorpicker/DisabledDoc.vue
index 5a783e138..eef190b68 100644
--- a/doc/colorpicker/DisabledDoc.vue
+++ b/doc/colorpicker/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             color: null,
             code: {
                 basic: `
-<ColorPicker v-model="color" disabled />`,
+<ColorPicker v-model="color" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const color = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/colorpicker/FormatDoc.vue b/doc/colorpicker/FormatDoc.vue
index cedcd8f52..cd64275c0 100644
--- a/doc/colorpicker/FormatDoc.vue
+++ b/doc/colorpicker/FormatDoc.vue
@@ -33,7 +33,8 @@ export default {
                 basic: `
 <ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
 <ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-3" />
-<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />`,
+<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3">
@@ -65,7 +66,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3">
@@ -93,7 +95,8 @@ import { ref } from "vue";
 const colorHEX = ref('6466f1');
 const colorRGB = ref({ r: 100, g: 102, b: 241 });
 const colorHSB = ref({ h: 239, s: 59, b: 95 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/colorpicker/InlineDoc.vue b/doc/colorpicker/InlineDoc.vue
index f8738f558..58dd6f49d 100644
--- a/doc/colorpicker/InlineDoc.vue
+++ b/doc/colorpicker/InlineDoc.vue
@@ -15,7 +15,8 @@ export default {
             color: null,
             code: {
                 basic: `
-<ColorPicker v-model="color" inline />`,
+<ColorPicker v-model="color" inline />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const color = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/colorpicker/form/VeeValidateDoc.vue b/doc/colorpicker/form/VeeValidateDoc.vue
index 96a1a0522..8244b6783 100644
--- a/doc/colorpicker/form/VeeValidateDoc.vue
+++ b/doc/colorpicker/form/VeeValidateDoc.vue
@@ -51,7 +51,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -91,7 +92,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/colorpicker/pt/PTDoc.vue b/doc/colorpicker/pt/PTDoc.vue
index da21da2e8..c452931a5 100644
--- a/doc/colorpicker/pt/PTDoc.vue
+++ b/doc/colorpicker/pt/PTDoc.vue
@@ -25,7 +25,8 @@ export default {
     :pt="{
         colorHandler: { class: 'w-1rem h-1rem' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -47,7 +48,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -65,7 +67,8 @@ export default {
 import { ref } from "vue";
 
 const color = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/colorpicker/theming/TailwindDoc.vue b/doc/colorpicker/theming/TailwindDoc.vue
index 547aa4c60..ab41a1484 100644
--- a/doc/colorpicker/theming/TailwindDoc.vue
+++ b/doc/colorpicker/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -82,7 +83,8 @@ export default {
 import { ref } from "vue";
 
 const color = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/colors/OverviewDoc.vue b/doc/colors/OverviewDoc.vue
index a492b460a..621fa530d 100644
--- a/doc/colors/OverviewDoc.vue
+++ b/doc/colors/OverviewDoc.vue
@@ -72,7 +72,6 @@ export default {
         return {
             code: {
                 basic: `
-
 <div style="backgroundColor: var(--highlight-bg), color: var(--highlight-text-color), borderRadius: var(--border-radius), padding: 3rem">Highlighted Item</div>
 <div style="backgroundColor: var(--primary-color), color: var(--primary-color-text), borderRadius: var(--border-radius), padding: 3rem">Primary Color</div>
 `
diff --git a/doc/confirmdialog/AccessibilityDoc.vue b/doc/confirmdialog/AccessibilityDoc.vue
index e6bb57f79..904e80b0e 100644
--- a/doc/confirmdialog/AccessibilityDoc.vue
+++ b/doc/confirmdialog/AccessibilityDoc.vue
@@ -98,7 +98,8 @@ const openDialog = () => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/confirmdialog/BasicDoc.vue b/doc/confirmdialog/BasicDoc.vue
index 9f8f18fcc..bfbcb4bbf 100644
--- a/doc/confirmdialog/BasicDoc.vue
+++ b/doc/confirmdialog/BasicDoc.vue
@@ -18,7 +18,8 @@ export default {
                 basic: `
 <ConfirmDialog></ConfirmDialog>
 <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>`,
+<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+`,
                 options: `
 <template>
     <Toast />
@@ -61,7 +62,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <Toast />
@@ -107,7 +109,8 @@ const confirm2 = () => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/confirmdialog/PositionDoc.vue b/doc/confirmdialog/PositionDoc.vue
index ed1652971..adef71079 100644
--- a/doc/confirmdialog/PositionDoc.vue
+++ b/doc/confirmdialog/PositionDoc.vue
@@ -42,7 +42,8 @@ export default {
     <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <Toast />
@@ -85,7 +86,8 @@ export default {
         },
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <Toast />
@@ -130,7 +132,8 @@ const confirmPosition = (position) => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/confirmdialog/TemplateDoc.vue b/doc/confirmdialog/TemplateDoc.vue
index 938b36d66..8fe5300af 100644
--- a/doc/confirmdialog/TemplateDoc.vue
+++ b/doc/confirmdialog/TemplateDoc.vue
@@ -30,7 +30,8 @@ export default {
         </div>
     </template>
 </ConfirmDialog>
-<Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>`,
+<Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+`,
                 options: `
 <template>
     <ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
@@ -68,7 +69,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
@@ -108,7 +110,8 @@ const showTemplate = () => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/confirmdialog/pt/PTDoc.vue b/doc/confirmdialog/pt/PTDoc.vue
index b61014d66..33d312a98 100644
--- a/doc/confirmdialog/pt/PTDoc.vue
+++ b/doc/confirmdialog/pt/PTDoc.vue
@@ -18,7 +18,8 @@ export default {
     :pt="{
         headerTitle: { class: 'text-primary' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <ConfirmDialog
@@ -51,7 +52,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <ConfirmDialog
@@ -86,7 +88,8 @@ const confirm = () => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/confirmdialog/theming/TailwindDoc.vue b/doc/confirmdialog/theming/TailwindDoc.vue
index 392ba0a75..97aa41724 100644
--- a/doc/confirmdialog/theming/TailwindDoc.vue
+++ b/doc/confirmdialog/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     dialog: {
         root: ({ state }) => ({
             class: [
@@ -146,7 +147,8 @@ const confirm2 = () => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/confirmpopup/AccessibilityDoc.vue b/doc/confirmpopup/AccessibilityDoc.vue
index f1575093c..9b8821faa 100644
--- a/doc/confirmpopup/AccessibilityDoc.vue
+++ b/doc/confirmpopup/AccessibilityDoc.vue
@@ -77,7 +77,8 @@ export default {
                 basic: `
 <ConfirmPopup id="confirm" aria-label="popup" />
 
-<Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" />`
+<Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" />
+`
             },
             code2: {
                 basic: `
@@ -97,7 +98,8 @@ const openPopup = (event) => {
         }
     });
 }
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/confirmpopup/BasicDoc.vue b/doc/confirmpopup/BasicDoc.vue
index a5d68aab1..2bc1eb7bc 100644
--- a/doc/confirmpopup/BasicDoc.vue
+++ b/doc/confirmpopup/BasicDoc.vue
@@ -20,7 +20,8 @@ export default {
 <div class="card flex flex-wrap gap-2 justify-content-center">
     <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
     <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <Toast />
@@ -63,7 +64,8 @@ export default {
         },
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <Toast />
@@ -109,7 +111,8 @@ const confirm2 = (event) => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/confirmpopup/TemplateDoc.vue b/doc/confirmpopup/TemplateDoc.vue
index 5d3b3235e..859b8f955 100644
--- a/doc/confirmpopup/TemplateDoc.vue
+++ b/doc/confirmpopup/TemplateDoc.vue
@@ -32,7 +32,8 @@ export default {
 </ConfirmPopup>
 <div class="card flex flex-wrap gap-2 justify-content-center">
     <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <Toast />
@@ -70,7 +71,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <Toast />
@@ -110,7 +112,8 @@ const showTemplate = (event) => {
         }
     });
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/confirmpopup/pt/PTDoc.vue b/doc/confirmpopup/pt/PTDoc.vue
index 2b3a9bfe3..c5c4ee8b8 100644
--- a/doc/confirmpopup/pt/PTDoc.vue
+++ b/doc/confirmpopup/pt/PTDoc.vue
@@ -23,7 +23,8 @@ export default {
     :pt="{
         root: { class: 'surface-100' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <ConfirmPopup
@@ -57,7 +58,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <ConfirmPopup
@@ -93,7 +95,8 @@ const confirm = (event) => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/confirmpopup/theming/TailwindDoc.vue b/doc/confirmpopup/theming/TailwindDoc.vue
index ca0f27e2d..1e3cc8199 100644
--- a/doc/confirmpopup/theming/TailwindDoc.vue
+++ b/doc/confirmpopup/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -89,7 +90,8 @@ const confirm2 = (event) => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/contextmenu/BasicDoc.vue b/doc/contextmenu/BasicDoc.vue
index 6c565279c..3068f02d0 100644
--- a/doc/contextmenu/BasicDoc.vue
+++ b/doc/contextmenu/BasicDoc.vue
@@ -20,7 +20,8 @@ export default {
             code: {
                 basic: `
 <img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
-<ContextMenu ref="menu" :model="items" />`,
+<ContextMenu ref="menu" :model="items" />
+`,
                 options: `
 <template>
     <div class="card flex md:justify-content-center">
@@ -45,7 +46,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -67,7 +69,8 @@ const onImageRightClick = (event) => {
     menu.value.show(event);
 };
 
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/contextmenu/DocumentDoc.vue b/doc/contextmenu/DocumentDoc.vue
index 33edc1786..f31c47edb 100644
--- a/doc/contextmenu/DocumentDoc.vue
+++ b/doc/contextmenu/DocumentDoc.vue
@@ -142,7 +142,8 @@ export default {
             code: {
                 basic: `
 <p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
-<ContextMenu global :model="items" />`,
+<ContextMenu global :model="items" />
+`,
                 options: `
 <template>
     <div class="card text-center">
@@ -284,7 +285,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card text-center">
@@ -422,7 +424,8 @@ const items = ref([
         icon: 'pi pi-fw pi-power-off'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/contextmenu/RouterDoc.vue b/doc/contextmenu/RouterDoc.vue
index 11b06a417..dfdb077ab 100644
--- a/doc/contextmenu/RouterDoc.vue
+++ b/doc/contextmenu/RouterDoc.vue
@@ -42,7 +42,8 @@ export default {
             code: {
                 basic: `
 <img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
-<ContextMenu ref="routemenu" :model="items" />`,
+<ContextMenu ref="routemenu" :model="items" />
+`,
                 options: `
 <template>
     <div class="card flex md:justify-content-center">
@@ -72,7 +73,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -99,7 +101,8 @@ const onImageRightClick = (event) => {
     routemenu.value.show(event);
 };
 
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/contextmenu/pt/PTDoc.vue b/doc/contextmenu/pt/PTDoc.vue
index 5aa5a61df..66928a817 100644
--- a/doc/contextmenu/pt/PTDoc.vue
+++ b/doc/contextmenu/pt/PTDoc.vue
@@ -152,7 +152,8 @@ export default {
     :pt="{
         action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex md:justify-content-center">
@@ -305,7 +306,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -455,7 +457,8 @@ const onImageRightClick = (event) => {
     menu.value.show(event);
 };
 
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/contextmenu/theming/TailwindDoc.vue b/doc/contextmenu/theming/TailwindDoc.vue
index 0a0c3c699..f66d96c62 100644
--- a/doc/contextmenu/theming/TailwindDoc.vue
+++ b/doc/contextmenu/theming/TailwindDoc.vue
@@ -70,7 +70,8 @@ const onImageRightClick = (event) => {
     menu.value.show(event);
 };
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/customicons/FontAwesomeDoc.vue b/doc/customicons/FontAwesomeDoc.vue
index 153e3272d..b4afeb510 100644
--- a/doc/customicons/FontAwesomeDoc.vue
+++ b/doc/customicons/FontAwesomeDoc.vue
@@ -10,11 +10,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Dropdown>
+                basic: `
+<Dropdown>
     <template #dropdownicon>
         <i class="fa-light fa-chevron-down"></i>
     </template>
-</Dropdown>`
+</Dropdown>
+`
             }
         };
     }
diff --git a/doc/customicons/ImageDoc.vue b/doc/customicons/ImageDoc.vue
index 553cce2bf..a6dae3e0c 100644
--- a/doc/customicons/ImageDoc.vue
+++ b/doc/customicons/ImageDoc.vue
@@ -10,11 +10,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Dropdown>
+                basic: `
+<Dropdown>
     <template #dropdownicon>
         <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
     </template>
-</Dropdown>`
+</Dropdown>
+`
             }
         };
     }
diff --git a/doc/customicons/MaterialDoc.vue b/doc/customicons/MaterialDoc.vue
index 4da92d536..5fb4e1cbb 100644
--- a/doc/customicons/MaterialDoc.vue
+++ b/doc/customicons/MaterialDoc.vue
@@ -10,11 +10,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Dropdown>
+                basic: `
+<Dropdown>
     <template #dropdownicon>
         <span class="material-icons">arrow_drop_down</span>
     </template>
-</Dropdown>`
+</Dropdown>
+`
             }
         };
     }
diff --git a/doc/customicons/SVGDoc.vue b/doc/customicons/SVGDoc.vue
index 47c583e15..ae394a08c 100644
--- a/doc/customicons/SVGDoc.vue
+++ b/doc/customicons/SVGDoc.vue
@@ -10,7 +10,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Dropdown>
+                basic: `
+<Dropdown>
     <template #dropdownicon>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <g id="chevron-down">
@@ -18,7 +19,8 @@ export default {
             </g>
         </svg>
     </template>
-</Dropdown>`
+</Dropdown>
+`
             }
         };
     }
diff --git a/doc/datatable/BasicDoc.vue b/doc/datatable/BasicDoc.vue
index 20be7a12a..793ee58a3 100644
--- a/doc/datatable/BasicDoc.vue
+++ b/doc/datatable/BasicDoc.vue
@@ -27,7 +27,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -76,7 +78,8 @@ onMounted(() => {
 
 const products = ref();
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/ColumnGroupDoc.vue b/doc/datatable/ColumnGroupDoc.vue
index 09a327500..eefe461a5 100644
--- a/doc/datatable/ColumnGroupDoc.vue
+++ b/doc/datatable/ColumnGroupDoc.vue
@@ -100,7 +100,8 @@ export default {
             <Column :footer="thisYearTotal" />
         </Row>
     </ColumnGroup>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <DataTable :value="sales" tableStyle="min-width: 50rem">
@@ -197,6 +198,7 @@ export default {
     }
 }
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/datatable/ColumnToggleDoc.vue b/doc/datatable/ColumnToggleDoc.vue
index 848e26027..ccc03efb1 100644
--- a/doc/datatable/ColumnToggleDoc.vue
+++ b/doc/datatable/ColumnToggleDoc.vue
@@ -36,7 +36,8 @@ export default {
     </template>
     <Column field="code" header="Code" />
     <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div>
@@ -82,6 +83,7 @@ export default {
     }
 }
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/datatable/ConditionalStyleDoc.vue b/doc/datatable/ConditionalStyleDoc.vue
index 8de5b9453..dd069efbe 100644
--- a/doc/datatable/ConditionalStyleDoc.vue
+++ b/doc/datatable/ConditionalStyleDoc.vue
@@ -39,7 +39,8 @@ export default {
             </div>
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -91,7 +92,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -139,7 +141,8 @@ const stockClass = (data) => {
     ];
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/ContextMenuDoc.vue b/doc/datatable/ContextMenuDoc.vue
index b8973d12f..245d79125 100644
--- a/doc/datatable/ContextMenuDoc.vue
+++ b/doc/datatable/ContextMenuDoc.vue
@@ -45,7 +45,8 @@ export default {
             {{ formatCurrency(slotProps.data.price) }}
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div>
@@ -100,6 +101,7 @@ export default {
     }
 }
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/datatable/DynamicColumnsDoc.vue b/doc/datatable/DynamicColumnsDoc.vue
index 5de5781af..0e95699d6 100644
--- a/doc/datatable/DynamicColumnsDoc.vue
+++ b/doc/datatable/DynamicColumnsDoc.vue
@@ -22,7 +22,8 @@ export default {
                 basic: `
 <DataTable :value="products" tableStyle="min-width: 50rem">
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -54,7 +55,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -80,7 +82,8 @@ const columns = [
     { field: 'quantity', header: 'Quantity' }
 ];
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/ExportDoc.vue b/doc/datatable/ExportDoc.vue
index 6b5474144..ed3f6a5c4 100644
--- a/doc/datatable/ExportDoc.vue
+++ b/doc/datatable/ExportDoc.vue
@@ -37,7 +37,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div>
@@ -74,6 +75,7 @@ export default {
     }
 }
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/datatable/GridLinesDoc.vue b/doc/datatable/GridLinesDoc.vue
index a347f0480..09b774066 100644
--- a/doc/datatable/GridLinesDoc.vue
+++ b/doc/datatable/GridLinesDoc.vue
@@ -27,7 +27,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -76,7 +78,8 @@ onMounted(() => {
 
 const products = ref();
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/LazyLoadDoc.vue b/doc/datatable/LazyLoadDoc.vue
index a1fc92717..9b10e2a03 100644
--- a/doc/datatable/LazyLoadDoc.vue
+++ b/doc/datatable/LazyLoadDoc.vue
@@ -123,7 +123,8 @@ export default {
             <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
 	<div class="card p-fluid">
@@ -242,6 +243,7 @@ export default {
     }
 }
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/datatable/ReorderDoc.vue b/doc/datatable/ReorderDoc.vue
index 7226c99ca..864f9eb7c 100644
--- a/doc/datatable/ReorderDoc.vue
+++ b/doc/datatable/ReorderDoc.vue
@@ -28,7 +28,8 @@ export default {
 <DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
     <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
     <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
 	<div>
@@ -72,6 +73,7 @@ export default {
     }
 }
 <\/script>                  
+
 `,
                 composition: `
 <template>
diff --git a/doc/datatable/RowExpansionDoc.vue b/doc/datatable/RowExpansionDoc.vue
index 6c8075233..e429a3b26 100644
--- a/doc/datatable/RowExpansionDoc.vue
+++ b/doc/datatable/RowExpansionDoc.vue
@@ -136,7 +136,8 @@ export default {
             </DataTable>
         </div>
     </template>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -265,7 +266,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -392,7 +394,8 @@ const getOrderSeverity = (order) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/SizeDoc.vue b/doc/datatable/SizeDoc.vue
index 632d20d35..f4892e250 100644
--- a/doc/datatable/SizeDoc.vue
+++ b/doc/datatable/SizeDoc.vue
@@ -37,7 +37,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -72,7 +73,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -104,7 +106,8 @@ const sizeOptions = ref([
     { label: 'Large', value: 'large', class: 'lg' }
 ]);
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/StatefulDoc.vue b/doc/datatable/StatefulDoc.vue
index 13fbd2995..0c4d6d68a 100644
--- a/doc/datatable/StatefulDoc.vue
+++ b/doc/datatable/StatefulDoc.vue
@@ -160,7 +160,8 @@ export default {
         </template>
     </Column>
     <template #empty> No customers found. </template>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -285,7 +286,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -402,7 +404,8 @@ const getSeverity = (status) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* CustomerService */
 {
diff --git a/doc/datatable/StripedRowsDoc.vue b/doc/datatable/StripedRowsDoc.vue
index d21b38e36..ea63be2f0 100644
--- a/doc/datatable/StripedRowsDoc.vue
+++ b/doc/datatable/StripedRowsDoc.vue
@@ -27,7 +27,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -76,7 +78,8 @@ onMounted(() => {
 
 const products = ref();
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/TemplateDoc.vue b/doc/datatable/TemplateDoc.vue
index 11c5cc745..3172acbbd 100644
--- a/doc/datatable/TemplateDoc.vue
+++ b/doc/datatable/TemplateDoc.vue
@@ -77,7 +77,8 @@ export default {
         </template>
     </Column>
     <template #footer> In total there are {{ products ? products.length : 0 }} products. </template>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -148,7 +149,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -214,7 +216,8 @@ const getSeverity = (product) => {
     }
 };
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/colresize/ExpandModeDoc.vue b/doc/datatable/colresize/ExpandModeDoc.vue
index 287b6b624..6398161c9 100644
--- a/doc/datatable/colresize/ExpandModeDoc.vue
+++ b/doc/datatable/colresize/ExpandModeDoc.vue
@@ -27,7 +27,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -75,7 +77,8 @@ onMounted(() => {
 });
 
 const products = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/colresize/FitModeDoc.vue b/doc/datatable/colresize/FitModeDoc.vue
index 73943c40a..d1f15badb 100644
--- a/doc/datatable/colresize/FitModeDoc.vue
+++ b/doc/datatable/colresize/FitModeDoc.vue
@@ -30,7 +30,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -56,7 +57,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -78,7 +80,8 @@ onMounted(() => {
 });
 
 const products = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/edit/CellEditDoc.vue b/doc/datatable/edit/CellEditDoc.vue
index 70a190f01..94a367e8f 100644
--- a/doc/datatable/edit/CellEditDoc.vue
+++ b/doc/datatable/edit/CellEditDoc.vue
@@ -51,7 +51,8 @@ export default {
             </template>
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -134,7 +135,8 @@ export default {
     padding-top: 0;
     padding-bottom: 0;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
diff --git a/doc/datatable/edit/FilterSortEditDoc.vue b/doc/datatable/edit/FilterSortEditDoc.vue
index ad32e9ab1..0284845fd 100644
--- a/doc/datatable/edit/FilterSortEditDoc.vue
+++ b/doc/datatable/edit/FilterSortEditDoc.vue
@@ -44,7 +44,8 @@ export default {
             <InputText v-model="data[field]" autofocus />
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -120,7 +121,8 @@ export default {
     padding-top: 0;
     padding-bottom: 0;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
diff --git a/doc/datatable/edit/RowEditDoc.vue b/doc/datatable/edit/RowEditDoc.vue
index b2699b83b..ac26c921a 100644
--- a/doc/datatable/edit/RowEditDoc.vue
+++ b/doc/datatable/edit/RowEditDoc.vue
@@ -91,7 +91,8 @@ export default {
         </template>
     </Column>
     <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card p-fluid">
@@ -183,7 +184,8 @@ export default {
     padding-top: 0.6rem;
     padding-bottom: 0.6rem;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card p-fluid">
diff --git a/doc/datatable/filter/AdvancedFilterDoc.vue b/doc/datatable/filter/AdvancedFilterDoc.vue
index a5c018c71..d79d746a5 100644
--- a/doc/datatable/filter/AdvancedFilterDoc.vue
+++ b/doc/datatable/filter/AdvancedFilterDoc.vue
@@ -248,7 +248,8 @@ export default {
             <TriStateCheckbox v-model="filterModel.value" inputId="verified-filter" />
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -452,7 +453,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -652,7 +654,8 @@ const getSeverity = (status) => {
             return null;
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1000,
diff --git a/doc/datatable/filter/BasicFilterDoc.vue b/doc/datatable/filter/BasicFilterDoc.vue
index d8168b984..f352b7fdb 100644
--- a/doc/datatable/filter/BasicFilterDoc.vue
+++ b/doc/datatable/filter/BasicFilterDoc.vue
@@ -181,7 +181,8 @@ export default {
             <TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" />
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -334,7 +335,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -483,7 +485,8 @@ const getSeverity = (status) => {
     }
 }
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1000,
diff --git a/doc/datatable/paginator/PaginatorBasicDoc.vue b/doc/datatable/paginator/PaginatorBasicDoc.vue
index 10b3a3f89..8dcf2221d 100644
--- a/doc/datatable/paginator/PaginatorBasicDoc.vue
+++ b/doc/datatable/paginator/PaginatorBasicDoc.vue
@@ -27,7 +27,8 @@ export default {
     <Column field="country.name" header="Country" style="width: 25%"></Column>
     <Column field="company" header="Company" style="width: 25%"></Column>
     <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
         CustomerService.getCustomersMedium().then((data) => (this.customers = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -76,7 +78,8 @@ onMounted(() => {
 
 const customers = ref();
 
-<\/script>`,
+<\/script>
+`,
                 data: `
                 {
     id: 1000,
diff --git a/doc/datatable/paginator/PaginatorTemplateDoc.vue b/doc/datatable/paginator/PaginatorTemplateDoc.vue
index 0f461579f..d51c38d11 100644
--- a/doc/datatable/paginator/PaginatorTemplateDoc.vue
+++ b/doc/datatable/paginator/PaginatorTemplateDoc.vue
@@ -52,7 +52,8 @@ export default {
     <Column field="country.name" header="Country" style="width: 25%"></Column>
     <Column field="company" header="Company" style="width: 25%"></Column>
     <Column field="representative.name" header="Representative" style="width: 25%"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -86,7 +87,8 @@ export default {
         CustomerService.getCustomersMedium().then((data) => (this.customers = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -117,7 +119,8 @@ onMounted(() => {
 
 const customers = ref();
 
-<\/script>`,
+<\/script>
+`,
                 data: `
                 {
     id: 1000,
diff --git a/doc/datatable/pt/PTDoc.vue b/doc/datatable/pt/PTDoc.vue
index f2f38e4a3..a08b514c6 100644
--- a/doc/datatable/pt/PTDoc.vue
+++ b/doc/datatable/pt/PTDoc.vue
@@ -101,7 +101,8 @@ export default {
             headerCell: { style: { width: '25%' } }
         }"
     />
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -165,7 +166,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -226,7 +228,8 @@ onMounted(() => {
 
 const products = ref();
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue b/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
index 40e1695b8..96e19d6ce 100644
--- a/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
@@ -85,7 +85,8 @@ export default {
     <template #groupfooter="slotProps">
         <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
     </template>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -174,7 +175,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -259,7 +261,8 @@ const getSeverity = (status) => {
             return null;
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1000,
diff --git a/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue b/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
index 6095a6e5b..8ce657b1a 100644
--- a/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
@@ -78,7 +78,8 @@ export default {
         </template>
     </Column>
     <Column field="date" header="Date" style="min-width: 100px"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -149,7 +150,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -215,7 +217,8 @@ const getSeverity = (status) => {
             return null;
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1000,
diff --git a/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue b/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
index 640179cc0..2b40f03f4 100644
--- a/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
@@ -75,7 +75,8 @@ export default {
     <template #groupfooter="slotProps">
         <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
     </template>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -157,7 +158,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -233,7 +235,8 @@ const getSeverity = (status) => {
             return null;
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1000,
diff --git a/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue b/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
index 52d678b24..45d94a0c8 100644
--- a/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
+++ b/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
@@ -35,7 +35,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -64,7 +65,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -90,7 +92,8 @@ const products = ref();
 const selectedProduct = ref();
 const metaKey = ref(true);
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
index 0359e7c66..6b4d9b249 100644
--- a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
+++ b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
@@ -38,7 +38,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -70,7 +71,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -99,7 +101,8 @@ const products = ref();
 const selectedProduct = ref();
 const metaKey = ref(true);
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue b/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
index 801920eba..cbd923201 100644
--- a/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
+++ b/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
@@ -34,7 +34,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -63,7 +64,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -89,7 +91,8 @@ const products = ref();
 const selectedProduct = ref();
 const metaKey = ref(true);
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/rowselection/RowSelectEventsDoc.vue b/doc/datatable/rowselection/RowSelectEventsDoc.vue
index c6cddd283..c5379b249 100644
--- a/doc/datatable/rowselection/RowSelectEventsDoc.vue
+++ b/doc/datatable/rowselection/RowSelectEventsDoc.vue
@@ -31,7 +31,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -68,7 +69,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -102,7 +104,8 @@ const onRowUnselect = (event) => {
     toast.add({ severity: 'warn', summary: 'Product Unselected', detail: 'Name: ' + event.data.name, life: 3000 });
 }
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/rowselection/SingleRowSelectionDoc.vue b/doc/datatable/rowselection/SingleRowSelectionDoc.vue
index fa2633f29..4d78cee40 100644
--- a/doc/datatable/rowselection/SingleRowSelectionDoc.vue
+++ b/doc/datatable/rowselection/SingleRowSelectionDoc.vue
@@ -42,7 +42,8 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -74,7 +75,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -103,7 +105,8 @@ const products = ref();
 const selectedProduct = ref();
 const metaKey = ref(true);
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/samples/CustomersDoc.vue b/doc/datatable/samples/CustomersDoc.vue
index 7a51cc0f4..b713f4592 100644
--- a/doc/datatable/samples/CustomersDoc.vue
+++ b/doc/datatable/samples/CustomersDoc.vue
@@ -222,7 +222,8 @@ export default {
             <Button type="button" icon="pi pi-cog" rounded />
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -412,7 +413,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -598,7 +600,8 @@ const getSeverity = (status) => {
             return null;
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1000,
diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
index e38f83b07..1346b2d31 100644
--- a/doc/datatable/samples/ProductsDoc.vue
+++ b/doc/datatable/samples/ProductsDoc.vue
@@ -240,7 +240,8 @@ export default {
             <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div>
@@ -528,6 +529,7 @@ export default {
     }
 }
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/datatable/scroll/FlexibleScrollDoc.vue b/doc/datatable/scroll/FlexibleScrollDoc.vue
index a525a90db..46a7df2c8 100644
--- a/doc/datatable/scroll/FlexibleScrollDoc.vue
+++ b/doc/datatable/scroll/FlexibleScrollDoc.vue
@@ -44,7 +44,8 @@ export default {
     <template #footer>
         <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
     </template>
-</Dialog>`,
+</Dialog>
+`,
                 options: `
 <template>
     <div class="card">
@@ -80,7 +81,8 @@ export default {
         });
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -112,7 +114,8 @@ onMounted(() => {
         customers.value = data;
     });
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1000,
diff --git a/doc/datatable/scroll/FrozenColumnsDoc.vue b/doc/datatable/scroll/FrozenColumnsDoc.vue
index c624c2aea..34436cf03 100644
--- a/doc/datatable/scroll/FrozenColumnsDoc.vue
+++ b/doc/datatable/scroll/FrozenColumnsDoc.vue
@@ -51,7 +51,8 @@ export default {
             <span class="font-bold">{{ formatCurrency(data.balance) }}</span>
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -97,7 +98,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -137,7 +139,8 @@ const balanceFrozen = ref(false);
 const formatCurrency = (value) => {
     return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1000,
diff --git a/doc/datatable/scroll/FrozenRowsDoc.vue b/doc/datatable/scroll/FrozenRowsDoc.vue
index 8069dea8d..d4a57378a 100644
--- a/doc/datatable/scroll/FrozenRowsDoc.vue
+++ b/doc/datatable/scroll/FrozenRowsDoc.vue
@@ -55,7 +55,8 @@ export default {
             <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -121,7 +122,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -183,7 +185,8 @@ onMounted(() => {
     });
 });
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1000,
diff --git a/doc/datatable/scroll/HorizontalScrollDoc.vue b/doc/datatable/scroll/HorizontalScrollDoc.vue
index bc0ef3f81..28b8771cf 100644
--- a/doc/datatable/scroll/HorizontalScrollDoc.vue
+++ b/doc/datatable/scroll/HorizontalScrollDoc.vue
@@ -45,7 +45,8 @@ export default {
     <Column field="status" header="Status" footer="Status" style="min-width: 200px"></Column>
     <Column field="activity" header="Activity" footer="Activity" style="min-width: 200px"></Column>
     <Column field="representative.name" header="Representative" footer="Representative" style="min-width: 200px"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -87,7 +88,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -124,7 +126,8 @@ onMounted(() => {
 const formatCurrency = (value) => {
     return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1000,
diff --git a/doc/datatable/scroll/VerticalScrollDoc.vue b/doc/datatable/scroll/VerticalScrollDoc.vue
index e7c2bd793..facbc8721 100644
--- a/doc/datatable/scroll/VerticalScrollDoc.vue
+++ b/doc/datatable/scroll/VerticalScrollDoc.vue
@@ -27,7 +27,8 @@ export default {
     <Column field="country.name" header="Country"></Column>
     <Column field="representative.name" header="Representative"></Column>
     <Column field="company" header="Company"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -55,7 +56,8 @@ export default {
         });
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -79,7 +81,8 @@ onMounted(() => {
         customers.value = data;
     });
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1000,
diff --git a/doc/datatable/sort/MultipleColumnsDoc.vue b/doc/datatable/sort/MultipleColumnsDoc.vue
index 0d5893bc5..7c52ea393 100644
--- a/doc/datatable/sort/MultipleColumnsDoc.vue
+++ b/doc/datatable/sort/MultipleColumnsDoc.vue
@@ -27,7 +27,8 @@ export default {
     <Column field="name" header="Name" sortable style="width: 25%"></Column>
     <Column field="category" header="Category" sortable style="width: 25%"></Column>
     <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -76,7 +78,8 @@ onMounted(() => {
 
 const products = ref();
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/sort/PresortDoc.vue b/doc/datatable/sort/PresortDoc.vue
index bbf0c1bde..9cd7190c8 100644
--- a/doc/datatable/sort/PresortDoc.vue
+++ b/doc/datatable/sort/PresortDoc.vue
@@ -40,7 +40,8 @@ export default {
     </Column>
     <Column field="category" header="Category" sortable style="width: 20%"></Column>
     <Column field="quantity" header="Quantity" sortable style="width: 20%"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -76,7 +77,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -107,7 +109,8 @@ const formatCurrency = (value) => {
     return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
 }
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/sort/RemovableSortDoc.vue b/doc/datatable/sort/RemovableSortDoc.vue
index f20746a03..4b52bb00e 100644
--- a/doc/datatable/sort/RemovableSortDoc.vue
+++ b/doc/datatable/sort/RemovableSortDoc.vue
@@ -27,7 +27,8 @@ export default {
     <Column field="name" header="Name" sortable style="width: 25%"></Column>
     <Column field="category" header="Category" sortable style="width: 25%"></Column>
     <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -76,7 +78,8 @@ onMounted(() => {
 
 const products = ref();
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/sort/SingleColumnDoc.vue b/doc/datatable/sort/SingleColumnDoc.vue
index b254b882d..882f4a9da 100644
--- a/doc/datatable/sort/SingleColumnDoc.vue
+++ b/doc/datatable/sort/SingleColumnDoc.vue
@@ -27,7 +27,8 @@ export default {
     <Column field="name" header="Name" sortable style="width: 25%"></Column>
     <Column field="category" header="Category" sortable style="width: 25%"></Column>
     <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
         ProductService.getProductsMini().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -76,7 +78,8 @@ onMounted(() => {
 
 const products = ref();
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: '1000',
diff --git a/doc/datatable/theming/TailwindDoc.vue b/doc/datatable/theming/TailwindDoc.vue
index 1c3464b76..d068e35e6 100644
--- a/doc/datatable/theming/TailwindDoc.vue
+++ b/doc/datatable/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -521,7 +522,8 @@ const getSeverity = (status) => {
             return null;
     }
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue b/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
index 03009ab3a..e5b68df22 100644
--- a/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
+++ b/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
@@ -100,7 +100,8 @@ export default {
             </div>
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -185,7 +186,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -265,7 +267,8 @@ const loadCarsLazy = (event) => {
         lazyLoading.value = false;
     }, Math.random() * 1000 + 250);
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1
diff --git a/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue b/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
index 5834c6fd5..013164339 100644
--- a/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
+++ b/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
@@ -33,7 +33,8 @@ export default {
     <Column field="year" header="Year" style="width: 20%"></Column>
     <Column field="brand" header="Brand" style="width: 20%"></Column>
     <Column field="color" header="Color" style="width: 20%"></Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -60,7 +61,8 @@ export default {
         this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -83,7 +85,8 @@ const cars = ref();
 onMounted(() => {
     cars.value = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     id: 1
diff --git a/doc/dataview/BasicDoc.vue b/doc/dataview/BasicDoc.vue
index d9aaccb0e..3e4450fd1 100644
--- a/doc/dataview/BasicDoc.vue
+++ b/doc/dataview/BasicDoc.vue
@@ -69,7 +69,8 @@ export default {
             </div>
         </div>
     </template>
-</DataView>`,
+</DataView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -132,7 +133,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -189,7 +191,8 @@ const getSeverity = (product) => {
             return null;
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
index e4ec92bdf..364b99282 100644
--- a/doc/dataview/LayoutDoc.vue
+++ b/doc/dataview/LayoutDoc.vue
@@ -129,7 +129,8 @@ export default {
             </div>
         </div>
     </template>
-</DataView>`,
+</DataView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -222,7 +223,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -311,7 +313,8 @@ const getSeverity = (product) => {
     }
 }
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/dataview/LoadingDoc.vue b/doc/dataview/LoadingDoc.vue
index 3df7ff697..cf4fd600e 100644
--- a/doc/dataview/LoadingDoc.vue
+++ b/doc/dataview/LoadingDoc.vue
@@ -114,7 +114,8 @@ export default {
             </div>
         </div>
     </template>
-</DataView>`,
+</DataView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -201,7 +202,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -284,7 +286,8 @@ const getSeverity = (product) => {
     }
 }
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/dataview/PaginationDoc.vue b/doc/dataview/PaginationDoc.vue
index 353351acd..c51b1c371 100644
--- a/doc/dataview/PaginationDoc.vue
+++ b/doc/dataview/PaginationDoc.vue
@@ -67,7 +67,8 @@ export default {
             </div>
         </div>
     </template>
-</DataView>`,
+</DataView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -130,7 +131,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -187,7 +189,8 @@ const getSeverity = (product) => {
             return null;
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/dataview/SortingDoc.vue b/doc/dataview/SortingDoc.vue
index d40455fa7..f4597ae09 100644
--- a/doc/dataview/SortingDoc.vue
+++ b/doc/dataview/SortingDoc.vue
@@ -80,7 +80,8 @@ export default {
             </div>
         </div>
     </template>
-</DataView>`,
+</DataView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -167,7 +168,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -249,7 +251,8 @@ const getSeverity = (product) => {
             return null;
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/dataview/pt/PTDoc.vue b/doc/dataview/pt/PTDoc.vue
index cc78717ba..fe23b7462 100644
--- a/doc/dataview/pt/PTDoc.vue
+++ b/doc/dataview/pt/PTDoc.vue
@@ -148,7 +148,8 @@ export default {
             </div>
         </div>
     </template>
-</DataView>`,
+</DataView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -253,7 +254,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -354,7 +356,8 @@ const getSeverity = (product) => {
     }
 }
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/dataview/theming/TailwindDoc.vue b/doc/dataview/theming/TailwindDoc.vue
index 81c8bfa1e..80b9a1aae 100644
--- a/doc/dataview/theming/TailwindDoc.vue
+++ b/doc/dataview/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     dataview: {
         content: {
             class: [
@@ -138,7 +139,8 @@ const getSeverity = (product) => {
     }
 }
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/deferredcontent/BasicDoc.vue b/doc/deferredcontent/BasicDoc.vue
index afba64b31..3c46b9d1d 100644
--- a/doc/deferredcontent/BasicDoc.vue
+++ b/doc/deferredcontent/BasicDoc.vue
@@ -20,7 +20,8 @@ export default {
                 basic: `
 <DeferredContent @load="onImageLoad">
     <img src="/images/nature/nature4.jpg" alt="Nature" />
-</DeferredContent>`,
+</DeferredContent>
+`,
                 options: `
 <template>
     <div class="card">
@@ -41,7 +42,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -60,7 +62,8 @@ import { ref } from 'vue';
 const onImageLoad = () => {
     toast.add({ severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable', life: 2000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/deferredcontent/DataTableDoc.vue b/doc/deferredcontent/DataTableDoc.vue
index dd2acc67a..68ec41072 100644
--- a/doc/deferredcontent/DataTableDoc.vue
+++ b/doc/deferredcontent/DataTableDoc.vue
@@ -31,7 +31,8 @@ export default {
         <Column field="category" header="Category"></Column>
         <Column field="quantity" header="Quantity"></Column>
     </DataTable>
-</DeferredContent>`,
+</DeferredContent>
+`,
                 options: `
 <template>
     <div class="card">
@@ -65,7 +66,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -93,7 +95,8 @@ const onDataLoad = () => {
     ProductService.getProductsSmall().then((data) => (products.value = data));
     toast.add({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed', life: 2000 });
 };
-<\/script>`
+<\/script>
+`
             },
             products: null
         };
diff --git a/doc/dialog/BasicDoc.vue b/doc/dialog/BasicDoc.vue
index a542ee3ee..f6dd22a42 100644
--- a/doc/dialog/BasicDoc.vue
+++ b/doc/dialog/BasicDoc.vue
@@ -29,7 +29,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Dialog>`,
+</Dialog>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -51,7 +52,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -69,7 +71,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dialog/FooterDoc.vue b/doc/dialog/FooterDoc.vue
index 304d99753..41a2f2ec4 100644
--- a/doc/dialog/FooterDoc.vue
+++ b/doc/dialog/FooterDoc.vue
@@ -38,7 +38,8 @@ export default {
         <Button label="No" icon="pi pi-times" @click="visible = false" text />
         <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
     </template>
-</Dialog>`,
+</Dialog>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -64,7 +65,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -86,7 +88,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dialog/LongContentDoc.vue b/doc/dialog/LongContentDoc.vue
index 7b08d2bd7..06f80cd41 100644
--- a/doc/dialog/LongContentDoc.vue
+++ b/doc/dialog/LongContentDoc.vue
@@ -86,7 +86,8 @@ export default {
         maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
         non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
     </p>
-</Dialog>`,
+</Dialog>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -136,7 +137,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -182,7 +184,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dialog/MaximizableDoc.vue b/doc/dialog/MaximizableDoc.vue
index de44a009f..5ffd2efa7 100644
--- a/doc/dialog/MaximizableDoc.vue
+++ b/doc/dialog/MaximizableDoc.vue
@@ -29,7 +29,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Dialog>`,
+</Dialog>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -51,7 +52,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -69,7 +71,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dialog/PositionDoc.vue b/doc/dialog/PositionDoc.vue
index e68315f38..991bb131c 100644
--- a/doc/dialog/PositionDoc.vue
+++ b/doc/dialog/PositionDoc.vue
@@ -64,7 +64,8 @@ export default {
         <Button label="No" icon="pi pi-times" @click="visible = false" text />
         <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
     </template>
-</Dialog>`,
+</Dialog>
+`,
                 options: `
 <template>
     <div class="card">
@@ -111,7 +112,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -153,7 +155,8 @@ const openPosition = (pos) => {
     position.value = pos;
     visible.value = true;
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/dialog/ResponsiveDoc.vue b/doc/dialog/ResponsiveDoc.vue
index 10c604216..5a946ebb3 100644
--- a/doc/dialog/ResponsiveDoc.vue
+++ b/doc/dialog/ResponsiveDoc.vue
@@ -33,7 +33,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Dialog>`,
+</Dialog>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +56,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -73,7 +75,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dialog/TemplateDoc.vue b/doc/dialog/TemplateDoc.vue
index 686341711..0af7a747f 100644
--- a/doc/dialog/TemplateDoc.vue
+++ b/doc/dialog/TemplateDoc.vue
@@ -63,7 +63,8 @@ export default {
             <Button icon="pi pi-check" label="Confirm Reservation" @click="slotProps.onClose"></Button>
         </div>
     </template>
-</Dialog>`,
+</Dialog>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -103,7 +104,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -139,7 +141,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dialog/WithoutModalDoc.vue b/doc/dialog/WithoutModalDoc.vue
index 00441f7ca..41da66f54 100644
--- a/doc/dialog/WithoutModalDoc.vue
+++ b/doc/dialog/WithoutModalDoc.vue
@@ -29,7 +29,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Dialog>`,
+</Dialog>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -51,7 +52,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -69,7 +71,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dialog/pt/PTDoc.vue b/doc/dialog/pt/PTDoc.vue
index 2ab64fe65..70daa006b 100644
--- a/doc/dialog/pt/PTDoc.vue
+++ b/doc/dialog/pt/PTDoc.vue
@@ -36,7 +36,8 @@ export default {
     }"
 >
     <p>Lorem ipsum </p>
-</Dialog>`,
+</Dialog>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -66,7 +67,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -92,7 +94,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dialog/theming/TailwindDoc.vue b/doc/dialog/theming/TailwindDoc.vue
index b583aca02..ad70bcb5c 100644
--- a/doc/dialog/theming/TailwindDoc.vue
+++ b/doc/dialog/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     dialog: {
         root: ({ state }) => ({
             class: [
@@ -118,7 +119,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/divider/BasicDoc.vue b/doc/divider/BasicDoc.vue
index bf9a75584..cc8e6c3c9 100644
--- a/doc/divider/BasicDoc.vue
+++ b/doc/divider/BasicDoc.vue
@@ -62,7 +62,8 @@ export default {
 <p>
     Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
     maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-</p>`,
+</p>
+`,
                 options: `
 <template>
     <div class="card">
@@ -95,7 +96,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -128,7 +130,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/divider/ContentDoc.vue b/doc/divider/ContentDoc.vue
index 63aa99c94..db5955da7 100644
--- a/doc/divider/ContentDoc.vue
+++ b/doc/divider/ContentDoc.vue
@@ -77,7 +77,8 @@ export default {
 <p>
     Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
     maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-</p>`,
+</p>
+`,
                 options: `
 <template>
     <div class="card">
@@ -116,7 +117,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -155,7 +157,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/divider/LoginDoc.vue b/doc/divider/LoginDoc.vue
index 25540a474..52ea3d883 100644
--- a/doc/divider/LoginDoc.vue
+++ b/doc/divider/LoginDoc.vue
@@ -52,7 +52,8 @@ export default {
     <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
         <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
     </div>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card">
@@ -80,7 +81,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -108,7 +110,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/divider/TypeDoc.vue b/doc/divider/TypeDoc.vue
index e6c81ae61..b93d7442b 100644
--- a/doc/divider/TypeDoc.vue
+++ b/doc/divider/TypeDoc.vue
@@ -62,7 +62,8 @@ export default {
 <p>
     Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
     maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-</p>`,
+</p>
+`,
                 options: `
 <template>
     <div class="card">
@@ -95,7 +96,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -128,7 +130,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/divider/VerticalDoc.vue b/doc/divider/VerticalDoc.vue
index b86039a6d..0d17ef2f2 100644
--- a/doc/divider/VerticalDoc.vue
+++ b/doc/divider/VerticalDoc.vue
@@ -48,7 +48,8 @@ export default {
 <p>
     At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
     deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-</p>`,
+</p>
+`,
                 options: `
 <template>
     <div class="card flex">
@@ -74,7 +75,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex">
@@ -100,7 +102,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/divider/pt/PTDoc.vue b/doc/divider/pt/PTDoc.vue
index 645974570..837f94e61 100644
--- a/doc/divider/pt/PTDoc.vue
+++ b/doc/divider/pt/PTDoc.vue
@@ -36,7 +36,8 @@ export default {
 <p>
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
     voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-</p>`,
+</p>
+`,
                 options: `
 <template>
     <div class="card">
@@ -54,7 +55,8 @@ export default {
             voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
         </p>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/divider/theming/TailwindDoc.vue b/doc/divider/theming/TailwindDoc.vue
index 0e5eddee8..b340248a8 100644
--- a/doc/divider/theming/TailwindDoc.vue
+++ b/doc/divider/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     divider: {
         root: ({ props }) => ({
             class: [
@@ -76,7 +77,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dock/AdvancedDoc.vue b/doc/dock/AdvancedDoc.vue
index af5e45272..968183640 100644
--- a/doc/dock/AdvancedDoc.vue
+++ b/doc/dock/AdvancedDoc.vue
@@ -250,7 +250,8 @@ export default {
             <img :alt="item.label" :src="item.icon" style="width: 100%" />
         </a>
     </template>
-</Dock>`,
+</Dock>
+`,
                 options: `
 <template>
     <div class="card dock-demo">
@@ -552,7 +553,8 @@ export default {
     padding: 0;
     border-radius: 0;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div>
diff --git a/doc/dock/BasicDoc.vue b/doc/dock/BasicDoc.vue
index 78e9d79e6..0f56311c7 100644
--- a/doc/dock/BasicDoc.vue
+++ b/doc/dock/BasicDoc.vue
@@ -67,7 +67,8 @@ export default {
     <template #icon="{ item }">
         <img :alt="item.label" :src="item.icon" style="width: 100%" />
     </template>
-</Dock>`,
+</Dock>
+`,
                 options: `
 <template>
     <div class="card dock-demo">
@@ -147,7 +148,8 @@ export default {
 .dock-demo > .p-dock {
     z-index: 1000;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card dock-demo">
diff --git a/doc/dock/pt/PTDoc.vue b/doc/dock/pt/PTDoc.vue
index 1c248193c..896fa3f87 100644
--- a/doc/dock/pt/PTDoc.vue
+++ b/doc/dock/pt/PTDoc.vue
@@ -46,7 +46,8 @@ export default {
     <template #icon="{ item }">
         <img :alt="item.label" :src="item.icon" style="width: 100%" />
     </template>
-</Dock>`,
+</Dock>
+`,
                 options: `
 <template>
     <div class="card dock-demo">
@@ -107,7 +108,8 @@ export default {
 .dock-demo > .p-dock {
     z-index: 1000;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card dock-demo">
diff --git a/doc/dock/theming/TailwindDoc.vue b/doc/dock/theming/TailwindDoc.vue
index e3a1d8afd..34f941d75 100644
--- a/doc/dock/theming/TailwindDoc.vue
+++ b/doc/dock/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     dock: {
         root: ({ props }) => ({
             class: [
diff --git a/doc/dropdown/AccessibilityDoc.vue b/doc/dropdown/AccessibilityDoc.vue
index e2573e379..4316ccd53 100644
--- a/doc/dropdown/AccessibilityDoc.vue
+++ b/doc/dropdown/AccessibilityDoc.vue
@@ -188,7 +188,8 @@ export default {
 <span id="dd1"></span>Options</span>
 <Dropdown aria-labelledby="dd1" />
 
-<Dropdown aria-label="Options" />`
+<Dropdown aria-label="Options" />
+`
             }
         };
     }
diff --git a/doc/dropdown/BasicDoc.vue b/doc/dropdown/BasicDoc.vue
index add36a60b..344285ae6 100644
--- a/doc/dropdown/BasicDoc.vue
+++ b/doc/dropdown/BasicDoc.vue
@@ -25,7 +25,8 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
+<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -48,7 +49,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -67,7 +69,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/ClearIconDoc.vue b/doc/dropdown/ClearIconDoc.vue
index 9c3b89534..a43790fa6 100644
--- a/doc/dropdown/ClearIconDoc.vue
+++ b/doc/dropdown/ClearIconDoc.vue
@@ -22,7 +22,8 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
+<Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -64,7 +66,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/DisabledDoc.vue b/doc/dropdown/DisabledDoc.vue
index 8a5181708..8e938cdda 100644
--- a/doc/dropdown/DisabledDoc.vue
+++ b/doc/dropdown/DisabledDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />`,
+<Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -24,7 +25,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -34,7 +36,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/EditableDoc.vue b/doc/dropdown/EditableDoc.vue
index ed6a5be43..89a1a0b79 100644
--- a/doc/dropdown/EditableDoc.vue
+++ b/doc/dropdown/EditableDoc.vue
@@ -22,7 +22,8 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
+<Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -64,7 +66,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/FilterDoc.vue b/doc/dropdown/FilterDoc.vue
index d35c7a533..dd7df8d72 100644
--- a/doc/dropdown/FilterDoc.vue
+++ b/doc/dropdown/FilterDoc.vue
@@ -59,7 +59,8 @@ export default {
             <div>{{ slotProps.option.name }}</div>
         </div>
     </template>
-</Dropdown>`,
+</Dropdown>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -103,7 +104,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -143,7 +145,8 @@ const countries = ref([
     { name: 'Spain', code: 'ES' },
     { name: 'United States', code: 'US' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/FloatLabelDoc.vue b/doc/dropdown/FloatLabelDoc.vue
index 3b02ad5d4..b6d94c05e 100644
--- a/doc/dropdown/FloatLabelDoc.vue
+++ b/doc/dropdown/FloatLabelDoc.vue
@@ -28,7 +28,8 @@ export default {
 <div class="p-float-label">
     <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     <label for="dd-city">Select a City</label>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -54,7 +55,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -76,7 +78,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/GroupDoc.vue b/doc/dropdown/GroupDoc.vue
index 10f22aea3..554dc3eae 100644
--- a/doc/dropdown/GroupDoc.vue
+++ b/doc/dropdown/GroupDoc.vue
@@ -64,7 +64,8 @@ export default {
             <div>{{ slotProps.option.label }}</div>
         </div>
     </template>
-</Dropdown>`,
+</Dropdown>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -119,7 +120,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -170,7 +172,8 @@ const groupedCities = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/InvalidDoc.vue b/doc/dropdown/InvalidDoc.vue
index 913e048a7..8c399a06b 100644
--- a/doc/dropdown/InvalidDoc.vue
+++ b/doc/dropdown/InvalidDoc.vue
@@ -22,7 +22,8 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />`,
+<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -64,7 +66,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/LazyVirtualScrollDoc.vue b/doc/dropdown/LazyVirtualScrollDoc.vue
index 5a1e240c7..c714be829 100644
--- a/doc/dropdown/LazyVirtualScrollDoc.vue
+++ b/doc/dropdown/LazyVirtualScrollDoc.vue
@@ -24,7 +24,8 @@ export default {
             code: {
                 basic: `
 <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
-    :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />`,
+    :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -66,7 +67,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -102,7 +104,8 @@ const onLazyLoad = (event) => {
         loading.value = false;
     }, Math.random() * 1000 + 250);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/dropdown/LoadingStateDoc.vue b/doc/dropdown/LoadingStateDoc.vue
index aaead6d28..03f964528 100644
--- a/doc/dropdown/LoadingStateDoc.vue
+++ b/doc/dropdown/LoadingStateDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>`,
+<Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/TemplateDoc.vue b/doc/dropdown/TemplateDoc.vue
index 47986bc1e..0ce1b7d21 100644
--- a/doc/dropdown/TemplateDoc.vue
+++ b/doc/dropdown/TemplateDoc.vue
@@ -59,7 +59,8 @@ export default {
             <div>{{ slotProps.option.name }}</div>
         </div>
     </template>
-</Dropdown>`,
+</Dropdown>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -103,7 +104,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -143,7 +145,8 @@ const countries = ref([
     { name: 'Spain', code: 'ES' },
     { name: 'United States', code: 'US' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/VirtualScrollDoc.vue b/doc/dropdown/VirtualScrollDoc.vue
index da72b8a4a..c844579d2 100644
--- a/doc/dropdown/VirtualScrollDoc.vue
+++ b/doc/dropdown/VirtualScrollDoc.vue
@@ -20,7 +20,8 @@ export default {
             code: {
                 basic: `
 <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-    :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />`,
+    :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -38,7 +39,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -52,7 +54,8 @@ import { ref } from "vue";
 
 const selectedItem = ref();
 const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/form/VeeValidateDoc.vue b/doc/dropdown/form/VeeValidateDoc.vue
index 3f4ae5489..5cf66eecf 100644
--- a/doc/dropdown/form/VeeValidateDoc.vue
+++ b/doc/dropdown/form/VeeValidateDoc.vue
@@ -66,7 +66,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -122,7 +123,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/dropdown/pt/PTDoc.vue b/doc/dropdown/pt/PTDoc.vue
index 4618c74e2..dc7811089 100644
--- a/doc/dropdown/pt/PTDoc.vue
+++ b/doc/dropdown/pt/PTDoc.vue
@@ -42,7 +42,8 @@ export default {
             class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -76,7 +77,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -106,7 +108,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dropdown/theming/TailwindDoc.vue b/doc/dropdown/theming/TailwindDoc.vue
index 180a2fcad..afa71e936 100644
--- a/doc/dropdown/theming/TailwindDoc.vue
+++ b/doc/dropdown/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -109,7 +110,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/dynamicdialog/CloseDialogDoc.vue b/doc/dynamicdialog/CloseDialogDoc.vue
index ccbfe1801..da3dabc30 100644
--- a/doc/dynamicdialog/CloseDialogDoc.vue
+++ b/doc/dynamicdialog/CloseDialogDoc.vue
@@ -19,6 +19,7 @@ export default {
         }
     }
 }
+
 `,
                 options: `
 export default {
@@ -28,7 +29,8 @@ export default {
             this.dialogRef.close();
         }
     }
-}`,
+}
+`,
                 composition: `
 import { inject } from "vue";
 
diff --git a/doc/dynamicdialog/DialogServiceDoc.vue b/doc/dynamicdialog/DialogServiceDoc.vue
index bb5c8ea82..808d2f0cd 100644
--- a/doc/dynamicdialog/DialogServiceDoc.vue
+++ b/doc/dynamicdialog/DialogServiceDoc.vue
@@ -27,8 +27,10 @@ app.use(DialogService);
 import { useDialog } from 'primevue/usedialog';
 
 const dialog = useDialog();
+
+`,
+                options: `const dialogRef = this.$dialog;
 `,
-                options: `const dialogRef = this.$dialog;`,
                 composition: `
 import { useDialog } from 'primevue/usedialog';
 
diff --git a/doc/dynamicdialog/OpenDialogDoc.vue b/doc/dynamicdialog/OpenDialogDoc.vue
index 74a1e6500..3b852007b 100644
--- a/doc/dynamicdialog/OpenDialogDoc.vue
+++ b/doc/dynamicdialog/OpenDialogDoc.vue
@@ -20,6 +20,7 @@ export default {
         }
     }
 }
+
 `,
                 options: `
 import ProductListDemo from './ProductListDemo';
@@ -30,7 +31,8 @@ export default {
             this.$dialog.open(ProductListDemo, {});
         }
     }
-}`,
+}
+`,
                 composition: `
 import ProductListDemo from './ProductListDemo';
 import { useDialog } from 'primevue/usedialog';
diff --git a/doc/dynamicdialog/UsageDoc.vue b/doc/dynamicdialog/UsageDoc.vue
index 2fa311947..a5da5487d 100644
--- a/doc/dynamicdialog/UsageDoc.vue
+++ b/doc/dynamicdialog/UsageDoc.vue
@@ -25,7 +25,8 @@ export default {
                 basic: `
 <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
 
-<DynamicDialog />`,
+<DynamicDialog />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -73,7 +74,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -121,7 +123,8 @@ const showProducts = () => {
         }
     });
 }
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
@@ -199,7 +202,8 @@ export default {
         }
     }
 }
-<\/script>`
+<\/script>
+`
                     },
                     'src/components/InfoDemo.vue': {
                         content: `
@@ -248,7 +252,8 @@ export default {
         }
     }
 };
-<\/script>`
+<\/script>
+`
                     }
                 },
                 composition: {
@@ -311,7 +316,8 @@ const showInfo = () => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
                     },
                     'src/components/InfoDemo.vue': {
                         content: `
@@ -355,7 +361,8 @@ const dialogRef = inject("dialogRef");
 const closeDialog = (e) => {
     dialogRef.value.close(e);
 };
-<\/script>`
+<\/script>
+`
                     }
                 }
             }
diff --git a/doc/dynamicdialog/pt/PTDoc.vue b/doc/dynamicdialog/pt/PTDoc.vue
index b58499063..f4fd93943 100644
--- a/doc/dynamicdialog/pt/PTDoc.vue
+++ b/doc/dynamicdialog/pt/PTDoc.vue
@@ -13,7 +13,8 @@ export default {
     :pt="{
         root: { class: 'w-12 sm:w-9 md:w-6' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <DynamicDialog
@@ -21,7 +22,8 @@ export default {
             root: { class: 'w-12 sm:w-9 md:w-6' }
         }"
     />
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <DynamicDialog
diff --git a/doc/dynamicdialog/theming/TailwindDoc.vue b/doc/dynamicdialog/theming/TailwindDoc.vue
index 8abdfd89c..1f18377df 100644
--- a/doc/dynamicdialog/theming/TailwindDoc.vue
+++ b/doc/dynamicdialog/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     dialog: {
         root: ({ state }) => ({
             class: [
@@ -148,7 +149,8 @@ const showProducts = () => {
         }
     });
 }
-<\/script>`
+<\/script>
+`
             },
             extFiles: {
                 options: {
@@ -211,7 +213,8 @@ export default {
         }
     }
 }
-<\/script>`
+<\/script>
+`
                     },
                     'src/components/InfoDemo.vue': {
                         content: `
@@ -260,7 +263,8 @@ export default {
         }
     }
 };
-<\/script>`
+<\/script>
+`
                     }
                 },
                 composition: {
@@ -323,7 +327,8 @@ const showInfo = () => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
                     },
                     'src/components/InfoDemo.vue': {
                         content: `
@@ -367,7 +372,8 @@ const dialogRef = inject("dialogRef");
 const closeDialog = (e) => {
     dialogRef.value.close(e);
 };
-<\/script>`
+<\/script>
+`
                     }
                 }
             }
diff --git a/doc/editor/BasicDoc.vue b/doc/editor/BasicDoc.vue
index fb0567cf4..7a3053a22 100644
--- a/doc/editor/BasicDoc.vue
+++ b/doc/editor/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: '',
             code: {
                 basic: `
-<Editor v-model="value" editorStyle="height: 320px" />`,
+<Editor v-model="value" editorStyle="height: 320px" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -31,7 +32,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/editor/ReadOnlyDoc.vue b/doc/editor/ReadOnlyDoc.vue
index fee704c10..1789f8534 100644
--- a/doc/editor/ReadOnlyDoc.vue
+++ b/doc/editor/ReadOnlyDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 'Always bet on Prime',
             code: {
                 basic: `
-<Editor v-model="value" editorStyle="height: 320px" readonly />`,
+<Editor v-model="value" editorStyle="height: 320px" readonly />
+`,
                 options: `
 <template>
     <div class="card">
@@ -31,7 +32,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref('Always bet on Prime');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/editor/TemplateDoc.vue b/doc/editor/TemplateDoc.vue
index cc2411c36..131f88ddc 100644
--- a/doc/editor/TemplateDoc.vue
+++ b/doc/editor/TemplateDoc.vue
@@ -31,7 +31,8 @@ export default {
             <button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
         </span>
     </template>
-</Editor>`,
+</Editor>
+`,
                 options: `
 <template>
     <div class="card">
@@ -55,7 +56,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -75,7 +77,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref('<div>Hello World!</div><div>PrimeVue <b>Editor</b> Rocks</div><div><br></div>');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/editor/form/VeeValidateDoc.vue b/doc/editor/form/VeeValidateDoc.vue
index 489924644..2e7c8f50e 100644
--- a/doc/editor/form/VeeValidateDoc.vue
+++ b/doc/editor/form/VeeValidateDoc.vue
@@ -72,7 +72,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card">
@@ -123,7 +124,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/editor/pt/PTDoc.vue b/doc/editor/pt/PTDoc.vue
index 9bf43877d..1ec8f90f2 100644
--- a/doc/editor/pt/PTDoc.vue
+++ b/doc/editor/pt/PTDoc.vue
@@ -25,7 +25,8 @@ export default {
         content: { style: { height: '320px' } },
         toolbar: { class: 'surface-ground' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card">
@@ -47,7 +48,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -65,7 +67,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/editor/theming/TailwindDoc.vue b/doc/editor/theming/TailwindDoc.vue
index 039a3c137..aca51d443 100644
--- a/doc/editor/theming/TailwindDoc.vue
+++ b/doc/editor/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     editor: {
         toolbar: {
             class: ['bg-gray-100 rounded-tr-md rounded-tl-md', 'border border-gray-300 box-border font-sans px-2 py-1']
@@ -42,7 +43,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/fieldset/BasicDoc.vue b/doc/fieldset/BasicDoc.vue
index c89bd849f..2e5b5e431 100644
--- a/doc/fieldset/BasicDoc.vue
+++ b/doc/fieldset/BasicDoc.vue
@@ -24,7 +24,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Fieldset>`,
+</Fieldset>
+`,
                 options: `
 <template>
     <div class="card">
@@ -38,7 +39,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -52,7 +54,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/fieldset/TemplateDoc.vue b/doc/fieldset/TemplateDoc.vue
index 435d76f2b..aa77b686b 100644
--- a/doc/fieldset/TemplateDoc.vue
+++ b/doc/fieldset/TemplateDoc.vue
@@ -36,7 +36,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Fieldset>`,
+</Fieldset>
+`,
                 options: `
 <template>
     <div class="card">
@@ -56,7 +57,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -76,7 +78,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/fieldset/ToggleableDoc.vue b/doc/fieldset/ToggleableDoc.vue
index d9a617781..58fc61f00 100644
--- a/doc/fieldset/ToggleableDoc.vue
+++ b/doc/fieldset/ToggleableDoc.vue
@@ -27,7 +27,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Fieldset>`,
+</Fieldset>
+`,
                 options: `
 <template>
     <div class="card">
@@ -41,7 +42,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -55,7 +57,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/fieldset/pt/PTDoc.vue b/doc/fieldset/pt/PTDoc.vue
index 32e523dac..0d016a45e 100644
--- a/doc/fieldset/pt/PTDoc.vue
+++ b/doc/fieldset/pt/PTDoc.vue
@@ -29,7 +29,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Fieldset>`,
+</Fieldset>
+`,
                 options: `
 <template>
     <div class="card">
@@ -47,7 +48,8 @@ export default {
             </p>
         </Fieldset>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/fieldset/theming/TailwindDoc.vue b/doc/fieldset/theming/TailwindDoc.vue
index e959f8cfd..efc0618be 100644
--- a/doc/fieldset/theming/TailwindDoc.vue
+++ b/doc/fieldset/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     toggleable: {
         enterFromClass: 'max-h-0',
         enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
@@ -75,7 +76,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/fileupload/AdvancedDoc.vue b/doc/fileupload/AdvancedDoc.vue
index d1830598e..95a46750b 100644
--- a/doc/fileupload/AdvancedDoc.vue
+++ b/doc/fileupload/AdvancedDoc.vue
@@ -22,7 +22,8 @@ export default {
     <template #empty>
         <p>Drag and drop files to here to upload.</p>
     </template>
-</FileUpload>`,
+</FileUpload>
+`,
                 options: `
 <template>
     <div class="card">
@@ -43,7 +44,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -63,7 +65,8 @@ const toast = useToast();
 const onAdvancedUpload = () => {
     toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/fileupload/AutoDoc.vue b/doc/fileupload/AutoDoc.vue
index 37bee4912..6c83588f4 100644
--- a/doc/fileupload/AutoDoc.vue
+++ b/doc/fileupload/AutoDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />`,
+<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
+`,
                 options: `
 <template>
   <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
       }
   }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
   <div class="card flex justify-content-center">
@@ -47,7 +49,8 @@ const toast = useToast();
 const onUpload = () => {
   toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/fileupload/BasicDoc.vue b/doc/fileupload/BasicDoc.vue
index 08a07f926..31ad586fe 100644
--- a/doc/fileupload/BasicDoc.vue
+++ b/doc/fileupload/BasicDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />`,
+<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -47,7 +49,8 @@ const toast = useToast();
 const onUpload = () => {
     toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/fileupload/CustomUploadDoc.vue b/doc/fileupload/CustomUploadDoc.vue
index 4ebed84be..2a32ade46 100644
--- a/doc/fileupload/CustomUploadDoc.vue
+++ b/doc/fileupload/CustomUploadDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />`,
+<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -38,7 +39,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +60,8 @@ const customBase64Uploader = async (event) => {
         const base64data = reader.result;
     };
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/fileupload/TemplateDoc.vue b/doc/fileupload/TemplateDoc.vue
index 7daeb8899..16be48338 100644
--- a/doc/fileupload/TemplateDoc.vue
+++ b/doc/fileupload/TemplateDoc.vue
@@ -117,7 +117,8 @@ export default {
             <p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
         </div>
     </template>
-</FileUpload>`,
+</FileUpload>
+`,
                 options: `
 <template>
     <div class="card">
@@ -225,7 +226,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -334,7 +336,8 @@ const formatSize = (bytes) => {
 
     return \`\${formattedSize} \${sizes[i]}\`;
 },
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/fileupload/pt/PTDoc.vue b/doc/fileupload/pt/PTDoc.vue
index 39d764391..c8c78dfab 100644
--- a/doc/fileupload/pt/PTDoc.vue
+++ b/doc/fileupload/pt/PTDoc.vue
@@ -40,7 +40,8 @@ export default {
     <template #empty>
         <p>Drag and drop files to here to upload.</p>
     </template>
-</FileUpload>`,
+</FileUpload>
+`,
                 options: `
 <template>
     <div class="card">
@@ -71,7 +72,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -101,7 +103,8 @@ const toast = useToast();
 const onAdvancedUpload = () => {
     toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/fileupload/theming/TailwindDoc.vue b/doc/fileupload/theming/TailwindDoc.vue
index b05f66576..e3bf25499 100644
--- a/doc/fileupload/theming/TailwindDoc.vue
+++ b/doc/fileupload/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     fileupload: {
         input: 'hidden',
         buttonbar: {
@@ -66,7 +67,8 @@ const toast = useToast();
 const onAdvancedUpload = () => {
     toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/filterservice/TableIntegrationDoc.vue b/doc/filterservice/TableIntegrationDoc.vue
index b46ec9bc2..534128a82 100644
--- a/doc/filterservice/TableIntegrationDoc.vue
+++ b/doc/filterservice/TableIntegrationDoc.vue
@@ -69,7 +69,8 @@ export default {
             <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" :placeholder="\`Search by country - \${filterModel.matchMode}\`" />
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -137,7 +138,8 @@ export default {
         });
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -202,7 +204,8 @@ const matchModeOptions = ref([
 ]);
 const loading = ref(true);
 
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/focustrap/BasicDoc.vue b/doc/focustrap/BasicDoc.vue
index fa5f032c8..dc535de87 100644
--- a/doc/focustrap/BasicDoc.vue
+++ b/doc/focustrap/BasicDoc.vue
@@ -90,7 +90,8 @@ export default {
         </div>
         <Button type="submit" label="Submit" class="mt-2" />
     </div>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="flex justify-content-center p-fluid">
@@ -144,7 +145,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="flex justify-content-center p-fluid">
@@ -194,7 +196,8 @@ const name = ref();
 const email = ref();
 const password = ref();
 const accept = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/galleria/AdvancedDoc.vue b/doc/galleria/AdvancedDoc.vue
index a8608cb1d..d30e01202 100644
--- a/doc/galleria/AdvancedDoc.vue
+++ b/doc/galleria/AdvancedDoc.vue
@@ -78,7 +78,8 @@ export default {
             <Button :icon="fullScreenIcon" @click="toggleFullScreen" class="fullscreen-button" />
         </div>
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -257,7 +258,8 @@ export default {
         }
     }
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/galleria/AutoPlayDoc.vue b/doc/galleria/AutoPlayDoc.vue
index e4d50f2d1..b26b2eaa9 100644
--- a/doc/galleria/AutoPlayDoc.vue
+++ b/doc/galleria/AutoPlayDoc.vue
@@ -46,7 +46,8 @@ export default {
     <template #thumbnail="slotProps">
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -89,7 +90,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -128,7 +130,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/BasicDoc.vue b/doc/galleria/BasicDoc.vue
index 90d013e3e..6eee4ab03 100644
--- a/doc/galleria/BasicDoc.vue
+++ b/doc/galleria/BasicDoc.vue
@@ -45,7 +45,8 @@ export default {
     <template #thumbnail="slotProps">
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -87,7 +88,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -125,7 +127,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/CaptionDoc.vue b/doc/galleria/CaptionDoc.vue
index 8aca39f4f..eee641abe 100644
--- a/doc/galleria/CaptionDoc.vue
+++ b/doc/galleria/CaptionDoc.vue
@@ -53,7 +53,8 @@ export default {
         <div class="text-xl mb-2 font-bold">{{ slotProps.item.title }}</div>
         <p class="text-white">{{ slotProps.item.alt }}</p>
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -99,7 +100,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -141,7 +143,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/ControlledDoc.vue b/doc/galleria/ControlledDoc.vue
index bb48721ac..02b22bfff 100644
--- a/doc/galleria/ControlledDoc.vue
+++ b/doc/galleria/ControlledDoc.vue
@@ -56,7 +56,8 @@ export default {
     <template #thumbnail="slotProps">
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -112,7 +113,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -163,7 +165,8 @@ const next = () => {
 const prev = () => {
     activeIndex.value = activeIndex.value === 0 ? 0 : activeIndex.value - 1;
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/ResponsiveDoc.vue b/doc/galleria/ResponsiveDoc.vue
index 784783c17..6059c6aeb 100644
--- a/doc/galleria/ResponsiveDoc.vue
+++ b/doc/galleria/ResponsiveDoc.vue
@@ -47,7 +47,8 @@ export default {
     <template #thumbnail="slotProps">
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card md:flex md:justify-content-center">
@@ -89,7 +90,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card md:flex md:justify-content-center">
@@ -127,7 +129,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/ThumbnailDoc.vue b/doc/galleria/ThumbnailDoc.vue
index 9fbf42528..1faea1442 100644
--- a/doc/galleria/ThumbnailDoc.vue
+++ b/doc/galleria/ThumbnailDoc.vue
@@ -76,7 +76,8 @@ export default {
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
         </div>
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -147,7 +148,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -214,7 +216,8 @@ const responsiveOptions = ref([
 onMounted(() => {
     PhotoService.getImages().then((data) => (images.value = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/fullscreen/CustomContentDoc.vue b/doc/galleria/fullscreen/CustomContentDoc.vue
index c37d71671..c620758ad 100644
--- a/doc/galleria/fullscreen/CustomContentDoc.vue
+++ b/doc/galleria/fullscreen/CustomContentDoc.vue
@@ -65,7 +65,8 @@ export default {
     <template #thumbnail="slotProps">
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -122,7 +123,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -174,7 +176,8 @@ const imageClick = (index) => {
     activeIndex.value = index;
     displayCustom.value = true;
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/fullscreen/WithThumbnailsDoc.vue b/doc/galleria/fullscreen/WithThumbnailsDoc.vue
index d568805e1..1f392833a 100644
--- a/doc/galleria/fullscreen/WithThumbnailsDoc.vue
+++ b/doc/galleria/fullscreen/WithThumbnailsDoc.vue
@@ -54,7 +54,8 @@ export default {
     </template>
 </Galleria>
 
-<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />`,
+<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -103,7 +104,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -148,7 +150,8 @@ const displayBasic = ref(false);
 onMounted(() => {
     PhotoService.getImages().then((data) => (images.value = data));
 })
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
index 65f4a21ec..30e1591d2 100644
--- a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
+++ b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
@@ -54,7 +54,8 @@ export default {
     </template>
 </Galleria>
 
-<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />`,
+<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -103,7 +104,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -148,7 +150,8 @@ const displayBasic = ref(false);
 onMounted(() => {
     PhotoService.getImages().then((data) => (images.value = data));
 })
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/indicator/ClickEventDoc.vue b/doc/galleria/indicator/ClickEventDoc.vue
index c4d4b2301..be3bcc9ee 100644
--- a/doc/galleria/indicator/ClickEventDoc.vue
+++ b/doc/galleria/indicator/ClickEventDoc.vue
@@ -40,7 +40,8 @@ export default {
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -80,7 +81,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -116,7 +118,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/indicator/HoverEventDoc.vue b/doc/galleria/indicator/HoverEventDoc.vue
index 6af932cc4..86286b4ca 100644
--- a/doc/galleria/indicator/HoverEventDoc.vue
+++ b/doc/galleria/indicator/HoverEventDoc.vue
@@ -40,7 +40,8 @@ export default {
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -80,7 +81,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -116,7 +118,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/indicator/PositionDoc.vue b/doc/galleria/indicator/PositionDoc.vue
index e29a3de9d..710241c62 100644
--- a/doc/galleria/indicator/PositionDoc.vue
+++ b/doc/galleria/indicator/PositionDoc.vue
@@ -56,7 +56,8 @@ export default {
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -111,7 +112,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -164,7 +166,8 @@ const positionOptions = ref([
     }
 ]);
 
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/indicator/TemplateDoc.vue b/doc/galleria/indicator/TemplateDoc.vue
index 5c1636b60..fcc3aa8ad 100644
--- a/doc/galleria/indicator/TemplateDoc.vue
+++ b/doc/galleria/indicator/TemplateDoc.vue
@@ -46,7 +46,8 @@ export default {
     <template #indicator="{ index }">
         <span style="color: '#ffffff', cursor: pointer">{{ index + 1 }}</span>
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -75,7 +76,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -100,7 +102,8 @@ onMounted(() => {
 });
 
 const images = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/navigator/HoverDoc.vue b/doc/galleria/navigator/HoverDoc.vue
index 3d655a6a3..ac86584d8 100644
--- a/doc/galleria/navigator/HoverDoc.vue
+++ b/doc/galleria/navigator/HoverDoc.vue
@@ -45,7 +45,8 @@ export default {
     <template #thumbnail="slotProps">
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -87,7 +88,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -125,7 +127,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/navigator/IndicatorsDoc.vue b/doc/galleria/navigator/IndicatorsDoc.vue
index 1ecd02a59..c1d1f6cfc 100644
--- a/doc/galleria/navigator/IndicatorsDoc.vue
+++ b/doc/galleria/navigator/IndicatorsDoc.vue
@@ -46,7 +46,8 @@ export default {
     <template #thumbnail="slotProps">
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -89,7 +90,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -128,7 +130,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/navigator/ItemThumbnailsDoc.vue b/doc/galleria/navigator/ItemThumbnailsDoc.vue
index de53c3dc8..09e8a54d1 100644
--- a/doc/galleria/navigator/ItemThumbnailsDoc.vue
+++ b/doc/galleria/navigator/ItemThumbnailsDoc.vue
@@ -46,7 +46,8 @@ export default {
     <template #thumbnail="slotProps">
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -89,7 +90,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -128,7 +130,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
index fac8a88f0..3a2f07348 100644
--- a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
+++ b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
@@ -46,7 +46,8 @@ export default {
     <template #thumbnail="slotProps">
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card">
@@ -89,7 +90,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -128,7 +130,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/pt/PTDoc.vue b/doc/galleria/pt/PTDoc.vue
index c72f84945..5f0231515 100644
--- a/doc/galleria/pt/PTDoc.vue
+++ b/doc/galleria/pt/PTDoc.vue
@@ -57,7 +57,8 @@ export default {
     <template #thumbnail="slotProps">
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
     </template>
-</Galleria>`,
+</Galleria>
+`,
                 options: `
 <template>
     <div class="card md:flex md:justify-content-center">
@@ -106,7 +107,8 @@ export default {
         PhotoService.getImages().then((data) => (this.images = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card md:flex md:justify-content-center">
@@ -151,7 +153,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* PhotoService */
 {
diff --git a/doc/galleria/theming/TailwindDoc.vue b/doc/galleria/theming/TailwindDoc.vue
index b1c759358..0fb4a271f 100644
--- a/doc/galleria/theming/TailwindDoc.vue
+++ b/doc/galleria/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     galleria: {
         root: 'flex flex-col',
         content: 'flex flex-col',
@@ -144,7 +145,8 @@ const responsiveOptions = ref([
         numVisible: 1
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/image/BasicDoc.vue b/doc/image/BasicDoc.vue
index a2b4af0aa..e6b20c94a 100644
--- a/doc/image/BasicDoc.vue
+++ b/doc/image/BasicDoc.vue
@@ -14,13 +14,15 @@ export default {
         return {
             code: {
                 basic: `
-<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />`,
+<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/image/PreviewDoc.vue b/doc/image/PreviewDoc.vue
index 51575a899..1440385e0 100644
--- a/doc/image/PreviewDoc.vue
+++ b/doc/image/PreviewDoc.vue
@@ -15,13 +15,15 @@ export default {
         return {
             code: {
                 basic: `
-<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />`,
+<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/image/TemplateDoc.vue b/doc/image/TemplateDoc.vue
index cca7a2631..aa1d1311c 100644
--- a/doc/image/TemplateDoc.vue
+++ b/doc/image/TemplateDoc.vue
@@ -34,7 +34,8 @@ export default {
     <template #preview="slotProps">
         <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
     </template>
-</Image>`,
+</Image>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -50,7 +51,8 @@ export default {
             </template>
         </Image>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/image/pt/PTDoc.vue b/doc/image/pt/PTDoc.vue
index 41c2acb34..1a346274d 100644
--- a/doc/image/pt/PTDoc.vue
+++ b/doc/image/pt/PTDoc.vue
@@ -29,7 +29,8 @@ export default {
     :pt="{
         image: { class: 'w-15rem' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +44,8 @@ export default {
             }"
         />
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/image/theming/TailwindDoc.vue b/doc/image/theming/TailwindDoc.vue
index dfd208480..be349f00f 100644
--- a/doc/image/theming/TailwindDoc.vue
+++ b/doc/image/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     image: {
         root: 'relative inline-block',
         button: {
diff --git a/doc/inlinemessage/AccessibilityDoc.vue b/doc/inlinemessage/AccessibilityDoc.vue
index 74c7bfdf6..21882ba72 100644
--- a/doc/inlinemessage/AccessibilityDoc.vue
+++ b/doc/inlinemessage/AccessibilityDoc.vue
@@ -69,7 +69,8 @@ const openDialog = () => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inlinemessage/BasicDoc.vue b/doc/inlinemessage/BasicDoc.vue
index 054978027..abbbfb752 100644
--- a/doc/inlinemessage/BasicDoc.vue
+++ b/doc/inlinemessage/BasicDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<InlineMessage severity="info">Username is required</InlineMessage>`,
+<InlineMessage severity="info">Username is required</InlineMessage>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inlinemessage/FormDoc.vue b/doc/inlinemessage/FormDoc.vue
index b6c34d462..fec1cb245 100644
--- a/doc/inlinemessage/FormDoc.vue
+++ b/doc/inlinemessage/FormDoc.vue
@@ -32,7 +32,8 @@ export default {
     <label for="email" class="p-sr-only">email</label>
     <InputText id="email" placeholder="Email" class="p-invalid" />
     <InlineMessage />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card">
@@ -50,7 +51,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -68,7 +70,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inlinemessage/SeverityDoc.vue b/doc/inlinemessage/SeverityDoc.vue
index b26e4b36f..3f95da6e3 100644
--- a/doc/inlinemessage/SeverityDoc.vue
+++ b/doc/inlinemessage/SeverityDoc.vue
@@ -20,7 +20,8 @@ export default {
 <InlineMessage severity="success">Success Content</InlineMessage>
 <InlineMessage severity="info">Info Content</InlineMessage>
 <InlineMessage severity="warn">Warning Content</InlineMessage>
-<InlineMessage severity="error">Error Content</InlineMessage>`,
+<InlineMessage severity="error">Error Content</InlineMessage>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
@@ -32,7 +33,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
@@ -44,7 +46,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inlinemessage/TemplateDoc.vue b/doc/inlinemessage/TemplateDoc.vue
index 661eff5be..d4859b7da 100644
--- a/doc/inlinemessage/TemplateDoc.vue
+++ b/doc/inlinemessage/TemplateDoc.vue
@@ -33,7 +33,8 @@ export default {
         <img alt="logo" src="/images/logo.svg" width="32" />
         <div class="ml-2">Always bet on Prime.</div>
     </div>
-</InlineMessage>`,
+</InlineMessage>
+`,
                 options: `
 <template>
     <div class="card">
@@ -48,7 +49,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -63,7 +65,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inlinemessage/pt/PTDoc.vue b/doc/inlinemessage/pt/PTDoc.vue
index b6c0b4ab5..6ae5a8c5c 100644
--- a/doc/inlinemessage/pt/PTDoc.vue
+++ b/doc/inlinemessage/pt/PTDoc.vue
@@ -26,7 +26,8 @@ export default {
     }"
 >
     Username is required
-</InlineMessage>`,
+</InlineMessage>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -42,7 +43,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +60,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inlinemessage/theming/TailwindDoc.vue b/doc/inlinemessage/theming/TailwindDoc.vue
index 1ff4ef2ca..fd48ae81d 100644
--- a/doc/inlinemessage/theming/TailwindDoc.vue
+++ b/doc/inlinemessage/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     inlinemessage: {
         root: ({ props }) => ({
             class: [
@@ -46,7 +47,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inplace/BasicDoc.vue b/doc/inplace/BasicDoc.vue
index 39cd6c609..e8a59a792 100644
--- a/doc/inplace/BasicDoc.vue
+++ b/doc/inplace/BasicDoc.vue
@@ -30,7 +30,8 @@ export default {
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
     </template>
-</Inplace>`,
+</Inplace>
+`,
                 options: `
 <template>
     <div class="card">
@@ -48,7 +49,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -66,7 +68,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inplace/ImageDoc.vue b/doc/inplace/ImageDoc.vue
index 8e918629e..0d76ce117 100644
--- a/doc/inplace/ImageDoc.vue
+++ b/doc/inplace/ImageDoc.vue
@@ -30,7 +30,8 @@ export default {
     <template #content>
         <img class="w-full" alt="Nature" src="/images/nature/nature1.jpg" />
     </template>
-</Inplace>`,
+</Inplace>
+`,
                 options: `
 <template>
     <div class="card">
@@ -47,7 +48,8 @@ export default {
 </template>
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -65,7 +67,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inplace/InputDoc.vue b/doc/inplace/InputDoc.vue
index 93e7f78e8..b29fec86e 100644
--- a/doc/inplace/InputDoc.vue
+++ b/doc/inplace/InputDoc.vue
@@ -29,7 +29,8 @@ export default {
     <template #content>
         <InputText v-model="text" autofocus />
     </template>
-</Inplace>`,
+</Inplace>
+`,
                 options: `
 <template>
     <div class="card">
@@ -52,7 +53,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ export default {
 import { ref } from "vue";
 
 const text = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inplace/LazyDoc.vue b/doc/inplace/LazyDoc.vue
index 51a761fce..45cd0f3a1 100644
--- a/doc/inplace/LazyDoc.vue
+++ b/doc/inplace/LazyDoc.vue
@@ -37,7 +37,8 @@ export default {
             <Column field="quantity" header="Quantity"></Column>
         </DataTable>
     </template>
-</Inplace>`,
+</Inplace>
+`,
                 options: `
 <template>
     <div class="card">
@@ -70,7 +71,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -97,7 +99,8 @@ const products = ref();
 const loadData = () => {
     ProductService.getProductsSmall().then((data) => (products.value = data));
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/inplace/pt/PTDoc.vue b/doc/inplace/pt/PTDoc.vue
index f5757d787..e5aa268b7 100644
--- a/doc/inplace/pt/PTDoc.vue
+++ b/doc/inplace/pt/PTDoc.vue
@@ -36,7 +36,8 @@ export default {
             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
     </template>
-</Inplace>`,
+</Inplace>
+`,
                 options: `
 <template>
     <div class="card">
@@ -58,7 +59,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -80,7 +82,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inplace/theming/TailwindDoc.vue b/doc/inplace/theming/TailwindDoc.vue
index 140e119c6..fc734adb1 100644
--- a/doc/inplace/theming/TailwindDoc.vue
+++ b/doc/inplace/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     inplace: {
         display: {
             class: ['p-3 rounded-md transition duration-200 text-gray-700 dark:text-white/80', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80']
@@ -44,7 +45,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputgroup/BasicDoc.vue b/doc/inputgroup/BasicDoc.vue
index d6aafe555..694975cf2 100644
--- a/doc/inputgroup/BasicDoc.vue
+++ b/doc/inputgroup/BasicDoc.vue
@@ -46,7 +46,8 @@ export default {
 <div class="p-inputgroup flex-1">
     <span class="p-inputgroup-addon">www</span>
     <InputText placeholder="Website" />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
@@ -68,7 +69,8 @@ export default {
             <InputText placeholder="Website" />
         </div>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
diff --git a/doc/inputgroup/ButtonDoc.vue b/doc/inputgroup/ButtonDoc.vue
index 51beacbc6..55a8cac7f 100644
--- a/doc/inputgroup/ButtonDoc.vue
+++ b/doc/inputgroup/ButtonDoc.vue
@@ -42,7 +42,8 @@ export default {
     <Button icon="pi pi-check" severity="success" />
     <InputText placeholder="Vote" />
     <Button icon="pi pi-times" severity="danger" />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
@@ -62,7 +63,8 @@ export default {
             <Button icon="pi pi-times" severity="danger" />
         </div>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
diff --git a/doc/inputgroup/CheckboxDoc.vue b/doc/inputgroup/CheckboxDoc.vue
index 01f0b74a7..7f0b52dad 100644
--- a/doc/inputgroup/CheckboxDoc.vue
+++ b/doc/inputgroup/CheckboxDoc.vue
@@ -62,7 +62,8 @@ export default {
     <span class="p-inputgroup-addon">
         <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
     </span>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
@@ -103,7 +104,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column md:flex-row gap-3">
@@ -140,7 +142,8 @@ const checked1 = ref(false);
 const checked2 = ref(false);
 const radioValue1 = ref('');
 const radioValue2 = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputgroup/MultipleDoc.vue b/doc/inputgroup/MultipleDoc.vue
index e559dd649..f4f2ad1dc 100644
--- a/doc/inputgroup/MultipleDoc.vue
+++ b/doc/inputgroup/MultipleDoc.vue
@@ -34,7 +34,8 @@ export default {
     <InputNumber placeholder="Price" />
     <span class="p-inputgroup-addon">$</span>
     <span class="p-inputgroup-addon">.00</span>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -50,7 +51,8 @@ export default {
             <span class="p-inputgroup-addon">.00</span>
         </div>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputmask/AccessibilityDoc.vue b/doc/inputmask/AccessibilityDoc.vue
index 2128e3620..8151c7a03 100644
--- a/doc/inputmask/AccessibilityDoc.vue
+++ b/doc/inputmask/AccessibilityDoc.vue
@@ -39,7 +39,8 @@ export default {
 <span id="phone">Phone</span>
 <InputMask aria-labelledby="phone" />
 
-<InputMask aria-label="Age" />`
+<InputMask aria-label="Age" />
+`
             }
         };
     }
diff --git a/doc/inputmask/BasicDoc.vue b/doc/inputmask/BasicDoc.vue
index 950a899a2..da5bfa3b0 100644
--- a/doc/inputmask/BasicDoc.vue
+++ b/doc/inputmask/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: '',
             code: {
                 basic: `
-<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />`,
+<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +33,8 @@ export default {
     }
 }
 <\/script>
-        `,
+        
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputmask/DisabledDoc.vue b/doc/inputmask/DisabledDoc.vue
index a27b6aa28..96d91e789 100644
--- a/doc/inputmask/DisabledDoc.vue
+++ b/doc/inputmask/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: '',
             code: {
                 basic: `
-<InputMask mask="99-999999" placeholder="99-999999" disabled />`,
+<InputMask mask="99-999999" placeholder="99-999999" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +33,8 @@ export default {
     }
 }
 <\/script>
-        `,
+        
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputmask/FloatLabelDoc.vue b/doc/inputmask/FloatLabelDoc.vue
index 5f73f0407..588649835 100644
--- a/doc/inputmask/FloatLabelDoc.vue
+++ b/doc/inputmask/FloatLabelDoc.vue
@@ -21,7 +21,8 @@ export default {
 <span class="p-float-label">
     <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
     <label for="ssn">SSN</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -41,7 +42,8 @@ export default {
     }
 }
 <\/script>
-        `,
+        
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputmask/InvalidDoc.vue b/doc/inputmask/InvalidDoc.vue
index 90c10ff55..576046b4c 100644
--- a/doc/inputmask/InvalidDoc.vue
+++ b/doc/inputmask/InvalidDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: '',
             code: {
                 basic: `
-<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>`,
+<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +33,8 @@ export default {
     }
 }
 <\/script>
-        `,
+        
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputmask/MaskDoc.vue b/doc/inputmask/MaskDoc.vue
index 4d6b0be08..be3422989 100644
--- a/doc/inputmask/MaskDoc.vue
+++ b/doc/inputmask/MaskDoc.vue
@@ -46,7 +46,8 @@ export default {
 <div class="flex-auto">
     <label for="serial">Serial</label>
     <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card p-fluid flex flex-wrap gap-3">
@@ -78,7 +79,8 @@ export default {
     }
 }
 <\/script>
-        `,
+        
+`,
                 composition: `
 <template>
     <div class="card p-fluid flex flex-wrap gap-3">
@@ -105,7 +107,8 @@ import { ref } from 'vue';
 const value1 = ref('');
 const value2 = ref('');
 const value3 = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputmask/OptionalDoc.vue b/doc/inputmask/OptionalDoc.vue
index 66ae36a40..e417c786f 100644
--- a/doc/inputmask/OptionalDoc.vue
+++ b/doc/inputmask/OptionalDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: '',
             code: {
                 basic: `
-<InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />`,
+<InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +33,8 @@ export default {
     }
 }
 <\/script>
-        `,
+        
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputmask/SlotCharDoc.vue b/doc/inputmask/SlotCharDoc.vue
index 961c0e97a..e89f582f8 100644
--- a/doc/inputmask/SlotCharDoc.vue
+++ b/doc/inputmask/SlotCharDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: '',
             code: {
                 basic: `
-<InputMask id="basic" v-model="value" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />`,
+<InputMask id="basic" v-model="value" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
       }
   }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputmask/form/VeeValidateDoc.vue b/doc/inputmask/form/VeeValidateDoc.vue
index 945ae7a78..64a988a20 100644
--- a/doc/inputmask/form/VeeValidateDoc.vue
+++ b/doc/inputmask/form/VeeValidateDoc.vue
@@ -53,7 +53,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -95,7 +96,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputmask/pt/PTDoc.vue b/doc/inputmask/pt/PTDoc.vue
index f6a8a5d42..b7a928a68 100644
--- a/doc/inputmask/pt/PTDoc.vue
+++ b/doc/inputmask/pt/PTDoc.vue
@@ -29,7 +29,8 @@ export default {
     :pt="{
         root: { class: 'border-teal-400' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -54,7 +55,8 @@ export default {
     }
 }
 <\/script>
-        `,
+        
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputmask/theming/TailwindDoc.vue b/doc/inputmask/theming/TailwindDoc.vue
index daad27270..5e9b74243 100644
--- a/doc/inputmask/theming/TailwindDoc.vue
+++ b/doc/inputmask/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     inputmask: {
         root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md'
     }
diff --git a/doc/inputnumber/AccessibilityDoc.vue b/doc/inputnumber/AccessibilityDoc.vue
index aed9e34ba..ee18eeb3f 100644
--- a/doc/inputnumber/AccessibilityDoc.vue
+++ b/doc/inputnumber/AccessibilityDoc.vue
@@ -56,7 +56,8 @@ export default {
 <span id="label_number">Number</span>
 <InputNumber aria-labelledby="label_number" />
 
-<InputNumber aria-label="Number" />`
+<InputNumber aria-label="Number" />
+`
             }
         };
     }
diff --git a/doc/inputnumber/ButtonsDoc.vue b/doc/inputnumber/ButtonsDoc.vue
index 1649be3eb..3294e0f6d 100644
--- a/doc/inputnumber/ButtonsDoc.vue
+++ b/doc/inputnumber/ButtonsDoc.vue
@@ -45,7 +45,8 @@ export default {
 <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
 <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25"
     decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
-    mode="currency" currency="EUR" />`,
+    mode="currency" currency="EUR" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -77,7 +78,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -105,7 +107,8 @@ import { ref } from "vue";
 const value1 = ref(20);
 const value2 = ref(25);
 const value3 = ref(10.5);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputnumber/CurrencyDoc.vue b/doc/inputnumber/CurrencyDoc.vue
index 0d1d451d9..650fef36d 100644
--- a/doc/inputnumber/CurrencyDoc.vue
+++ b/doc/inputnumber/CurrencyDoc.vue
@@ -36,7 +36,8 @@ export default {
 <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
 <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
 <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
-<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />`,
+<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -70,7 +71,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -100,7 +102,8 @@ const value1 = ref(1500);
 const value2 = ref(2500);
 const value3 = ref(4250);
 const value4 = ref(5002);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputnumber/DisabledDoc.vue b/doc/inputnumber/DisabledDoc.vue
index 70706100b..3087646da 100644
--- a/doc/inputnumber/DisabledDoc.vue
+++ b/doc/inputnumber/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 50,
             code: {
                 basic: `
-<InputNumber v-model="value" disabled prefix="%" />`,
+<InputNumber v-model="value" disabled prefix="%" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref(50);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputnumber/FloatLabelDoc.vue b/doc/inputnumber/FloatLabelDoc.vue
index c912741de..4fcbee4da 100644
--- a/doc/inputnumber/FloatLabelDoc.vue
+++ b/doc/inputnumber/FloatLabelDoc.vue
@@ -21,7 +21,8 @@ export default {
 <span class="p-float-label">
     <InputNumber id="number-input" v-model="value" />
     <label for="number-input">Number</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -40,7 +41,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +57,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputnumber/InvalidDoc.vue b/doc/inputnumber/InvalidDoc.vue
index f51e0cd65..1f84e76d5 100644
--- a/doc/inputnumber/InvalidDoc.vue
+++ b/doc/inputnumber/InvalidDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />`,
+<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputnumber/LocaleDoc.vue b/doc/inputnumber/LocaleDoc.vue
index ad3003d4b..3865488d6 100644
--- a/doc/inputnumber/LocaleDoc.vue
+++ b/doc/inputnumber/LocaleDoc.vue
@@ -36,7 +36,8 @@ export default {
 <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
 <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" />
 <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" />
-<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />`,
+<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -70,7 +71,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -100,7 +102,8 @@ const value1 = ref(151351);
 const value2 = ref(115744);
 const value3 = ref(635524);
 const value4 = ref(732762);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputnumber/NumeralsDoc.vue b/doc/inputnumber/NumeralsDoc.vue
index 78e642b3d..146d9314a 100644
--- a/doc/inputnumber/NumeralsDoc.vue
+++ b/doc/inputnumber/NumeralsDoc.vue
@@ -36,7 +36,8 @@ export default {
 <InputNumber v-model="value1" inputId="integeronly" />
 <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
 <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
-<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />`,
+<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -70,7 +71,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -100,7 +102,8 @@ const value1 = ref(42723);
 const value2 = ref(58151);
 const value3 = ref(2351.35);
 const value4 = ref(50);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputnumber/PrefixSuffixDoc.vue b/doc/inputnumber/PrefixSuffixDoc.vue
index d05ffd9c4..6c720f1e7 100644
--- a/doc/inputnumber/PrefixSuffixDoc.vue
+++ b/doc/inputnumber/PrefixSuffixDoc.vue
@@ -36,7 +36,8 @@ export default {
 <InputNumber v-model="value1" inputId="mile" suffix=" mi" />
 <InputNumber v-model="value2" inputId="percent" prefix="%" />
 <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" />
-<InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" />`,
+<InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -70,7 +71,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-3 p-fluid">
@@ -100,7 +102,8 @@ const value1 = ref(20);
 const value2 = ref(50);
 const value3 = ref(10);
 const value4 = ref(20);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputnumber/VerticalDoc.vue b/doc/inputnumber/VerticalDoc.vue
index db3b21b7e..b13ecdfb0 100644
--- a/doc/inputnumber/VerticalDoc.vue
+++ b/doc/inputnumber/VerticalDoc.vue
@@ -25,7 +25,8 @@ export default {
             code: {
                 basic: `
 <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
-    decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />`,
+    decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -42,7 +43,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +57,8 @@ export default {
 import { ref } from "vuetest";
 
 const value = ref(50);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputnumber/form/VeeValidateDoc.vue b/doc/inputnumber/form/VeeValidateDoc.vue
index a803ccfd3..60a8ad394 100644
--- a/doc/inputnumber/form/VeeValidateDoc.vue
+++ b/doc/inputnumber/form/VeeValidateDoc.vue
@@ -56,7 +56,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -100,7 +101,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage, errors };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputnumber/pt/PTDoc.vue b/doc/inputnumber/pt/PTDoc.vue
index 71fb0c16e..c346f6bd8 100644
--- a/doc/inputnumber/pt/PTDoc.vue
+++ b/doc/inputnumber/pt/PTDoc.vue
@@ -39,7 +39,8 @@ export default {
         incrementButton: { class: 'bg-teal-500 border-teal-500' },
         decrementButton: { class: 'bg-orange-500 border-orange-500' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -68,7 +69,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -93,7 +95,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref(20);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputnumber/theming/TailwindDoc.vue b/doc/inputnumber/theming/TailwindDoc.vue
index 1fd2a5450..beeb8f17d 100644
--- a/doc/inputnumber/theming/TailwindDoc.vue
+++ b/doc/inputnumber/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     inputnumber: {
         root: 'w-full inline-flex',
         input: ({ props }) => ({
@@ -75,7 +76,8 @@ const value1 = ref(42723);
 const value2 = ref(58151);
 const value3 = ref(2351.35);
 const value4 = ref(50);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputswitch/AccessibilityDoc.vue b/doc/inputswitch/AccessibilityDoc.vue
index 3ebfe393b..1ee413ae5 100644
--- a/doc/inputswitch/AccessibilityDoc.vue
+++ b/doc/inputswitch/AccessibilityDoc.vue
@@ -43,7 +43,8 @@ export default {
 <span id="switch2">Remember Me</span>
 <InputSwitch aria-labelledby="switch2" />
 
-<InputSwitch aria-label="Remember Me" />`
+<InputSwitch aria-label="Remember Me" />
+`
             }
         };
     }
diff --git a/doc/inputswitch/BasicDoc.vue b/doc/inputswitch/BasicDoc.vue
index 1c8f60ffb..205711415 100644
--- a/doc/inputswitch/BasicDoc.vue
+++ b/doc/inputswitch/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             checked: false,
             code: {
                 basic: `
-<InputSwitch v-model="checked" />`,
+<InputSwitch v-model="checked" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputswitch/DisabledDoc.vue b/doc/inputswitch/DisabledDoc.vue
index cf2624fbb..ce3f37bf1 100644
--- a/doc/inputswitch/DisabledDoc.vue
+++ b/doc/inputswitch/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             checked: false,
             code: {
                 basic: `
-<InputSwitch v-model="checked" disabled />`,
+<InputSwitch v-model="checked" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputswitch/InvalidDoc.vue b/doc/inputswitch/InvalidDoc.vue
index 2319a6c32..9e34e0c01 100644
--- a/doc/inputswitch/InvalidDoc.vue
+++ b/doc/inputswitch/InvalidDoc.vue
@@ -15,7 +15,8 @@ export default {
             checked: false,
             code: {
                 basic: `
-<InputSwitch v-model="checked" class="p-invalid" />`,
+<InputSwitch v-model="checked" class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputswitch/PreselectionDoc.vue b/doc/inputswitch/PreselectionDoc.vue
index b7500a593..1ab8325ca 100644
--- a/doc/inputswitch/PreselectionDoc.vue
+++ b/doc/inputswitch/PreselectionDoc.vue
@@ -15,7 +15,8 @@ export default {
             checked: true,
             code: {
                 basic: `
-<InputSwitch v-model="checked" />`,
+<InputSwitch v-model="checked" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(true);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputswitch/form/VeeValidateDoc.vue b/doc/inputswitch/form/VeeValidateDoc.vue
index fd48189f9..048ab0e57 100644
--- a/doc/inputswitch/form/VeeValidateDoc.vue
+++ b/doc/inputswitch/form/VeeValidateDoc.vue
@@ -53,7 +53,8 @@ export default {
             <Button type="submit" label="Submit" />
         </form>
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -95,7 +96,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     },
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputswitch/pt/PTDoc.vue b/doc/inputswitch/pt/PTDoc.vue
index 265551e87..24a84809e 100644
--- a/doc/inputswitch/pt/PTDoc.vue
+++ b/doc/inputswitch/pt/PTDoc.vue
@@ -27,7 +27,8 @@ export default {
             class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -50,7 +51,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -69,7 +71,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputswitch/theming/TailwindDoc.vue b/doc/inputswitch/theming/TailwindDoc.vue
index 874201c67..7ef3bf673 100644
--- a/doc/inputswitch/theming/TailwindDoc.vue
+++ b/doc/inputswitch/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     inputswitch: {
         root: ({ props }) => ({
             class: [
@@ -54,7 +55,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputtext/AccessibilityDoc.vue b/doc/inputtext/AccessibilityDoc.vue
index 8c36acf55..e1abdc2e3 100644
--- a/doc/inputtext/AccessibilityDoc.vue
+++ b/doc/inputtext/AccessibilityDoc.vue
@@ -42,7 +42,8 @@ export default {
 <span id="lastname">Lastname</span>
 <InputText aria-labelledby="lastname" />
 
-<InputText aria-label="Age"/>`
+<InputText aria-label="Age"/>
+`
             }
         };
     }
diff --git a/doc/inputtext/BasicDoc.vue b/doc/inputtext/BasicDoc.vue
index a989a9de5..6cc9fcbb7 100644
--- a/doc/inputtext/BasicDoc.vue
+++ b/doc/inputtext/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<InputText type="text" v-model="value" />`,
+<InputText type="text" v-model="value" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +33,8 @@ export default {
     }
 }
 <\/script>
-        `,
+        
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputtext/DisabledDoc.vue b/doc/inputtext/DisabledDoc.vue
index 70e2ef1ae..eb107b3f9 100644
--- a/doc/inputtext/DisabledDoc.vue
+++ b/doc/inputtext/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<InputText v-model="value" disabled placeholder="Disabled" />`,
+<InputText v-model="value" disabled placeholder="Disabled" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputtext/FloatLabelDoc.vue b/doc/inputtext/FloatLabelDoc.vue
index b2a4ce764..ff76a3c4b 100644
--- a/doc/inputtext/FloatLabelDoc.vue
+++ b/doc/inputtext/FloatLabelDoc.vue
@@ -21,7 +21,8 @@ export default {
 <span class="p-float-label">
     <InputText id="username" v-model="value" />
     <label for="username">Username</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -41,6 +42,7 @@ export default {
     }
 }
 <\/script>
+
 `,
                 composition: `
 <template>
diff --git a/doc/inputtext/HelpTextDoc.vue b/doc/inputtext/HelpTextDoc.vue
index 772d3bfa6..81c943748 100644
--- a/doc/inputtext/HelpTextDoc.vue
+++ b/doc/inputtext/HelpTextDoc.vue
@@ -23,7 +23,8 @@ export default {
     <label for="username">Username</label>
     <InputText id="username" v-model="value" aria-describedby="username-help" />
     <small id="username-help">Enter your username to reset your password.</small>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +44,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -59,7 +61,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputtext/IconsDoc.vue b/doc/inputtext/IconsDoc.vue
index bdb9e536a..58c0256e2 100644
--- a/doc/inputtext/IconsDoc.vue
+++ b/doc/inputtext/IconsDoc.vue
@@ -32,7 +32,8 @@ export default {
 <span class="p-input-icon-right">
     <i class="pi pi-spin pi-spinner" />
     <InputText v-model="value2" />
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-3">
@@ -57,7 +58,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-3">
@@ -78,7 +80,8 @@ import { ref } from 'vue';
 
 const value1 = ref(null);
 const value2 = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputtext/InvalidDoc.vue b/doc/inputtext/InvalidDoc.vue
index 08abc6e97..a6a95488a 100644
--- a/doc/inputtext/InvalidDoc.vue
+++ b/doc/inputtext/InvalidDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<InputText v-model="value" class="p-invalid" />`,
+<InputText v-model="value" class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputtext/SizesDoc.vue b/doc/inputtext/SizesDoc.vue
index c51a79f53..e95830d92 100644
--- a/doc/inputtext/SizesDoc.vue
+++ b/doc/inputtext/SizesDoc.vue
@@ -21,7 +21,8 @@ export default {
                 basic: `
 <InputText v-model="value1" type="text" size="small" placeholder="Small" />
 <InputText v-model="value2" type="text" placeholder="Normal" />
-<InputText v-model="value3" type="text" size="large" placeholder="Large" />`,
+<InputText v-model="value3" type="text" size="large" placeholder="Large" />
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -41,7 +42,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -57,7 +59,8 @@ import { ref } from 'vue';
 const value1 = ref(null);
 const value2 = ref(null);
 const value3 = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/inputtext/form/VeeValidateDoc.vue b/doc/inputtext/form/VeeValidateDoc.vue
index b97820a7d..dda7f2c18 100644
--- a/doc/inputtext/form/VeeValidateDoc.vue
+++ b/doc/inputtext/form/VeeValidateDoc.vue
@@ -58,7 +58,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -102,7 +103,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputtext/pt/PTDoc.vue b/doc/inputtext/pt/PTDoc.vue
index 0f349a955..81fac3215 100644
--- a/doc/inputtext/pt/PTDoc.vue
+++ b/doc/inputtext/pt/PTDoc.vue
@@ -25,7 +25,8 @@ export default {
     :pt="{
         root: { class: 'border-teal-400' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -48,7 +49,8 @@ export default {
     }
 }
 <\/script>
-        `,
+        
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputtext/theming/TailwindDoc.vue b/doc/inputtext/theming/TailwindDoc.vue
index d850617f2..c14dbcc15 100644
--- a/doc/inputtext/theming/TailwindDoc.vue
+++ b/doc/inputtext/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     inputtext: {
         root: ({ props, context }) => ({
             class: [
diff --git a/doc/installation/PropCasesDoc.vue b/doc/installation/PropCasesDoc.vue
index f6a16009e..cc94aef09 100644
--- a/doc/installation/PropCasesDoc.vue
+++ b/doc/installation/PropCasesDoc.vue
@@ -16,7 +16,8 @@ export default {
 
 <!-- can be written as -->
 
-<Dialog :show-header="false"></Dialog>`
+<Dialog :show-header="false"></Dialog>
+`
             }
         };
     }
diff --git a/doc/installation/UsageDoc.vue b/doc/installation/UsageDoc.vue
index 459fca14d..4e3218eea 100644
--- a/doc/installation/UsageDoc.vue
+++ b/doc/installation/UsageDoc.vue
@@ -24,13 +24,21 @@ app.component('Button', Button);
     <div class="card flex justify-content-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
-</template>`,
+</template>
+
+<script>
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
-</template>`
+</template>
+
+<script setup>
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/AccessibilityDoc.vue b/doc/knob/AccessibilityDoc.vue
index cbcc88b21..aa1812120 100644
--- a/doc/knob/AccessibilityDoc.vue
+++ b/doc/knob/AccessibilityDoc.vue
@@ -70,7 +70,8 @@ export default {
 <span id="label_number">Number</span>
 <Knob aria-labelledby="label_number" />
 
-<Knob aria-label="Number" />`
+<Knob aria-label="Number" />
+`
             }
         };
     }
diff --git a/doc/knob/BasicDoc.vue b/doc/knob/BasicDoc.vue
index 074934f19..c48ec5dc2 100644
--- a/doc/knob/BasicDoc.vue
+++ b/doc/knob/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 0,
             code: {
                 basic: `
-<Knob v-model="value" />`,
+<Knob v-model="value" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(0);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/ColorDoc.vue b/doc/knob/ColorDoc.vue
index 01f4759d2..a46098024 100644
--- a/doc/knob/ColorDoc.vue
+++ b/doc/knob/ColorDoc.vue
@@ -18,7 +18,8 @@ export default {
             value: 50,
             code: {
                 basic: `
-<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />`,
+<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
+`,
                 options: `
 <template>
   <div class="card flex justify-content-center">
@@ -34,7 +35,8 @@ export default {
       }
   }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
   <div class="card flex justify-content-center">
@@ -46,7 +48,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(50);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/DisabledDoc.vue b/doc/knob/DisabledDoc.vue
index 38b4be212..314dd0ac4 100644
--- a/doc/knob/DisabledDoc.vue
+++ b/doc/knob/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 50,
             code: {
                 basic: `
-<Knob v-model="value" disabled />`,
+<Knob v-model="value" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(50);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/MinMaxDoc.vue b/doc/knob/MinMaxDoc.vue
index 4ff059653..16bb2421f 100644
--- a/doc/knob/MinMaxDoc.vue
+++ b/doc/knob/MinMaxDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 10,
             code: {
                 basic: `
-<Knob v-model="value" :min="-50" :max="10" />`,
+<Knob v-model="value" :min="-50" :max="10" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(10);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/ReactiveDoc.vue b/doc/knob/ReactiveDoc.vue
index d1eca3339..2b45d955b 100644
--- a/doc/knob/ReactiveDoc.vue
+++ b/doc/knob/ReactiveDoc.vue
@@ -23,7 +23,8 @@ export default {
 <div class="flex gap-2">
     <Button icon="pi pi-plus" @click="value++" :disabled="value >= 100" />
     <Button icon="pi pi-minus" @click="value--" :disabled="value <= 0" />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center gap-2">
@@ -43,7 +44,8 @@ export default {
       }
   }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center gap-2">
@@ -59,7 +61,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(0);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/ReadOnlyDoc.vue b/doc/knob/ReadOnlyDoc.vue
index 2edf7ceec..964410805 100644
--- a/doc/knob/ReadOnlyDoc.vue
+++ b/doc/knob/ReadOnlyDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 50,
             code: {
                 basic: `
-<Knob v-model="value" readonly />`,
+<Knob v-model="value" readonly />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(50);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/SizeDoc.vue b/doc/knob/SizeDoc.vue
index 5b49f6788..6532b2af6 100644
--- a/doc/knob/SizeDoc.vue
+++ b/doc/knob/SizeDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 60,
             code: {
                 basic: `
-<Knob v-model="value" :size="200" />`,
+<Knob v-model="value" :size="200" />
+`,
                 options: `
 <template>
   <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
       }
   }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
   <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(60);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/StepDoc.vue b/doc/knob/StepDoc.vue
index 99f7f86bb..b5b434e70 100644
--- a/doc/knob/StepDoc.vue
+++ b/doc/knob/StepDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 40,
             code: {
                 basic: `
-<Knob v-model="value5" :step="10" />`,
+<Knob v-model="value5" :step="10" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(40);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/StrokeDoc.vue b/doc/knob/StrokeDoc.vue
index 7e7636bde..38a63015e 100644
--- a/doc/knob/StrokeDoc.vue
+++ b/doc/knob/StrokeDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 40,
             code: {
                 basic: `
-<Knob v-model="value" :strokeWidth="5" />`,
+<Knob v-model="value" :strokeWidth="5" />
+`,
                 options: `
 <template>
   <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
       }
   }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
   <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(40);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/TemplateDoc.vue b/doc/knob/TemplateDoc.vue
index 2db284b00..2feb4e258 100644
--- a/doc/knob/TemplateDoc.vue
+++ b/doc/knob/TemplateDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 60,
             code: {
                 basic: `
-<Knob v-model="value" valueTemplate="{value}%" />`,
+<Knob v-model="value" valueTemplate="{value}%" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(60);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/form/VeeValidateDoc.vue b/doc/knob/form/VeeValidateDoc.vue
index 4a190dd91..179768bdf 100644
--- a/doc/knob/form/VeeValidateDoc.vue
+++ b/doc/knob/form/VeeValidateDoc.vue
@@ -58,7 +58,8 @@ export default {
             <Button type="submit" label="Submit" />
         </form>
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -106,7 +107,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     },
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/knob/pt/PTDoc.vue b/doc/knob/pt/PTDoc.vue
index 869ddf87d..ee22b0874 100644
--- a/doc/knob/pt/PTDoc.vue
+++ b/doc/knob/pt/PTDoc.vue
@@ -23,7 +23,8 @@ export default {
     :pt="{
         value: { style: { stroke: 'var(--cyan-500)' } }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -44,7 +45,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -61,7 +63,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(0);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/knob/theming/TailwindDoc.vue b/doc/knob/theming/TailwindDoc.vue
index db2db507a..3c1085634 100644
--- a/doc/knob/theming/TailwindDoc.vue
+++ b/doc/knob/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     knob: {
         root: ({ props }) => ({
             class: [
@@ -44,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(0);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/listbox/AccessibilityDoc.vue b/doc/listbox/AccessibilityDoc.vue
index 528eea360..5010d0b5f 100644
--- a/doc/listbox/AccessibilityDoc.vue
+++ b/doc/listbox/AccessibilityDoc.vue
@@ -148,7 +148,8 @@ export default {
 <span id="lb"></span>Options</span>
 <Listbox aria-labelledby="lb" />
 
-<Listbox aria-label="City" />`
+<Listbox aria-label="City" />
+`
             }
         };
     }
diff --git a/doc/listbox/BasicDoc.vue b/doc/listbox/BasicDoc.vue
index 05dce638e..d9e5b7484 100644
--- a/doc/listbox/BasicDoc.vue
+++ b/doc/listbox/BasicDoc.vue
@@ -25,7 +25,8 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />`,
+<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -48,7 +49,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -67,7 +69,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/listbox/DisabledDoc.vue b/doc/listbox/DisabledDoc.vue
index ee047aeb0..0d935a177 100644
--- a/doc/listbox/DisabledDoc.vue
+++ b/doc/listbox/DisabledDoc.vue
@@ -22,7 +22,8 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />`,
+<Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -64,7 +66,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/listbox/FilterDoc.vue b/doc/listbox/FilterDoc.vue
index 95dd38d05..60364d8fb 100644
--- a/doc/listbox/FilterDoc.vue
+++ b/doc/listbox/FilterDoc.vue
@@ -22,7 +22,8 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />`,
+<Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -64,7 +66,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/listbox/GroupDoc.vue b/doc/listbox/GroupDoc.vue
index db5d0d597..5e93adfbc 100644
--- a/doc/listbox/GroupDoc.vue
+++ b/doc/listbox/GroupDoc.vue
@@ -64,7 +64,8 @@ export default {
             <div>{{ slotProps.option.label }}</div>
         </div>
     </template>
-</Listbox>`,
+</Listbox>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -119,7 +120,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -170,7 +172,8 @@ const groupedCities = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/listbox/InvalidDoc.vue b/doc/listbox/InvalidDoc.vue
index 34914520b..c8462dd79 100644
--- a/doc/listbox/InvalidDoc.vue
+++ b/doc/listbox/InvalidDoc.vue
@@ -22,7 +22,8 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />`,
+<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -64,7 +66,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/listbox/MultipleDoc.vue b/doc/listbox/MultipleDoc.vue
index 792e30adf..704ef7c62 100644
--- a/doc/listbox/MultipleDoc.vue
+++ b/doc/listbox/MultipleDoc.vue
@@ -25,7 +25,8 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />`,
+<Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -48,7 +49,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -67,7 +69,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/listbox/TemplateDoc.vue b/doc/listbox/TemplateDoc.vue
index 45aab3618..8e3b716f2 100644
--- a/doc/listbox/TemplateDoc.vue
+++ b/doc/listbox/TemplateDoc.vue
@@ -41,7 +41,8 @@ export default {
             <div>{{ slotProps.option.name }}</div>
         </div>
     </template>
-</Listbox>`,
+</Listbox>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -76,7 +77,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -107,7 +109,8 @@ const countries = ref([
     { name: 'Spain', code: 'ES' },
     { name: 'United States', code: 'US' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/listbox/VirtualScrollDoc.vue b/doc/listbox/VirtualScrollDoc.vue
index 6b62c1014..6d56650f9 100644
--- a/doc/listbox/VirtualScrollDoc.vue
+++ b/doc/listbox/VirtualScrollDoc.vue
@@ -20,7 +20,8 @@ export default {
             code: {
                 basic: `
 <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
-    :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />`,
+    :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -38,7 +39,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -52,7 +54,8 @@ import { ref } from "vue";
 
 const selectedItem = ref();
 const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/listbox/form/VeeValidateDoc.vue b/doc/listbox/form/VeeValidateDoc.vue
index d59948245..9a53972af 100644
--- a/doc/listbox/form/VeeValidateDoc.vue
+++ b/doc/listbox/form/VeeValidateDoc.vue
@@ -59,7 +59,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -111,7 +112,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/listbox/pt/PTDoc.vue b/doc/listbox/pt/PTDoc.vue
index 6432f1a7d..cc96b312a 100644
--- a/doc/listbox/pt/PTDoc.vue
+++ b/doc/listbox/pt/PTDoc.vue
@@ -40,7 +40,8 @@ export default {
             class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -73,7 +74,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -102,7 +104,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/listbox/theming/TailwindDoc.vue b/doc/listbox/theming/TailwindDoc.vue
index 28ef190d2..791f5a903 100644
--- a/doc/listbox/theming/TailwindDoc.vue
+++ b/doc/listbox/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     listbox: {
         root: {
             class: ['bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56']
@@ -76,7 +77,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/megamenu/BasicDoc.vue b/doc/megamenu/BasicDoc.vue
index 4cc58c859..09057c042 100644
--- a/doc/megamenu/BasicDoc.vue
+++ b/doc/megamenu/BasicDoc.vue
@@ -130,7 +130,8 @@ export default {
             ],
             code: {
                 basic: `
-<MegaMenu :model="items" />`,
+<MegaMenu :model="items" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -261,7 +262,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -388,7 +390,8 @@ const items = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/megamenu/RouterDoc.vue b/doc/megamenu/RouterDoc.vue
index 4f2a40380..7bb9597e8 100644
--- a/doc/megamenu/RouterDoc.vue
+++ b/doc/megamenu/RouterDoc.vue
@@ -166,7 +166,8 @@ export default {
             <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
         </a>
     </template>
-</MegaMenu>`,
+</MegaMenu>
+`,
                 options: `
 <template>
     <div class="card">
@@ -316,7 +317,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -462,7 +464,8 @@ const items = ref([
         route: '/fileupload'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/megamenu/TemplateDoc.vue b/doc/megamenu/TemplateDoc.vue
index 45ef27f32..32e75b4cc 100644
--- a/doc/megamenu/TemplateDoc.vue
+++ b/doc/megamenu/TemplateDoc.vue
@@ -177,7 +177,8 @@ export default {
     <template #end>
         <InputText placeholder="Search" type="text" />
     </template>
-</MegaMenu>`,
+</MegaMenu>
+`,
                 options: `
 <template>
     <div class="card">
@@ -335,7 +336,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `<MegaMenu :model="items" orientation="horizontal">
     <template #start>
         <span class="flex align-items-center">
@@ -484,7 +486,8 @@ const items = ref([
         route: '/fileupload'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/megamenu/VerticalDoc.vue b/doc/megamenu/VerticalDoc.vue
index 1db4789e6..4c59af5ce 100644
--- a/doc/megamenu/VerticalDoc.vue
+++ b/doc/megamenu/VerticalDoc.vue
@@ -130,7 +130,8 @@ export default {
             ],
             code: {
                 basic: `
-<MegaMenu :model="items" orientation="vertical" />`,
+<MegaMenu :model="items" orientation="vertical" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -261,7 +262,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -388,7 +390,8 @@ const items = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/megamenu/pt/PTDoc.vue b/doc/megamenu/pt/PTDoc.vue
index 2ae853aca..4b4275c25 100644
--- a/doc/megamenu/pt/PTDoc.vue
+++ b/doc/megamenu/pt/PTDoc.vue
@@ -142,7 +142,8 @@ export default {
             class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card">
@@ -280,7 +281,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -414,7 +416,8 @@ const items = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/megamenu/theming/TailwindDoc.vue b/doc/megamenu/theming/TailwindDoc.vue
index e154c0e7a..b2f5bb2de 100644
--- a/doc/megamenu/theming/TailwindDoc.vue
+++ b/doc/megamenu/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     megamenu: {
         root: ({ props }) => ({
             class: ['bg-gray-100 dark:bg-gray-900  border border-gray-300 dark:border-blue-900/40  rounded-md', 'flex relative', { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col w-48 p-0 py-1': props.orientation !== 'horizontal' }]
@@ -210,7 +211,8 @@ const items = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/menu/BasicDoc.vue b/doc/menu/BasicDoc.vue
index 8b38345d8..0008e6576 100644
--- a/doc/menu/BasicDoc.vue
+++ b/doc/menu/BasicDoc.vue
@@ -18,7 +18,8 @@ export default {
             ],
             code: {
                 basic: `
-<Menu :model="items" />`,
+<Menu :model="items" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -37,7 +38,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -52,7 +54,8 @@ const items = ref([
     { label: 'New', icon: 'pi pi-fw pi-plus' },
     { label: 'Delete', icon: 'pi pi-fw pi-trash' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/menu/GroupDoc.vue b/doc/menu/GroupDoc.vue
index c32cb27c6..ab8e873fb 100644
--- a/doc/menu/GroupDoc.vue
+++ b/doc/menu/GroupDoc.vue
@@ -36,7 +36,8 @@ export default {
             code: {
                 basic: `
 <Menu :model="items" />
-<Toast />`,
+<Toast />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -73,7 +74,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -108,7 +110,8 @@ const items = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/menu/PopupDoc.vue b/doc/menu/PopupDoc.vue
index 8d9f33e0e..824b98eed 100644
--- a/doc/menu/PopupDoc.vue
+++ b/doc/menu/PopupDoc.vue
@@ -38,7 +38,8 @@ export default {
                 basic: `
 <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
 <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
-<Toast />`,
+<Toast />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -84,7 +85,8 @@ export default {
         }
     },
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -129,7 +131,8 @@ const toggle = (event) => {
 const save = () => {
     toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/menu/RouterDoc.vue b/doc/menu/RouterDoc.vue
index 8f1f93c84..60a9dbba5 100644
--- a/doc/menu/RouterDoc.vue
+++ b/doc/menu/RouterDoc.vue
@@ -80,7 +80,8 @@ export default {
             <span v-bind="props.label">{{ label }}</span>
         </a>
     </template>
-</Menu>`,
+</Menu>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -147,7 +148,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -210,7 +212,8 @@ const items = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index f77767368..3857a2ff0 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -76,7 +76,8 @@ export default {
             <span class="ml-2">Log Out</span>
         </button>
     </template>
-</Menu>`,
+</Menu>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -133,7 +134,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -188,7 +190,8 @@ const toast = useToast();
 const profileClick = () => {
     toast.add({ severity: 'info', summary: 'Info', detail: 'Item Selected', life: 3000 });
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/menu/pt/PTDoc.vue b/doc/menu/pt/PTDoc.vue
index c48cc01cc..ad4db098a 100644
--- a/doc/menu/pt/PTDoc.vue
+++ b/doc/menu/pt/PTDoc.vue
@@ -64,7 +64,8 @@ export default {
             class: context.focused ? 'bg-primary-400' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -124,7 +125,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -182,7 +184,8 @@ const items = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/menu/theming/TailwindDoc.vue b/doc/menu/theming/TailwindDoc.vue
index 0732b00d0..eac977bbe 100644
--- a/doc/menu/theming/TailwindDoc.vue
+++ b/doc/menu/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -66,7 +67,8 @@ const items = ref([
     { label: 'New', icon: 'pi pi-fw pi-plus' },
     { label: 'Delete', icon: 'pi pi-fw pi-trash' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/menubar/BasicDoc.vue b/doc/menubar/BasicDoc.vue
index db5f53238..a001bcfec 100644
--- a/doc/menubar/BasicDoc.vue
+++ b/doc/menubar/BasicDoc.vue
@@ -137,7 +137,8 @@ export default {
             ],
             code: {
                 basic: `
-<Menubar :model="items" />`,
+<Menubar :model="items" />
+`,
                 options: `
 <template>
     <div class="card relative z-2">
@@ -275,7 +276,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card relative z-2">
@@ -409,7 +411,8 @@ const items = ref([
         icon: 'pi pi-fw pi-power-off'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/menubar/RouterDoc.vue b/doc/menubar/RouterDoc.vue
index 7f8a7491c..66485943a 100644
--- a/doc/menubar/RouterDoc.vue
+++ b/doc/menubar/RouterDoc.vue
@@ -173,7 +173,8 @@ export default {
             <span :class="[hasSubmenu && (root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right')]" v-bind="props.submenuicon" />
         </a>
     </template>
-</Menubar>`,
+</Menubar>
+`,
                 options: `
 <template>
     <div class="card relative z-2">
@@ -330,7 +331,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card relative z-2">
@@ -483,7 +485,8 @@ const items = ref([
         icon: 'pi pi-fw pi-power-off'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/menubar/TemplateDoc.vue b/doc/menubar/TemplateDoc.vue
index 58a6ac230..a5da5b051 100644
--- a/doc/menubar/TemplateDoc.vue
+++ b/doc/menubar/TemplateDoc.vue
@@ -182,7 +182,8 @@ export default {
     <template #end>
         <InputText placeholder="Search" type="text" />
     </template>
-</Menubar>`,
+</Menubar>
+`,
                 options: `
 <template>
     <div class="card relative z-2">
@@ -345,7 +346,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card relative z-2">
@@ -504,7 +506,8 @@ const items = ref([
         icon: 'pi pi-fw pi-power-off'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/menubar/pt/PTDoc.vue b/doc/menubar/pt/PTDoc.vue
index a33dd03bd..fbe29e3e5 100644
--- a/doc/menubar/pt/PTDoc.vue
+++ b/doc/menubar/pt/PTDoc.vue
@@ -149,7 +149,8 @@ export default {
             class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card relative z-2">
@@ -294,7 +295,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card relative z-2">
@@ -435,7 +437,8 @@ const items = ref([
         icon: 'pi pi-fw pi-power-off'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/menubar/theming/TailwindDoc.vue b/doc/menubar/theming/TailwindDoc.vue
index e0743d828..2e6906f4b 100644
--- a/doc/menubar/theming/TailwindDoc.vue
+++ b/doc/menubar/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     menubar: {
         root: {
             class: ['p-2 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex items-center relative']
@@ -230,7 +231,8 @@ const items = ref([
         icon: 'pi pi-fw pi-power-off'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/message/AccessibilityDoc.vue b/doc/message/AccessibilityDoc.vue
index 74c7bfdf6..21882ba72 100644
--- a/doc/message/AccessibilityDoc.vue
+++ b/doc/message/AccessibilityDoc.vue
@@ -69,7 +69,8 @@ const openDialog = () => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/message/BasicDoc.vue b/doc/message/BasicDoc.vue
index 6ab2f0fa5..de68e088a 100644
--- a/doc/message/BasicDoc.vue
+++ b/doc/message/BasicDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Message>Message Content</Message>`,
+<Message>Message Content</Message>
+`,
                 options: `
 <template>
     <div class="card">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/message/ClosableDoc.vue b/doc/message/ClosableDoc.vue
index cbb655e3e..2aaaa98ba 100644
--- a/doc/message/ClosableDoc.vue
+++ b/doc/message/ClosableDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Message :closable="false">Message Content</Message>`,
+<Message :closable="false">Message Content</Message>
+`,
                 options: `
 <template>
     <div class="card">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/message/CustomIconDoc.vue b/doc/message/CustomIconDoc.vue
index 61089ec1c..19f35a901 100644
--- a/doc/message/CustomIconDoc.vue
+++ b/doc/message/CustomIconDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Message severity="info" icon="pi pi-send">Info Message Content</Message>`,
+<Message severity="info" icon="pi pi-send">Info Message Content</Message>
+`,
                 options: `
 <template>
     <div class="card">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/message/DynamicDoc.vue b/doc/message/DynamicDoc.vue
index 72d5ed3ee..13d41d015 100644
--- a/doc/message/DynamicDoc.vue
+++ b/doc/message/DynamicDoc.vue
@@ -24,7 +24,8 @@ export default {
 <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
 <transition-group name="p-message" tag="div">
     <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
-</transition-group>`,
+</transition-group>
+`,
                 options: `
 <template>
     <div class="card">
@@ -58,7 +59,8 @@ export default {
     }
 };
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -87,7 +89,8 @@ const addMessages = () => {
 const clearMessages = () => {
     messages.value = [];
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/message/SeverityDoc.vue b/doc/message/SeverityDoc.vue
index 891b41e0e..28b567e62 100644
--- a/doc/message/SeverityDoc.vue
+++ b/doc/message/SeverityDoc.vue
@@ -20,7 +20,8 @@ export default {
 <Message severity="success">Success Message Content</Message>
 <Message severity="info">Info Message Content</Message>
 <Message severity="warn">Warning Message Content</Message>
-<Message severity="error">Error Message Content</Message>`,
+<Message severity="error">Error Message Content</Message>
+`,
                 options: `
 <template>
     <div class="card">
@@ -32,7 +33,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -44,7 +46,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/message/StickyDoc.vue b/doc/message/StickyDoc.vue
index bbc789187..bfe2a41a5 100644
--- a/doc/message/StickyDoc.vue
+++ b/doc/message/StickyDoc.vue
@@ -23,7 +23,8 @@ export default {
 <Message severity="success" sticky>Success Message Content</Message>
 <Message severity="info" sticky>Info Message Content</Message>
 <Message severity="warn" sticky>Warning Message Content</Message>
-<Message severity="error" sticky>Error Message Content</Message>`,
+<Message severity="error" sticky>Error Message Content</Message>
+`,
                 options: `
 <template>
     <div class="card">
@@ -35,7 +36,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -47,7 +49,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/message/TemplateDoc.vue b/doc/message/TemplateDoc.vue
index 44e93b407..9dd2a89ee 100644
--- a/doc/message/TemplateDoc.vue
+++ b/doc/message/TemplateDoc.vue
@@ -62,7 +62,8 @@ export default {
         <img alt="logo" src="/images/logo.svg" width="20" />
         <div class="ml-2">Always bet on Prime.</div>
     </div>
-</Message>`,
+</Message>
+`,
                 options: `
 <template>
     <div class="card">
@@ -81,7 +82,8 @@ export default {
             </div>
         </Message>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -120,7 +122,8 @@ export default {
             </a>
         </div>
     </template>
-</Message>`,
+</Message>
+`,
                 options: `
 <template>
     <div class="card">
@@ -142,7 +145,8 @@ export default {
             </template>
         </Message>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/message/pt/PTDoc.vue b/doc/message/pt/PTDoc.vue
index 5ed425b3b..ff1cc39b9 100644
--- a/doc/message/pt/PTDoc.vue
+++ b/doc/message/pt/PTDoc.vue
@@ -24,7 +24,8 @@ export default {
     }"
 >
     Message Content
-</Message>`,
+</Message>
+`,
                 options: `
 <template>
     <div class="card">
@@ -39,7 +40,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -54,7 +56,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/message/theming/TailwindDoc.vue b/doc/message/theming/TailwindDoc.vue
index 1791a7a4a..2f42870e8 100644
--- a/doc/message/theming/TailwindDoc.vue
+++ b/doc/message/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     message: {
         root: ({ props }) => ({
             class: [
@@ -59,7 +60,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/multiselect/AccessibilityDoc.vue b/doc/multiselect/AccessibilityDoc.vue
index 9f3f5b1ed..b670728b2 100644
--- a/doc/multiselect/AccessibilityDoc.vue
+++ b/doc/multiselect/AccessibilityDoc.vue
@@ -255,7 +255,8 @@ export default {
 <span id="dd1"></span>Options</span>
 <MultiSelect aria-labelledby="dd1" />
 
-<MultiSelect aria-label="Options" />`
+<MultiSelect aria-label="Options" />
+`
             }
         };
     }
diff --git a/doc/multiselect/BasicDoc.vue b/doc/multiselect/BasicDoc.vue
index 959b5b470..266cdd6c7 100644
--- a/doc/multiselect/BasicDoc.vue
+++ b/doc/multiselect/BasicDoc.vue
@@ -26,7 +26,8 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-20rem" />`,
+    :maxSelectedLabels="3" class="w-full md:w-20rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -50,7 +51,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -70,7 +72,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/multiselect/ChipsDoc.vue b/doc/multiselect/ChipsDoc.vue
index ad7d3d0d1..9c9247f3c 100644
--- a/doc/multiselect/ChipsDoc.vue
+++ b/doc/multiselect/ChipsDoc.vue
@@ -23,7 +23,8 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-20rem" />`,
+    :maxSelectedLabels="3" class="w-full md:w-20rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -47,7 +48,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -67,7 +69,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/multiselect/DisabledDoc.vue b/doc/multiselect/DisabledDoc.vue
index 9a6c5a57c..1347a8072 100644
--- a/doc/multiselect/DisabledDoc.vue
+++ b/doc/multiselect/DisabledDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />`,
+<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />
+`,
                 options: `
 <template>
     <div class="flex justify-content-center">
@@ -24,7 +25,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="flex justify-content-center">
@@ -34,7 +36,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/multiselect/FilterDoc.vue b/doc/multiselect/FilterDoc.vue
index 5ca86a121..556c0d1b8 100644
--- a/doc/multiselect/FilterDoc.vue
+++ b/doc/multiselect/FilterDoc.vue
@@ -26,7 +26,8 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
-    :maxSelectedLabels="3" class="w-full md:w-20rem" />`,
+    :maxSelectedLabels="3" class="w-full md:w-20rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -50,7 +51,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -70,7 +72,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/multiselect/FloatLabelDoc.vue b/doc/multiselect/FloatLabelDoc.vue
index 375249643..7b52c6b58 100644
--- a/doc/multiselect/FloatLabelDoc.vue
+++ b/doc/multiselect/FloatLabelDoc.vue
@@ -28,7 +28,8 @@ export default {
 <span class="p-float-label">
     <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
     <label for="ms-cities">MultiSelect</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -54,7 +55,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -76,7 +78,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/multiselect/GroupDoc.vue b/doc/multiselect/GroupDoc.vue
index b72a854c6..6e2dca4ed 100644
--- a/doc/multiselect/GroupDoc.vue
+++ b/doc/multiselect/GroupDoc.vue
@@ -64,7 +64,8 @@ export default {
             <div>{{ slotProps.option.label }}</div>
         </div>
     </template>
-</MultiSelect>`,
+</MultiSelect>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -119,7 +120,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -170,7 +172,8 @@ const groupedCities = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/multiselect/InvalidDoc.vue b/doc/multiselect/InvalidDoc.vue
index 6b5fbd0d9..773440bb3 100644
--- a/doc/multiselect/InvalidDoc.vue
+++ b/doc/multiselect/InvalidDoc.vue
@@ -23,7 +23,8 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
-    :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />`,
+    :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -47,7 +48,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -67,7 +69,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/multiselect/LoadingStateDoc.vue b/doc/multiselect/LoadingStateDoc.vue
index fad7713dd..f2a60a008 100644
--- a/doc/multiselect/LoadingStateDoc.vue
+++ b/doc/multiselect/LoadingStateDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>`,
+<MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/multiselect/TemplateDoc.vue b/doc/multiselect/TemplateDoc.vue
index 836d59b64..31a7ce285 100644
--- a/doc/multiselect/TemplateDoc.vue
+++ b/doc/multiselect/TemplateDoc.vue
@@ -54,7 +54,8 @@ export default {
             <b>{{ selectedCountries ? selectedCountries.length : 0 }}</b> item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected.
         </div>
     </template>
-</MultiSelect>`,
+</MultiSelect>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -94,7 +95,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -130,7 +132,8 @@ const countries = ref([
     { name: 'Spain', code: 'ES' },
     { name: 'United States', code: 'US' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/multiselect/VirtualScrollDoc.vue b/doc/multiselect/VirtualScrollDoc.vue
index c3c5c68d9..908791932 100644
--- a/doc/multiselect/VirtualScrollDoc.vue
+++ b/doc/multiselect/VirtualScrollDoc.vue
@@ -33,7 +33,8 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
-    @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" placeholder="Select Item" class="w-full md:w-20rem" />`,
+    @selectall-change="onSelectAllChange($event)" @change="onChange($event)" :virtualScrollerOptions="{ itemSize: 44 }" placeholder="Select Item" class="w-full md:w-20rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -61,7 +62,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -86,7 +88,8 @@ onChange(event) {
     selectAll.value = event.value.length === items.value.length;
 }
 
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/multiselect/form/VeeValidateDoc.vue b/doc/multiselect/form/VeeValidateDoc.vue
index 49235c17f..14ee8148e 100644
--- a/doc/multiselect/form/VeeValidateDoc.vue
+++ b/doc/multiselect/form/VeeValidateDoc.vue
@@ -65,7 +65,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -123,7 +124,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/multiselect/pt/PTDoc.vue b/doc/multiselect/pt/PTDoc.vue
index 712e822e3..5653495df 100644
--- a/doc/multiselect/pt/PTDoc.vue
+++ b/doc/multiselect/pt/PTDoc.vue
@@ -44,7 +44,8 @@ export default {
             class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -79,7 +80,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -110,7 +112,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/multiselect/theming/TailwindDoc.vue b/doc/multiselect/theming/TailwindDoc.vue
index 0c3170f5e..7d2cf674b 100644
--- a/doc/multiselect/theming/TailwindDoc.vue
+++ b/doc/multiselect/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -157,7 +158,8 @@ const cities = ref([
     { name: 'Istanbul', code: 'IST' },
     { name: 'Paris', code: 'PRS' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/orderlist/AccessibilityDoc.vue b/doc/orderlist/AccessibilityDoc.vue
index 814dd84e4..518fd2476 100644
--- a/doc/orderlist/AccessibilityDoc.vue
+++ b/doc/orderlist/AccessibilityDoc.vue
@@ -129,7 +129,8 @@ export default {
 <span id="lb">Options</span>
 <OrderList aria-labelledby="lb" />
 
-<OrderList aria-label="City" />`
+<OrderList aria-label="City" />
+`
             }
         };
     }
diff --git a/doc/orderlist/BasicDoc.vue b/doc/orderlist/BasicDoc.vue
index fdc77fba3..386b43bff 100644
--- a/doc/orderlist/BasicDoc.vue
+++ b/doc/orderlist/BasicDoc.vue
@@ -46,7 +46,8 @@ export default {
             <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
         </div>
     </template>
-</OrderList>`,
+</OrderList>
+`,
                 options: `
 <template>
     <div class="card xl:flex xl:justify-content-center">
@@ -81,7 +82,8 @@ export default {
         ProductService.getProductsSmall().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card xl:flex xl:justify-content-center">
@@ -113,7 +115,8 @@ const products = ref(null);
 onMounted(() => {
     ProductService.getProductsSmall().then((data) => (products.value = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/orderlist/pt/PTDoc.vue b/doc/orderlist/pt/PTDoc.vue
index 4ff31e60a..a74c7c35e 100644
--- a/doc/orderlist/pt/PTDoc.vue
+++ b/doc/orderlist/pt/PTDoc.vue
@@ -63,7 +63,8 @@ export default {
             <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
         </div>
     </template>
-</OrderList>`,
+</OrderList>
+`,
                 options: `
 <template>
     <div class="card xl:flex xl:justify-content-center">
@@ -107,7 +108,8 @@ export default {
         ProductService.getProductsSmall().then((data) => (this.products = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card xl:flex xl:justify-content-center">
@@ -148,7 +150,8 @@ const products = ref(null);
 onMounted(() => {
     ProductService.getProductsSmall().then((data) => (this.products = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */        
 {
diff --git a/doc/orderlist/theming/TailwindDoc.vue b/doc/orderlist/theming/TailwindDoc.vue
index c70921eeb..1254f423d 100644
--- a/doc/orderlist/theming/TailwindDoc.vue
+++ b/doc/orderlist/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     orderlist: {
         root: 'flex',
         controls: 'flex flex-col justify-center p-5',
@@ -145,7 +146,8 @@ const products = ref(null);
 onMounted(() => {
     ProductService.getProductsSmall().then((data) => (products.value = data));
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/organizationchart/BasicDoc.vue b/doc/organizationchart/BasicDoc.vue
index 3978c2d87..e7509ceab 100644
--- a/doc/organizationchart/BasicDoc.vue
+++ b/doc/organizationchart/BasicDoc.vue
@@ -49,7 +49,8 @@ export default {
     <template #default="slotProps">
         <span>{{ slotProps.node.label }}</span>
     </template>
-</OrganizationChart>`,
+</OrganizationChart>
+`,
                 options: `
 <template>
     <div class="card overflow-x-auto">
@@ -95,7 +96,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card overflow-x-auto">
@@ -137,7 +139,8 @@ const data = ref({
         }
     ]
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/organizationchart/ColoredDoc.vue b/doc/organizationchart/ColoredDoc.vue
index 4149e613c..addb869ad 100644
--- a/doc/organizationchart/ColoredDoc.vue
+++ b/doc/organizationchart/ColoredDoc.vue
@@ -92,7 +92,8 @@ export default {
     <template #default="slotProps">
         <span>{{ slotProps.node.label }}</span>
     </template>
-</OrganizationChart>`,
+</OrganizationChart>
+`,
                 options: `
 <template>
     <div class="card overflow-x-auto">
@@ -172,7 +173,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card overflow-x-auto">
@@ -248,7 +250,8 @@ const data = ref({
         }
     ]
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/organizationchart/SelectionDoc.vue b/doc/organizationchart/SelectionDoc.vue
index 2bba87b5b..bf885a0a3 100644
--- a/doc/organizationchart/SelectionDoc.vue
+++ b/doc/organizationchart/SelectionDoc.vue
@@ -93,7 +93,8 @@ export default {
     <template #default="slotProps">
         <span>{{ slotProps.node.label }}</span>
     </template>
-</OrganizationChart>`,
+</OrganizationChart>
+`,
                 options: `
 <template>
     <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
@@ -169,7 +170,8 @@ export default {
         };
     },
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
@@ -241,7 +243,8 @@ const data = ref({
     ]
 });
 const selection = ref({});
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/organizationchart/TemplateDoc.vue b/doc/organizationchart/TemplateDoc.vue
index c98248a79..879c00366 100644
--- a/doc/organizationchart/TemplateDoc.vue
+++ b/doc/organizationchart/TemplateDoc.vue
@@ -82,7 +82,8 @@ export default {
     <template #default="slotProps">
         <span>{{slotProps.node.data.label}}</span>
     </template>
-</OrganizationChart>`,
+</OrganizationChart>
+`,
                 options: `
 <template>
     <div class="card overflow-x-auto">
@@ -155,7 +156,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card overflow-x-auto">
@@ -224,7 +226,8 @@ const data = ref({
         }
     ]
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/organizationchart/pt/PTDoc.vue b/doc/organizationchart/pt/PTDoc.vue
index 4e3a27e71..2aae3df7b 100644
--- a/doc/organizationchart/pt/PTDoc.vue
+++ b/doc/organizationchart/pt/PTDoc.vue
@@ -63,7 +63,8 @@ export default {
     <template #default="slotProps">
         <span>{{ slotProps.node.label }}</span>
     </template>
-</OrganizationChart>`,
+</OrganizationChart>
+`,
                 options: `
 <template>
     <div class="card overflow-x-auto">
@@ -117,7 +118,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card overflow-x-auto">
@@ -167,7 +169,8 @@ const data = ref({
         }
     ]
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/organizationchart/theming/TailwindDoc.vue b/doc/organizationchart/theming/TailwindDoc.vue
index 921abff9e..3d0e21992 100644
--- a/doc/organizationchart/theming/TailwindDoc.vue
+++ b/doc/organizationchart/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     organizationchart: {
         table: 'mx-auto my-0 border-spacing-0 border-separate',
         cell: 'text-center align-top py-0 px-3',
@@ -131,7 +132,8 @@ const data = ref({
         }
     ]
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/overlaypanel/BasicDoc.vue b/doc/overlaypanel/BasicDoc.vue
index add1c5171..6e272bde2 100644
--- a/doc/overlaypanel/BasicDoc.vue
+++ b/doc/overlaypanel/BasicDoc.vue
@@ -22,7 +22,8 @@ export default {
 
 <OverlayPanel ref="op">
     <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-</OverlayPanel>`,
+</OverlayPanel>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -42,7 +43,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -61,7 +63,8 @@ const op = ref();
 const toggle = (event) => {
     op.value.toggle(event);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/overlaypanel/DataTableDoc.vue b/doc/overlaypanel/DataTableDoc.vue
index 6bdff550c..e77005fc3 100644
--- a/doc/overlaypanel/DataTableDoc.vue
+++ b/doc/overlaypanel/DataTableDoc.vue
@@ -73,7 +73,8 @@ export default {
             </template>
         </Column>
     </DataTable>
-</OverlayPanel>`,
+</OverlayPanel>
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -134,7 +135,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -194,7 +196,8 @@ const onProductSelect = (event) => {
     op.value.hide();
     toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
 }
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */
 {
diff --git a/doc/overlaypanel/pt/PTDoc.vue b/doc/overlaypanel/pt/PTDoc.vue
index e4d49b42d..bb0963f6a 100644
--- a/doc/overlaypanel/pt/PTDoc.vue
+++ b/doc/overlaypanel/pt/PTDoc.vue
@@ -24,7 +24,8 @@ export default {
     }"
 >
     <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
-</OverlayPanel>`,
+</OverlayPanel>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -48,7 +49,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -71,7 +73,8 @@ const op = ref();
 const toggle = (event) => {
     op.value.toggle(event);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/overlaypanel/theming/TailwindDoc.vue b/doc/overlaypanel/theming/TailwindDoc.vue
index 185779883..ea095aea6 100644
--- a/doc/overlaypanel/theming/TailwindDoc.vue
+++ b/doc/overlaypanel/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -59,7 +60,8 @@ const op = ref();
 const toggle = (event) => {
     op.value.toggle(event);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/paginator/BasicDoc.vue b/doc/paginator/BasicDoc.vue
index 4770e30ac..aaf94e2e5 100644
--- a/doc/paginator/BasicDoc.vue
+++ b/doc/paginator/BasicDoc.vue
@@ -17,7 +17,8 @@ export default {
         return {
             code: {
                 basic: `
-<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>`,
+<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
+`,
                 options: `
 <template>
     <div class="card">
@@ -26,7 +27,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -35,7 +37,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/paginator/CurrentPageReportDoc.vue b/doc/paginator/CurrentPageReportDoc.vue
index d620bd0af..c133247a1 100644
--- a/doc/paginator/CurrentPageReportDoc.vue
+++ b/doc/paginator/CurrentPageReportDoc.vue
@@ -24,7 +24,8 @@ export default {
             code: {
                 basic: `
 <Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />`,
+    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -41,7 +42,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -54,7 +56,8 @@ export default {
 import { ref } from "vue";
 
 const first = ref(0);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/paginator/CustomContentDoc.vue b/doc/paginator/CustomContentDoc.vue
index f68c5c7b1..2dddef7ee 100644
--- a/doc/paginator/CustomContentDoc.vue
+++ b/doc/paginator/CustomContentDoc.vue
@@ -28,7 +28,8 @@ export default {
     <template #end>
         <Button type="button" icon="pi pi-search" />
     </template>
-</Paginator>`,
+</Paginator>
+`,
                 options: `
 <template>
     <div class="card">
@@ -46,7 +47,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -64,7 +66,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/paginator/ResponsiveDoc.vue b/doc/paginator/ResponsiveDoc.vue
index 32d0a5798..20f0dce18 100644
--- a/doc/paginator/ResponsiveDoc.vue
+++ b/doc/paginator/ResponsiveDoc.vue
@@ -35,7 +35,8 @@ export default {
     }"
     :rows="10"
     :totalRecords="120">
-</Paginator>`,
+</Paginator>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/paginator/TemplateDoc.vue b/doc/paginator/TemplateDoc.vue
index db0fb1266..73d78c09b 100644
--- a/doc/paginator/TemplateDoc.vue
+++ b/doc/paginator/TemplateDoc.vue
@@ -37,7 +37,8 @@ export default {
 
 <div class="p-3 text-center">
     <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="shadow-2 border-round w-full sm:w-30rem" />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card">
@@ -57,7 +58,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -73,7 +75,8 @@ export default {
 import { ref } from 'vue';
 
 const first = ref(0);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/paginator/pt/PTDoc.vue b/doc/paginator/pt/PTDoc.vue
index 21ccee9d9..1323885a0 100644
--- a/doc/paginator/pt/PTDoc.vue
+++ b/doc/paginator/pt/PTDoc.vue
@@ -28,7 +28,8 @@ export default {
             class: context.active ? 'bg-primary' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card">
@@ -45,7 +46,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -62,7 +64,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/paginator/theming/TailwindDoc.vue b/doc/paginator/theming/TailwindDoc.vue
index f9b566716..2f63236f0 100644
--- a/doc/paginator/theming/TailwindDoc.vue
+++ b/doc/paginator/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     paginator: {
         root: {
             class: [
@@ -205,7 +206,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/panel/BasicDoc.vue b/doc/panel/BasicDoc.vue
index f10b8cdb4..4fda697ea 100644
--- a/doc/panel/BasicDoc.vue
+++ b/doc/panel/BasicDoc.vue
@@ -24,7 +24,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Panel>`,
+</Panel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -38,7 +39,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -52,7 +54,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/panel/TemplateDoc.vue b/doc/panel/TemplateDoc.vue
index b5e50d7b5..e2ebd43cd 100644
--- a/doc/panel/TemplateDoc.vue
+++ b/doc/panel/TemplateDoc.vue
@@ -72,7 +72,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Panel>`,
+</Panel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -143,7 +144,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -217,7 +219,8 @@ const toggle = (event) => {
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/panel/ToggleableDoc.vue b/doc/panel/ToggleableDoc.vue
index 401689cb8..ef73d1add 100644
--- a/doc/panel/ToggleableDoc.vue
+++ b/doc/panel/ToggleableDoc.vue
@@ -24,7 +24,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Panel>`,
+</Panel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -38,7 +39,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -52,7 +54,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/panel/pt/PTDoc.vue b/doc/panel/pt/PTDoc.vue
index 979ddc432..22bf093f7 100644
--- a/doc/panel/pt/PTDoc.vue
+++ b/doc/panel/pt/PTDoc.vue
@@ -27,7 +27,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Panel>`,
+</Panel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -46,7 +47,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -65,7 +67,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/panel/theming/TailwindDoc.vue b/doc/panel/theming/TailwindDoc.vue
index 33f1f195f..b2542baff 100644
--- a/doc/panel/theming/TailwindDoc.vue
+++ b/doc/panel/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     toggleable: {
         enterFromClass: 'max-h-0',
         enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
@@ -71,7 +72,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/panelmenu/BasicDoc.vue b/doc/panelmenu/BasicDoc.vue
index 52d09deab..2f1ad7d22 100644
--- a/doc/panelmenu/BasicDoc.vue
+++ b/doc/panelmenu/BasicDoc.vue
@@ -130,7 +130,8 @@ export default {
             ],
             code: {
                 basic: `
-<PanelMenu :model="items" />`,
+<PanelMenu :model="items" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -261,7 +262,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -388,7 +390,8 @@ const items = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/panelmenu/MultipleDoc.vue b/doc/panelmenu/MultipleDoc.vue
index 4c6e27ecc..0154e1813 100644
--- a/doc/panelmenu/MultipleDoc.vue
+++ b/doc/panelmenu/MultipleDoc.vue
@@ -155,7 +155,8 @@ export default {
             ],
             code: {
                 basic: `
-<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />`,
+<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center">
@@ -311,7 +312,8 @@ export default {
       };
   },
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center">
@@ -486,7 +488,8 @@ const expandNode = (node) => {
       }
   }
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/panelmenu/ProgrammaticDoc.vue b/doc/panelmenu/ProgrammaticDoc.vue
index b5f8737d2..88323f8c6 100644
--- a/doc/panelmenu/ProgrammaticDoc.vue
+++ b/doc/panelmenu/ProgrammaticDoc.vue
@@ -162,7 +162,8 @@ export default {
             ],
             code: {
                 basic: `
-<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />`,
+<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center">
@@ -345,7 +346,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center">
@@ -524,7 +526,8 @@ const expandNode = (node) => {
         }
     }
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/panelmenu/pt/PTDoc.vue b/doc/panelmenu/pt/PTDoc.vue
index b04582853..246bece27 100644
--- a/doc/panelmenu/pt/PTDoc.vue
+++ b/doc/panelmenu/pt/PTDoc.vue
@@ -138,7 +138,8 @@ export default {
     :pt="{
         root: { class: 'w-full md:w-25rem' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -274,7 +275,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -406,7 +408,8 @@ const items = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/panelmenu/theming/TailwindDoc.vue b/doc/panelmenu/theming/TailwindDoc.vue
index e76053b60..a12c9b8e8 100644
--- a/doc/panelmenu/theming/TailwindDoc.vue
+++ b/doc/panelmenu/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     toggleable: {
         enterFromClass: 'max-h-0',
         enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
@@ -197,7 +198,8 @@ const items = ref([
         ]
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/passthrough/BasicDoc.vue b/doc/passthrough/BasicDoc.vue
index e2543637f..f99e79cf1 100644
--- a/doc/passthrough/BasicDoc.vue
+++ b/doc/passthrough/BasicDoc.vue
@@ -72,7 +72,8 @@ export default {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
-</Panel>`,
+</Panel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -104,7 +105,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -136,7 +138,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/passthrough/LifecycleDoc.vue b/doc/passthrough/LifecycleDoc.vue
index 58acd467f..e19353600 100644
--- a/doc/passthrough/LifecycleDoc.vue
+++ b/doc/passthrough/LifecycleDoc.vue
@@ -17,7 +17,8 @@ export default {
                 basic: `
 <Panel header="Header" :pt="panelPT">
     Content
-</Panel>`,
+</Panel>
+`,
                 options: `
 <template>
     <Panel header="Header" :pt="panelPT">
@@ -42,7 +43,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <Panel header="Header" :pt="panelPT">
@@ -63,7 +65,8 @@ const panelPt = ref({
         }
     }
 );
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/password/AccessibilityDoc.vue b/doc/password/AccessibilityDoc.vue
index 473beb1a4..bf9114076 100644
--- a/doc/password/AccessibilityDoc.vue
+++ b/doc/password/AccessibilityDoc.vue
@@ -43,7 +43,8 @@ export default {
 <span id="pwd2">Password</span>
 <Password aria-labelledby="pwd2" />
 
-<Password aria-label="Password"/>`
+<Password aria-label="Password"/>
+`
             }
         };
     }
diff --git a/doc/password/BasicDoc.vue b/doc/password/BasicDoc.vue
index fd210fb9c..b04b3660c 100644
--- a/doc/password/BasicDoc.vue
+++ b/doc/password/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Password v-model="value" :feedback="false" />`,
+<Password v-model="value" :feedback="false" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/password/DisabledDoc.vue b/doc/password/DisabledDoc.vue
index c45709d4e..a894d8c9f 100644
--- a/doc/password/DisabledDoc.vue
+++ b/doc/password/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Password disabled placeholder="Disabled" />`,
+<Password disabled placeholder="Disabled" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/password/FloatLabelDoc.vue b/doc/password/FloatLabelDoc.vue
index 1da2da3cb..4540904b3 100644
--- a/doc/password/FloatLabelDoc.vue
+++ b/doc/password/FloatLabelDoc.vue
@@ -21,7 +21,8 @@ export default {
 <span class="p-float-label">
     <Password v-model="value" inputId="password" />
     <label for="password">Password</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -40,7 +41,8 @@ export default {
       }
   }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +57,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/password/InvalidDoc.vue b/doc/password/InvalidDoc.vue
index aabf7a937..da0891692 100644
--- a/doc/password/InvalidDoc.vue
+++ b/doc/password/InvalidDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Password class="p-invalid" />`,
+<Password class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/password/LocaleDoc.vue b/doc/password/LocaleDoc.vue
index ab210f0a3..2a5f82d9e 100644
--- a/doc/password/LocaleDoc.vue
+++ b/doc/password/LocaleDoc.vue
@@ -18,7 +18,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />`,
+<Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
+`,
                 options: `
 <template>
   <div class="card flex justify-content-center">
@@ -34,7 +35,8 @@ export default {
       }
   }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
   <div class="card flex justify-content-center">
@@ -46,7 +48,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/password/MeterDoc.vue b/doc/password/MeterDoc.vue
index 7e949be19..4dc8ed91d 100644
--- a/doc/password/MeterDoc.vue
+++ b/doc/password/MeterDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Password v-model="value" />`,
+<Password v-model="value" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/password/TemplateDoc.vue b/doc/password/TemplateDoc.vue
index f60293d68..2f4901c83 100644
--- a/doc/password/TemplateDoc.vue
+++ b/doc/password/TemplateDoc.vue
@@ -43,7 +43,8 @@ export default {
             <li>Minimum 8 characters</li>
         </ul>
     </template>
-</Password>`,
+</Password>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -73,7 +74,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -99,7 +101,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/password/ToggleMaskDoc.vue b/doc/password/ToggleMaskDoc.vue
index aa20b4e16..edf7d2308 100644
--- a/doc/password/ToggleMaskDoc.vue
+++ b/doc/password/ToggleMaskDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Password v-model="value" toggleMask />`,
+<Password v-model="value" toggleMask />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/password/form/VeeValidateDoc.vue b/doc/password/form/VeeValidateDoc.vue
index 1997e4d40..266276c59 100644
--- a/doc/password/form/VeeValidateDoc.vue
+++ b/doc/password/form/VeeValidateDoc.vue
@@ -54,7 +54,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -96,7 +97,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/password/pt/PTDoc.vue b/doc/password/pt/PTDoc.vue
index 4dd3f00db..e2977749c 100644
--- a/doc/password/pt/PTDoc.vue
+++ b/doc/password/pt/PTDoc.vue
@@ -23,7 +23,8 @@ export default {
     :pt="{
         info: { class: 'font-bold' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -44,7 +45,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -61,7 +63,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/password/theming/TailwindDoc.vue b/doc/password/theming/TailwindDoc.vue
index 31c060362..902fa4817 100644
--- a/doc/password/theming/TailwindDoc.vue
+++ b/doc/password/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -70,7 +71,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/picklist/AccessibilityDoc.vue b/doc/picklist/AccessibilityDoc.vue
index 59bc9d2d4..4e60518d5 100644
--- a/doc/picklist/AccessibilityDoc.vue
+++ b/doc/picklist/AccessibilityDoc.vue
@@ -130,7 +130,8 @@ export default {
 <span id="lb">Options</span>
 <PickList aria-labelledby="lb" />
 
-<PickList aria-label="City" />`
+<PickList aria-label="City" />
+`
             }
         };
     }
diff --git a/doc/picklist/BasicDoc.vue b/doc/picklist/BasicDoc.vue
index af268e1b7..b634456b4 100644
--- a/doc/picklist/BasicDoc.vue
+++ b/doc/picklist/BasicDoc.vue
@@ -49,7 +49,8 @@ export default {
             <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
         </div>
     </template>
-</PickList>`,
+</PickList>
+`,
                 options: `
 <template>
     <div class="card">
@@ -85,7 +86,8 @@ export default {
         ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -118,7 +120,8 @@ const products = ref(null);
 onMounted(() => {
     ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */
 {
diff --git a/doc/picklist/pt/PTDoc.vue b/doc/picklist/pt/PTDoc.vue
index 03c5d74be..62508af85 100644
--- a/doc/picklist/pt/PTDoc.vue
+++ b/doc/picklist/pt/PTDoc.vue
@@ -73,7 +73,8 @@ export default {
             <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
         </div>
     </template>
-</PickList>`,
+</PickList>
+`,
                 options: `
 <template>
     <div class="card">
@@ -122,7 +123,8 @@ export default {
         ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -168,7 +170,8 @@ const products = ref(null);
 onMounted(() => {
     ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 /* ProductService */
 {
diff --git a/doc/picklist/theming/TailwindDoc.vue b/doc/picklist/theming/TailwindDoc.vue
index 374332692..c7e857bb7 100644
--- a/doc/picklist/theming/TailwindDoc.vue
+++ b/doc/picklist/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     picklist: {
         root: 'flex',
         sourcecontrols: 'flex flex-col justify-center p-5',
@@ -296,7 +297,8 @@ const products = ref(null);
 onMounted(() => {
     ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/progressbar/AccessibilityDoc.vue b/doc/progressbar/AccessibilityDoc.vue
index f6b0fd5b0..44d1ae9b9 100644
--- a/doc/progressbar/AccessibilityDoc.vue
+++ b/doc/progressbar/AccessibilityDoc.vue
@@ -22,7 +22,8 @@ export default {
 <span id="label_status" />
 <ProgressBar aria-labelledby="label_status" />
 
-<ProgressBar aria-label="Status" />`
+<ProgressBar aria-label="Status" />
+`
             }
         };
     }
diff --git a/doc/progressbar/BasicDoc.vue b/doc/progressbar/BasicDoc.vue
index 0746096b2..f3ea996b1 100644
--- a/doc/progressbar/BasicDoc.vue
+++ b/doc/progressbar/BasicDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<ProgressBar :value="50"></ProgressBar>`,
+<ProgressBar :value="50"></ProgressBar>
+`,
                 options: `
 <template>
     <div class="card">
@@ -24,7 +25,8 @@ export default {
 
 <script >
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -34,7 +36,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/progressbar/DynamicDoc.vue b/doc/progressbar/DynamicDoc.vue
index 865d20557..2793a2b1d 100644
--- a/doc/progressbar/DynamicDoc.vue
+++ b/doc/progressbar/DynamicDoc.vue
@@ -16,7 +16,8 @@ export default {
             interval: null,
             code: {
                 basic: `
-<ProgressBar :value="value"></ProgressBar>`,
+<ProgressBar :value="value"></ProgressBar>
+`,
                 options: `
 <template>
     <div class="card">
@@ -58,7 +59,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -96,7 +98,8 @@ const endProgress = () => {
     clearInterval(interval.value);
     interval.value = null;
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/progressbar/IndeterminateDoc.vue b/doc/progressbar/IndeterminateDoc.vue
index 1147217b9..c9cd369df 100644
--- a/doc/progressbar/IndeterminateDoc.vue
+++ b/doc/progressbar/IndeterminateDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>`,
+<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
+`,
                 options: `
 <template>
     <div class="card">
@@ -24,7 +25,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -34,7 +36,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/progressbar/TemplateDoc.vue b/doc/progressbar/TemplateDoc.vue
index da0d644b9..87b680f63 100644
--- a/doc/progressbar/TemplateDoc.vue
+++ b/doc/progressbar/TemplateDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 40,
             code: {
                 basic: `
-<ProgressBar :value="40"> {{ value }}/100 </ProgressBar>`,
+<ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
+`,
                 options: `
 <template>
     <div class="card">
@@ -31,7 +32,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const value = ref(40);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/progressbar/pt/PTDoc.vue b/doc/progressbar/pt/PTDoc.vue
index b4d5e7b0d..b35b2902c 100644
--- a/doc/progressbar/pt/PTDoc.vue
+++ b/doc/progressbar/pt/PTDoc.vue
@@ -20,7 +20,8 @@ export default {
 <ProgressBar :value="50"
     :pt="{
         value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
-    }" />`,
+    }" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -32,7 +33,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -44,7 +46,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/progressbar/theming/TailwindDoc.vue b/doc/progressbar/theming/TailwindDoc.vue
index fb872a46e..cbf76c50e 100644
--- a/doc/progressbar/theming/TailwindDoc.vue
+++ b/doc/progressbar/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     global: {
         css: \`
         .progressbar-value-animate::after {
@@ -103,7 +104,8 @@ const endProgress = () => {
     clearInterval(interval.value);
     interval.value = null;
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/progressspinner/AccessibilityDoc.vue b/doc/progressspinner/AccessibilityDoc.vue
index 927259d77..e1b4f8c4f 100644
--- a/doc/progressspinner/AccessibilityDoc.vue
+++ b/doc/progressspinner/AccessibilityDoc.vue
@@ -15,7 +15,8 @@ export default {
         return {
             code: {
                 basic: `
-<ProgressSpinner aria-label="Loading" />`
+<ProgressSpinner aria-label="Loading" />
+`
             }
         };
     }
diff --git a/doc/progressspinner/BasicDoc.vue b/doc/progressspinner/BasicDoc.vue
index df3d91522..87fb1fdf5 100644
--- a/doc/progressspinner/BasicDoc.vue
+++ b/doc/progressspinner/BasicDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<ProgressSpinner />`,
+<ProgressSpinner />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/progressspinner/CustomDoc.vue b/doc/progressspinner/CustomDoc.vue
index f85fb66eb..079f59042 100644
--- a/doc/progressspinner/CustomDoc.vue
+++ b/doc/progressspinner/CustomDoc.vue
@@ -15,7 +15,8 @@ export default {
             code: {
                 basic: `
 <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
-    animationDuration=".5s" aria-label="Custom ProgressSpinner" />`,
+    animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -25,7 +26,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -35,7 +37,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/progressspinner/pt/PTDoc.vue b/doc/progressspinner/pt/PTDoc.vue
index f054fd712..0da8386d3 100644
--- a/doc/progressspinner/pt/PTDoc.vue
+++ b/doc/progressspinner/pt/PTDoc.vue
@@ -22,7 +22,8 @@ export default {
         spinner: { style: { animationDuration: '0s' } },
         circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -36,7 +37,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -50,7 +52,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/progressspinner/theming/TailwindDoc.vue b/doc/progressspinner/theming/TailwindDoc.vue
index 5b3cec890..81db9c348 100644
--- a/doc/progressspinner/theming/TailwindDoc.vue
+++ b/doc/progressspinner/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     global: {
         css: \`
         .progress-spinner-circle {
@@ -75,7 +76,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/radiobutton/AccessibilityDoc.vue b/doc/radiobutton/AccessibilityDoc.vue
index 75fd377e6..3759d6e37 100644
--- a/doc/radiobutton/AccessibilityDoc.vue
+++ b/doc/radiobutton/AccessibilityDoc.vue
@@ -61,7 +61,8 @@ export default {
 <span id="rb2">Two</span>
 <RadioButton aria-labelledby="rb2" />
 
-<RadioButton aria-label="Three" />`
+<RadioButton aria-label="Three" />
+`
             }
         };
     }
diff --git a/doc/radiobutton/DisabledDoc.vue b/doc/radiobutton/DisabledDoc.vue
index 5f94cc6c3..3e16d3a1d 100644
--- a/doc/radiobutton/DisabledDoc.vue
+++ b/doc/radiobutton/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             checked: true,
             code: {
                 basic: `
-<RadioButton v-model="checked" disabled :value="checked" />`,
+<RadioButton v-model="checked" disabled :value="checked" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/radiobutton/DynamicDoc.vue b/doc/radiobutton/DynamicDoc.vue
index 9222b28a8..e2089e722 100644
--- a/doc/radiobutton/DynamicDoc.vue
+++ b/doc/radiobutton/DynamicDoc.vue
@@ -30,6 +30,7 @@ export default {
     <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
     <label :for="category.key" class="ml-2">{{ category.name }}</label>
 </div>
+
 `,
                 options: `
 <template>
@@ -57,7 +58,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -80,7 +82,8 @@ const categories = ref([
     { name: 'Production', key: 'P' },
     { name: 'Research', key: 'R' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/radiobutton/GroupDoc.vue b/doc/radiobutton/GroupDoc.vue
index 2b564755b..f71b6bec0 100644
--- a/doc/radiobutton/GroupDoc.vue
+++ b/doc/radiobutton/GroupDoc.vue
@@ -49,7 +49,8 @@ export default {
         <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
         <label for="ingredient4" class="ml-2">Onion</label>
     </div>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -82,7 +83,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -111,7 +113,8 @@ export default {
 import { ref } from 'vue';
 
 const ingredient = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/radiobutton/InvalidDoc.vue b/doc/radiobutton/InvalidDoc.vue
index b17a2194f..0767f2feb 100644
--- a/doc/radiobutton/InvalidDoc.vue
+++ b/doc/radiobutton/InvalidDoc.vue
@@ -15,7 +15,8 @@ export default {
             checked: false,
             code: {
                 basic: `
-<RadioButton class="p-invalid" />`,
+<RadioButton class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -24,7 +25,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -33,7 +35,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/radiobutton/form/VeeValidateDoc.vue b/doc/radiobutton/form/VeeValidateDoc.vue
index 51ac5d7f4..f7c8a9c10 100644
--- a/doc/radiobutton/form/VeeValidateDoc.vue
+++ b/doc/radiobutton/form/VeeValidateDoc.vue
@@ -86,7 +86,8 @@ export default {
         <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -145,7 +146,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     },
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -198,7 +200,8 @@ const onSubmit = handleSubmit((values) => {
         resetForm();
     }
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/radiobutton/pt/PTDoc.vue b/doc/radiobutton/pt/PTDoc.vue
index 5be582f90..bb79f3cc3 100644
--- a/doc/radiobutton/pt/PTDoc.vue
+++ b/doc/radiobutton/pt/PTDoc.vue
@@ -48,6 +48,7 @@ export default {
     />
     <label :for="category.key" class="ml-2">{{ category.name }}</label>
 </div>
+
 `,
                 options: `
 <template>
@@ -85,7 +86,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -118,7 +120,8 @@ const categories = ref([
     { name: 'Production', key: 'P' },
     { name: 'Research', key: 'R' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/radiobutton/theming/TailwindDoc.vue b/doc/radiobutton/theming/TailwindDoc.vue
index a75648adf..3a94d9824 100644
--- a/doc/radiobutton/theming/TailwindDoc.vue
+++ b/doc/radiobutton/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     radiobutton: {
         root: {
             class: ['relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6']
@@ -77,7 +78,8 @@ export default {
 import { ref } from 'vue';
 
 const ingredient = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/rating/BasicDoc.vue b/doc/rating/BasicDoc.vue
index e867463bd..91ec6c336 100644
--- a/doc/rating/BasicDoc.vue
+++ b/doc/rating/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Rating v-model="value" />`,
+<Rating v-model="value" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/rating/DisabledDoc.vue b/doc/rating/DisabledDoc.vue
index 36aa18899..0473d42f5 100644
--- a/doc/rating/DisabledDoc.vue
+++ b/doc/rating/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 5,
             code: {
                 basic: `
-<Rating v-model="value" disabled />`,
+<Rating v-model="value" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(5);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/rating/NumberOfStarsDoc.vue b/doc/rating/NumberOfStarsDoc.vue
index 11987f358..48aa22859 100644
--- a/doc/rating/NumberOfStarsDoc.vue
+++ b/doc/rating/NumberOfStarsDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Rating v-model="value" :stars="10" />`,
+<Rating v-model="value" :stars="10" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/rating/ReadOnlyDoc.vue b/doc/rating/ReadOnlyDoc.vue
index 1a441bb7f..15a20bf5a 100644
--- a/doc/rating/ReadOnlyDoc.vue
+++ b/doc/rating/ReadOnlyDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 5,
             code: {
                 basic: `
-<Rating v-model="value" readonly />`,
+<Rating v-model="value" readonly />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/rating/TemplateDoc.vue b/doc/rating/TemplateDoc.vue
index a58f65112..8318a0253 100644
--- a/doc/rating/TemplateDoc.vue
+++ b/doc/rating/TemplateDoc.vue
@@ -35,7 +35,8 @@ export default {
     <template #officon>
         <img src="/images/rating/custom-officon.png" height="24" width="24" />
     </template>
-</Rating>`,
+</Rating>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -61,7 +62,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -83,7 +85,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/rating/WithoutCancelDoc.vue b/doc/rating/WithoutCancelDoc.vue
index 4f43cb18c..e9d0cb1e8 100644
--- a/doc/rating/WithoutCancelDoc.vue
+++ b/doc/rating/WithoutCancelDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Rating v-model="value" :cancel="false" />`,
+<Rating v-model="value" :cancel="false" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/rating/pt/PTDoc.vue b/doc/rating/pt/PTDoc.vue
index acdbe9ed7..aa71f489a 100644
--- a/doc/rating/pt/PTDoc.vue
+++ b/doc/rating/pt/PTDoc.vue
@@ -23,7 +23,8 @@ export default {
     :pt="{
         onIcon: { class: 'text-orange-400' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -44,7 +45,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -61,7 +63,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/rating/theming/TailwindDoc.vue b/doc/rating/theming/TailwindDoc.vue
index ac980f6d3..1b0b1f7d4 100644
--- a/doc/rating/theming/TailwindDoc.vue
+++ b/doc/rating/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     rating: {
         root: ({ props }) => ({
             class: [
@@ -71,7 +72,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/ripple/ConfigurationDoc.vue b/doc/ripple/ConfigurationDoc.vue
index 068ba8901..c73633aac 100644
--- a/doc/ripple/ConfigurationDoc.vue
+++ b/doc/ripple/ConfigurationDoc.vue
@@ -14,11 +14,13 @@ export default {
 mounted() {
     this.$primevue.config.ripple = true;
 }
+
 `,
                 options: `
 mounted() {
     this.$primevue.config.ripple = true;
-}`,
+}
+`,
                 composition: `
 import { usePrimeVue } from 'primevue/config';
 
diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue
index 337457612..51c11ac1c 100644
--- a/doc/ripple/CustomDoc.vue
+++ b/doc/ripple/CustomDoc.vue
@@ -18,7 +18,8 @@ export default {
                 basic: `
 <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
 <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
-<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>`,
+<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
+`,
                 options: `
 <template>
     <div class="flex justify-content-center align-items-center">
@@ -47,7 +48,8 @@ export default {
     width: 110px;
     text-align: center;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="flex justify-content-center align-items-center">
diff --git a/doc/ripple/DefaultDoc.vue b/doc/ripple/DefaultDoc.vue
index bf39c697a..d198f9cb8 100644
--- a/doc/ripple/DefaultDoc.vue
+++ b/doc/ripple/DefaultDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div>`,
+<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div>
+`,
                 options: `
 <template>
     <div class="card card-container flex justify-content-center align-items-center">
@@ -23,7 +24,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card card-container flex justify-content-center align-items-center">
@@ -32,7 +34,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/ripple/pt/PTDoc.vue b/doc/ripple/pt/PTDoc.vue
index c03c32f04..e36d2cd86 100644
--- a/doc/ripple/pt/PTDoc.vue
+++ b/doc/ripple/pt/PTDoc.vue
@@ -30,7 +30,8 @@ export default {
     class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold"
 >
     Default
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card card-container flex justify-content-center align-items-center">
@@ -48,7 +49,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card card-container flex justify-content-center align-items-center">
@@ -66,7 +68,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/ripple/theming/TailwindDoc.vue b/doc/ripple/theming/TailwindDoc.vue
index 8ed86b39a..f1d4ac176 100644
--- a/doc/ripple/theming/TailwindDoc.vue
+++ b/doc/ripple/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     global: {
         css: \`
         *[data-pd-ripple="true"]{
@@ -53,7 +54,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/scrollpanel/BasicDoc.vue b/doc/scrollpanel/BasicDoc.vue
index 8cb9425fc..9603e7562 100644
--- a/doc/scrollpanel/BasicDoc.vue
+++ b/doc/scrollpanel/BasicDoc.vue
@@ -32,7 +32,8 @@ export default {
         Lorem ipsum dolor ...
     </p>
 </ScrollPanel>
-                `,
+                
+`,
                 options: `
 <template>
     <div class="card">
@@ -54,7 +55,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -76,7 +78,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/scrollpanel/CustomDoc.vue b/doc/scrollpanel/CustomDoc.vue
index 5dc52cdc8..82c509e06 100644
--- a/doc/scrollpanel/CustomDoc.vue
+++ b/doc/scrollpanel/CustomDoc.vue
@@ -57,7 +57,8 @@ export default {
     <p>
         Lorem ipsum dolor ..
     </p>
-</ScrollPanel>`,
+</ScrollPanel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -127,7 +128,8 @@ export default {
     opacity: 1;
     transition: background-color 0.3s;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/scrollpanel/pt/PTDoc.vue b/doc/scrollpanel/pt/PTDoc.vue
index 7b1a55081..e46166b29 100644
--- a/doc/scrollpanel/pt/PTDoc.vue
+++ b/doc/scrollpanel/pt/PTDoc.vue
@@ -44,7 +44,8 @@ export default {
         At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
         officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
     </p>
-</ScrollPanel>`,
+</ScrollPanel>
+`,
                 options: `
 <template>
     <div class="card">
@@ -69,7 +70,8 @@ export default {
             </p>
         </ScrollPanel>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/scrollpanel/theming/TailwindDoc.vue b/doc/scrollpanel/theming/TailwindDoc.vue
index cfb3e495f..17d635e0b 100644
--- a/doc/scrollpanel/theming/TailwindDoc.vue
+++ b/doc/scrollpanel/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     scrollpanel: {
         wrapper: 'overflow-hidden relative float-left h-full w-full z-[1]',
         content: 'box-border h-[calc(100%+18px)] overflow-scroll pr-[18px] pb-[18px] pl-0 pt-0 relative scrollbar-none w-[calc(100%+18px)] [&::-webkit-scrollbar]:hidden',
@@ -51,7 +52,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/scrolltop/BasicDoc.vue b/doc/scrolltop/BasicDoc.vue
index fe8fbf48f..88b44424d 100644
--- a/doc/scrolltop/BasicDoc.vue
+++ b/doc/scrolltop/BasicDoc.vue
@@ -16,7 +16,8 @@ export default {
         return {
             code: {
                 basic: `
-<ScrollTop />`,
+<ScrollTop />
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center" style="height: 2000px">
@@ -27,7 +28,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center" style="height: 2000px">
@@ -38,7 +40,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/scrolltop/ElementDoc.vue b/doc/scrolltop/ElementDoc.vue
index b2019250a..3855801ba 100644
--- a/doc/scrolltop/ElementDoc.vue
+++ b/doc/scrolltop/ElementDoc.vue
@@ -23,7 +23,8 @@ export default {
         return {
             code: {
                 basic: `
-<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />`,
+<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -59,7 +60,8 @@ export default {
     font-size: 1rem;
     color: var(--primary-color-text);
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/scrolltop/pt/PTDoc.vue b/doc/scrolltop/pt/PTDoc.vue
index cad334197..bad90eb67 100644
--- a/doc/scrolltop/pt/PTDoc.vue
+++ b/doc/scrolltop/pt/PTDoc.vue
@@ -26,7 +26,8 @@ export default {
         root: { class: 'w-2rem h-2rem bg-primary' },
         icon: { class: 'w-1rem h-1rem' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -46,7 +47,8 @@ export default {
             />
         </ScrollPanel>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/scrolltop/theming/TailwindDoc.vue b/doc/scrolltop/theming/TailwindDoc.vue
index dc2679f15..888af051f 100644
--- a/doc/scrolltop/theming/TailwindDoc.vue
+++ b/doc/scrolltop/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     scrolltop: {
         root: ({ props }) => ({
             class: [
diff --git a/doc/selectbutton/AccessibilityDoc.vue b/doc/selectbutton/AccessibilityDoc.vue
index 56135f793..2682c68a1 100644
--- a/doc/selectbutton/AccessibilityDoc.vue
+++ b/doc/selectbutton/AccessibilityDoc.vue
@@ -58,7 +58,8 @@ export default {
 <span id="label_number">Number</span>
 <Slider aria-labelledby="label_number" />
 
-<Slider aria-label="Number" />`
+<Slider aria-label="Number" />
+`
             }
         };
     }
diff --git a/doc/selectbutton/BasicDoc.vue b/doc/selectbutton/BasicDoc.vue
index 71b6d1994..cc309c4e9 100644
--- a/doc/selectbutton/BasicDoc.vue
+++ b/doc/selectbutton/BasicDoc.vue
@@ -19,7 +19,8 @@ export default {
             options: ['Off', 'On'],
             code: {
                 basic: `
-<SelectButton v-model="value" :options="options" aria-labelledby="basic" />`,
+<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -36,7 +37,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -49,7 +51,8 @@ import { ref } from 'vue';
 
 const value = ref('Off');
 const options = ref(['Off', 'On']);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/selectbutton/DisabledDoc.vue b/doc/selectbutton/DisabledDoc.vue
index 77d4e8bc9..fec9c87a4 100644
--- a/doc/selectbutton/DisabledDoc.vue
+++ b/doc/selectbutton/DisabledDoc.vue
@@ -23,7 +23,8 @@ export default {
             code: {
                 basic: `
 <SelectButton v-model="value" :options="options" disabled />
-<SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />`,
+<SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center flex-wrap gap-3">
@@ -46,7 +47,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center flex-wrap gap-3">
@@ -65,7 +67,8 @@ const options2 = ref([
                 { name: 'Option 1', value: 1 },
                 { name: 'Option 2', value: 2, constant: true }
             ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/selectbutton/InvalidDoc.vue b/doc/selectbutton/InvalidDoc.vue
index d1b0603ee..92a9e0e04 100644
--- a/doc/selectbutton/InvalidDoc.vue
+++ b/doc/selectbutton/InvalidDoc.vue
@@ -16,7 +16,8 @@ export default {
             options: ['Off', 'On'],
             code: {
                 basic: `
-<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />`,
+<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -33,7 +34,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -46,7 +48,8 @@ import { ref } from 'vue';
 
 const value = ref('off');
 const options = ref(['Off', 'On']);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/selectbutton/MultipleDoc.vue b/doc/selectbutton/MultipleDoc.vue
index aa8c521e7..78f0c9906 100644
--- a/doc/selectbutton/MultipleDoc.vue
+++ b/doc/selectbutton/MultipleDoc.vue
@@ -20,7 +20,8 @@ export default {
             ],
             code: {
                 basic: `
-<SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />`,
+<SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -41,7 +42,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +60,8 @@ const options = ref([
                 { name: 'Option 2', value: 2 },
                 { name: 'Option 3', value: 3 }
             ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/selectbutton/TemplateDoc.vue b/doc/selectbutton/TemplateDoc.vue
index 88263ddde..6928e429d 100644
--- a/doc/selectbutton/TemplateDoc.vue
+++ b/doc/selectbutton/TemplateDoc.vue
@@ -29,7 +29,8 @@ export default {
     <template #option="slotProps">
         <i :class="slotProps.option.icon"></i>
     </template>
-</SelectButton>`,
+</SelectButton>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +56,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -77,7 +79,8 @@ const options = ref([
                 { icon: 'pi pi-align-center', value: 'Center' },
                 { icon: 'pi pi-align-justify', value: 'Justify' }
             ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/selectbutton/form/VeeValidateDoc.vue b/doc/selectbutton/form/VeeValidateDoc.vue
index 54a3e80d4..2f7fec748 100644
--- a/doc/selectbutton/form/VeeValidateDoc.vue
+++ b/doc/selectbutton/form/VeeValidateDoc.vue
@@ -52,7 +52,8 @@ export default {
         <Button type="submit" label="Submit" />
     </form>
     <Toast />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -98,7 +99,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -136,7 +138,8 @@ const onSubmit = handleSubmit((values) => {
         resetForm();
     }
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/selectbutton/pt/PTDoc.vue b/doc/selectbutton/pt/PTDoc.vue
index 9f40b32bd..9864819f0 100644
--- a/doc/selectbutton/pt/PTDoc.vue
+++ b/doc/selectbutton/pt/PTDoc.vue
@@ -32,7 +32,8 @@ export default {
             class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +59,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -80,7 +82,8 @@ import { ref } from 'vue';
 
 const value = ref('off');
 const options = ref(['Off', 'On']);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/selectbutton/theming/TailwindDoc.vue b/doc/selectbutton/theming/TailwindDoc.vue
index 6c65ed48c..81c8752f2 100644
--- a/doc/selectbutton/theming/TailwindDoc.vue
+++ b/doc/selectbutton/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     selectbutton: {
         root: ({ props }) => ({
             class: [{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
@@ -52,7 +53,8 @@ import { ref } from 'vue';
 
 const value = ref('Off');
 const options = ref(['Off', 'On']);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/sidebar/BasicDoc.vue b/doc/sidebar/BasicDoc.vue
index f38f62538..957f340e8 100644
--- a/doc/sidebar/BasicDoc.vue
+++ b/doc/sidebar/BasicDoc.vue
@@ -25,7 +25,8 @@ export default {
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Sidebar>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -61,7 +63,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/sidebar/FullScreenDoc.vue b/doc/sidebar/FullScreenDoc.vue
index 737cf3964..b668da864 100644
--- a/doc/sidebar/FullScreenDoc.vue
+++ b/doc/sidebar/FullScreenDoc.vue
@@ -25,7 +25,8 @@ export default {
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Sidebar>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -61,7 +63,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/sidebar/PositionDoc.vue b/doc/sidebar/PositionDoc.vue
index d0f626b3a..09c788dd2 100644
--- a/doc/sidebar/PositionDoc.vue
+++ b/doc/sidebar/PositionDoc.vue
@@ -68,7 +68,8 @@ export default {
 <Sidebar v-model:visible="visibleBottom" position="bottom">
     <h2>Bottom Sidebar</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-</Sidebar>`,
+</Sidebar>
+`,
                 options: `
 <template>
     <div class="card">
@@ -112,7 +113,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -152,7 +154,8 @@ const visibleLeft = ref(false);
 const visibleRight = ref(false);
 const visibleTop = ref(false);
 const visibleBottom = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/sidebar/SizeDoc.vue b/doc/sidebar/SizeDoc.vue
index 0d4574dca..01de209ea 100644
--- a/doc/sidebar/SizeDoc.vue
+++ b/doc/sidebar/SizeDoc.vue
@@ -25,7 +25,8 @@ export default {
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Sidebar>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -45,7 +46,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -61,7 +63,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/sidebar/TemplateDoc.vue b/doc/sidebar/TemplateDoc.vue
index 1c142347e..01dac1c14 100644
--- a/doc/sidebar/TemplateDoc.vue
+++ b/doc/sidebar/TemplateDoc.vue
@@ -45,7 +45,8 @@ export default {
         </template>
     </Sidebar>
     <Button icon="pi pi-plus" @click="visible = true" />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -75,7 +76,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -101,7 +103,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/sidebar/pt/PTDoc.vue b/doc/sidebar/pt/PTDoc.vue
index 1f583fe13..62de38035 100644
--- a/doc/sidebar/pt/PTDoc.vue
+++ b/doc/sidebar/pt/PTDoc.vue
@@ -25,7 +25,8 @@ export default {
     <h2>Sidebar</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </Sidebar>
-<Button icon="pi pi-arrow-right" @click="visible = true" />`,
+<Button icon="pi pi-arrow-right" @click="visible = true" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -49,7 +50,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -69,7 +71,8 @@ export default {
 import { ref } from "vue";
 
 const visible = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/sidebar/theming/TailwindDoc.vue b/doc/sidebar/theming/TailwindDoc.vue
index d35dd915c..57ca9f985 100644
--- a/doc/sidebar/theming/TailwindDoc.vue
+++ b/doc/sidebar/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     sidebar: {
         root: ({ props }) => ({
             class: [
@@ -120,7 +121,8 @@ const visibleLeft = ref(false);
 const visibleRight = ref(false);
 const visibleTop = ref(false);
 const visibleBottom = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/skeleton/CardDoc.vue b/doc/skeleton/CardDoc.vue
index 919c655ef..b299861ec 100644
--- a/doc/skeleton/CardDoc.vue
+++ b/doc/skeleton/CardDoc.vue
@@ -42,7 +42,8 @@ export default {
         <Skeleton width="4rem" height="2rem"></Skeleton>
         <Skeleton width="4rem" height="2rem"></Skeleton>
     </div>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card">
@@ -65,7 +66,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -88,7 +90,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/skeleton/DataTableDoc.vue b/doc/skeleton/DataTableDoc.vue
index 17cf2d3d9..f45d85633 100644
--- a/doc/skeleton/DataTableDoc.vue
+++ b/doc/skeleton/DataTableDoc.vue
@@ -56,7 +56,8 @@ export default {
             <Skeleton></Skeleton>
         </template>
     </Column>
-</DataTable>`,
+</DataTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -93,7 +94,8 @@ export default {
         };
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -126,7 +128,8 @@ export default {
 import { ref } from 'vue';
 
 const products = ref(new Array(4));
-<\/script>`
+<\/script>
+`
             },
             products: new Array(4)
         };
diff --git a/doc/skeleton/ListDoc.vue b/doc/skeleton/ListDoc.vue
index 4bda762f2..44f965437 100644
--- a/doc/skeleton/ListDoc.vue
+++ b/doc/skeleton/ListDoc.vue
@@ -92,7 +92,8 @@ export default {
             </div>
         </li>
     </ul>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="border-round border-1 surface-border p-4 surface-card">
@@ -138,7 +139,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="border-round border-1 surface-border p-4 surface-card">
@@ -184,7 +186,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/skeleton/ShapesDoc.vue b/doc/skeleton/ShapesDoc.vue
index ed1f2c396..6488505be 100644
--- a/doc/skeleton/ShapesDoc.vue
+++ b/doc/skeleton/ShapesDoc.vue
@@ -73,7 +73,8 @@ export default {
 <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
 <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
-<Skeleton shape="circle" size="5rem"></Skeleton>`,
+<Skeleton shape="circle" size="5rem"></Skeleton>
+`,
                 options: `
 <template>
     <div class="card">
@@ -117,7 +118,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -161,7 +163,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/skeleton/pt/PTDoc.vue b/doc/skeleton/pt/PTDoc.vue
index 41fdaa146..1b9cd6a15 100644
--- a/doc/skeleton/pt/PTDoc.vue
+++ b/doc/skeleton/pt/PTDoc.vue
@@ -16,7 +16,8 @@ export default {
     :pt="{
         root: { class: 'w-3rem h-3rem' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <Skeleton
@@ -24,7 +25,8 @@ export default {
             root: { class: 'w-3rem h-3rem' }
         }"
     />
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <Skeleton
diff --git a/doc/skeleton/theming/TailwindDoc.vue b/doc/skeleton/theming/TailwindDoc.vue
index fb155a5cd..602a0a3e3 100644
--- a/doc/skeleton/theming/TailwindDoc.vue
+++ b/doc/skeleton/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     skeleton: {
         root: ({ props }) => ({
             class: [
@@ -75,7 +76,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/slider/AccessibilityDoc.vue b/doc/slider/AccessibilityDoc.vue
index 305823b63..f2db9d61f 100644
--- a/doc/slider/AccessibilityDoc.vue
+++ b/doc/slider/AccessibilityDoc.vue
@@ -71,7 +71,8 @@ export default {
 <span id="label_number">Number</span>
 <Slider aria-labelledby="label_number" />
 
-<Slider aria-label="Number" />`
+<Slider aria-label="Number" />
+`
             }
         };
     }
diff --git a/doc/slider/BasicDoc.vue b/doc/slider/BasicDoc.vue
index c80365465..856540c31 100644
--- a/doc/slider/BasicDoc.vue
+++ b/doc/slider/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<Slider v-model="value" class="w-14rem" />`,
+<Slider v-model="value" class="w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/slider/InputDoc.vue b/doc/slider/InputDoc.vue
index bf1614d8d..5bdf3d994 100644
--- a/doc/slider/InputDoc.vue
+++ b/doc/slider/InputDoc.vue
@@ -19,7 +19,8 @@ export default {
             code: {
                 basic: `
 <InputText v-model.number="value" />
-<Slider v-model="value" />`,
+<Slider v-model="value" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -38,7 +39,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -53,7 +55,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(50);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/slider/RangeDoc.vue b/doc/slider/RangeDoc.vue
index d6b317fc7..44cf4fc33 100644
--- a/doc/slider/RangeDoc.vue
+++ b/doc/slider/RangeDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: [20, 80],
             code: {
                 basic: `
-<Slider v-model="value" range class="w-14rem" />`,
+<Slider v-model="value" range class="w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref([20, 80]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/slider/StepDoc.vue b/doc/slider/StepDoc.vue
index b335fea0b..95d3c8a35 100644
--- a/doc/slider/StepDoc.vue
+++ b/doc/slider/StepDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 20,
             code: {
                 basic: `
-<Slider v-model="value" :step="20" class="w-14rem" />`,
+<Slider v-model="value" :step="20" class="w-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(20);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/slider/VerticalDoc.vue b/doc/slider/VerticalDoc.vue
index 1477be0e2..a4fb2f3f2 100644
--- a/doc/slider/VerticalDoc.vue
+++ b/doc/slider/VerticalDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 50,
             code: {
                 basic: `
-<Slider v-model="value" orientation="vertical" class="h-14rem" />`,
+<Slider v-model="value" orientation="vertical" class="h-14rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(50);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/slider/pt/PTDoc.vue b/doc/slider/pt/PTDoc.vue
index 7db123da0..ff694b64c 100644
--- a/doc/slider/pt/PTDoc.vue
+++ b/doc/slider/pt/PTDoc.vue
@@ -27,7 +27,8 @@ export default {
         handle: { class: 'bg-orange-400 border-900' },
         range: { class: 'bg-orange-400' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -50,7 +51,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -69,7 +71,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/slider/theming/TailwindDoc.vue b/doc/slider/theming/TailwindDoc.vue
index 50a7f6b93..2111f39ea 100644
--- a/doc/slider/theming/TailwindDoc.vue
+++ b/doc/slider/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     slider: {
         root: ({ props }) => ({
             class: [
@@ -87,7 +88,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/speeddial/AccessibilityDoc.vue b/doc/speeddial/AccessibilityDoc.vue
index 816f0eb94..508764f29 100644
--- a/doc/speeddial/AccessibilityDoc.vue
+++ b/doc/speeddial/AccessibilityDoc.vue
@@ -123,7 +123,8 @@ export default {
         return {
             code: {
                 basic: `
-<SpeedDial aria-label="Options" />`
+<SpeedDial aria-label="Options" />
+`
             }
         };
     }
diff --git a/doc/speeddial/CircleDoc.vue b/doc/speeddial/CircleDoc.vue
index e6ea31839..3ae3bbcb2 100644
--- a/doc/speeddial/CircleDoc.vue
+++ b/doc/speeddial/CircleDoc.vue
@@ -53,7 +53,8 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />`,
+<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -108,7 +109,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -164,7 +166,8 @@ const items = ref([
         }
     }
 ])
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/speeddial/CustomDoc.vue b/doc/speeddial/CustomDoc.vue
index 8ff6a2616..80cd4b575 100644
--- a/doc/speeddial/CustomDoc.vue
+++ b/doc/speeddial/CustomDoc.vue
@@ -54,7 +54,8 @@ export default {
             code: {
                 basic: `
 <Toast />
-<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />`,
+<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -109,7 +110,8 @@ export default {
       }
   }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -165,7 +167,8 @@ const items = ref([
       }
   }
 ])
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/speeddial/LinearDoc.vue b/doc/speeddial/LinearDoc.vue
index f0270a94c..2f4e6f691 100644
--- a/doc/speeddial/LinearDoc.vue
+++ b/doc/speeddial/LinearDoc.vue
@@ -59,7 +59,8 @@ export default {
 <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
 <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
 <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />`,
+<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -117,7 +118,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -176,7 +178,8 @@ const items = ref([
         }
     }
 ])
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/speeddial/MaskDoc.vue b/doc/speeddial/MaskDoc.vue
index cc8a39007..73665dbe6 100644
--- a/doc/speeddial/MaskDoc.vue
+++ b/doc/speeddial/MaskDoc.vue
@@ -53,7 +53,8 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />`,
+<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -108,7 +109,8 @@ data() {
     }
 }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -164,7 +166,8 @@ const items = ref([
         }
     }
 ])
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/speeddial/QuarterCircleDoc.vue b/doc/speeddial/QuarterCircleDoc.vue
index f749a6f91..39456cdf8 100644
--- a/doc/speeddial/QuarterCircleDoc.vue
+++ b/doc/speeddial/QuarterCircleDoc.vue
@@ -59,7 +59,8 @@ export default {
 <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
 <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ left: 0, bottom: 0 }" />
 <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ right: 0, top: 0 }" />
-<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />`,
+<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ left: 0, top: 0 }" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -117,7 +118,8 @@ data() {
     }
 }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -176,7 +178,8 @@ const items = ref([
         }
     }
 ])
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/speeddial/SemiCircleDoc.vue b/doc/speeddial/SemiCircleDoc.vue
index c95e9fd47..bb2587bc1 100644
--- a/doc/speeddial/SemiCircleDoc.vue
+++ b/doc/speeddial/SemiCircleDoc.vue
@@ -59,7 +59,8 @@ export default {
 <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
 <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
 <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
-<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />`,
+<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -117,7 +118,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card" :style="{ position: 'relative', height: '500px' }">
@@ -174,7 +176,8 @@ const items = ref([
         }
     }
 ])
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/speeddial/TooltipDoc.vue b/doc/speeddial/TooltipDoc.vue
index 91617e726..59b0145c2 100644
--- a/doc/speeddial/TooltipDoc.vue
+++ b/doc/speeddial/TooltipDoc.vue
@@ -55,7 +55,8 @@ export default {
             code: {
                 basic: `
 <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-<SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />`,
+<SpeedDial :model="items" direction="up" class="left-0 bottom-0" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -111,7 +112,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -168,7 +170,8 @@ const items = ref([
         }
     }
 ])
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/speeddial/pt/PTDoc.vue b/doc/speeddial/pt/PTDoc.vue
index 89368149d..65c7643c8 100644
--- a/doc/speeddial/pt/PTDoc.vue
+++ b/doc/speeddial/pt/PTDoc.vue
@@ -66,7 +66,8 @@ export default {
             class: context.active ? 'bg-primary' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card">
@@ -127,7 +128,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -189,7 +191,8 @@ const items = ref([
         }
     }
 ])
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/speeddial/theming/TailwindDoc.vue b/doc/speeddial/theming/TailwindDoc.vue
index b90308b3c..2db766a21 100644
--- a/doc/speeddial/theming/TailwindDoc.vue
+++ b/doc/speeddial/theming/TailwindDoc.vue
@@ -17,7 +17,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     speeddial: {
         root: 'absolute flex',
         button: {
@@ -195,7 +196,8 @@ const items = ref([
         }
     }
 ])
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/splitbutton/AccessibilityDoc.vue b/doc/splitbutton/AccessibilityDoc.vue
index d77fa734c..3cc923994 100644
--- a/doc/splitbutton/AccessibilityDoc.vue
+++ b/doc/splitbutton/AccessibilityDoc.vue
@@ -140,7 +140,8 @@ export default {
         return {
             code: {
                 basic: `
-<SplitButton :buttonProps="{'aria-label': 'Default Action'}" :menuButtonProps="{'aria-label': 'More Options'}" />`
+<SplitButton :buttonProps="{'aria-label': 'Default Action'}" :menuButtonProps="{'aria-label': 'More Options'}" />
+`
             }
         };
     }
diff --git a/doc/splitbutton/BasicDoc.vue b/doc/splitbutton/BasicDoc.vue
index a93c80d03..a194231ba 100644
--- a/doc/splitbutton/BasicDoc.vue
+++ b/doc/splitbutton/BasicDoc.vue
@@ -38,7 +38,8 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />`,
+<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -83,7 +84,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -124,7 +126,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/splitbutton/DisabledDoc.vue b/doc/splitbutton/DisabledDoc.vue
index 5abeaddd5..c276d0386 100644
--- a/doc/splitbutton/DisabledDoc.vue
+++ b/doc/splitbutton/DisabledDoc.vue
@@ -38,7 +38,8 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />`,
+<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -82,7 +83,8 @@ export default {
             this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
         }
     }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -123,7 +125,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/splitbutton/OutlinedDoc.vue b/doc/splitbutton/OutlinedDoc.vue
index bd4b28baf..d612ec441 100644
--- a/doc/splitbutton/OutlinedDoc.vue
+++ b/doc/splitbutton/OutlinedDoc.vue
@@ -50,7 +50,8 @@ export default {
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -101,7 +102,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -148,7 +150,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/splitbutton/RaisedDoc.vue b/doc/splitbutton/RaisedDoc.vue
index 275cb58b2..d60838e2f 100644
--- a/doc/splitbutton/RaisedDoc.vue
+++ b/doc/splitbutton/RaisedDoc.vue
@@ -50,7 +50,8 @@ export default {
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -101,7 +102,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -148,7 +150,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/splitbutton/RaisedTextDoc.vue b/doc/splitbutton/RaisedTextDoc.vue
index 0f716a522..3dc73b675 100644
--- a/doc/splitbutton/RaisedTextDoc.vue
+++ b/doc/splitbutton/RaisedTextDoc.vue
@@ -50,7 +50,8 @@ export default {
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -101,7 +102,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -148,7 +150,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/splitbutton/RoundedDoc.vue b/doc/splitbutton/RoundedDoc.vue
index d27a84f2b..be526de4b 100644
--- a/doc/splitbutton/RoundedDoc.vue
+++ b/doc/splitbutton/RoundedDoc.vue
@@ -50,7 +50,8 @@ export default {
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -101,7 +102,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -148,7 +150,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/splitbutton/SeverityDoc.vue b/doc/splitbutton/SeverityDoc.vue
index 69ba1ab79..e0a1d26cd 100644
--- a/doc/splitbutton/SeverityDoc.vue
+++ b/doc/splitbutton/SeverityDoc.vue
@@ -50,7 +50,8 @@ export default {
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -101,7 +102,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -148,7 +150,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/splitbutton/SizesDoc.vue b/doc/splitbutton/SizesDoc.vue
index b576739df..01ef98b74 100644
--- a/doc/splitbutton/SizesDoc.vue
+++ b/doc/splitbutton/SizesDoc.vue
@@ -42,7 +42,8 @@ export default {
                 basic: `
 <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
+`,
                 options: `
 <template>
     <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
@@ -89,7 +90,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
@@ -131,7 +133,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/splitbutton/TemplateDoc.vue b/doc/splitbutton/TemplateDoc.vue
index d28f8e47c..9a0b54e81 100644
--- a/doc/splitbutton/TemplateDoc.vue
+++ b/doc/splitbutton/TemplateDoc.vue
@@ -48,7 +48,8 @@ export default {
         <img alt="logo" src="/images/logo.svg" style="width: 1rem" />
         <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
     </Button>
-</SplitButton>`,
+</SplitButton>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -98,7 +99,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -144,7 +146,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/splitbutton/TextDoc.vue b/doc/splitbutton/TextDoc.vue
index 79dca4714..80c0172f8 100644
--- a/doc/splitbutton/TextDoc.vue
+++ b/doc/splitbutton/TextDoc.vue
@@ -50,7 +50,8 @@ export default {
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -101,7 +102,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
@@ -148,7 +150,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/splitbutton/pt/PTDoc.vue b/doc/splitbutton/pt/PTDoc.vue
index db9ca20a5..bca26444f 100644
--- a/doc/splitbutton/pt/PTDoc.vue
+++ b/doc/splitbutton/pt/PTDoc.vue
@@ -53,7 +53,8 @@ export default {
             root: { class: 'surface-ground' }
         }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -108,7 +109,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -159,7 +161,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/splitbutton/theming/TailwindDoc.vue b/doc/splitbutton/theming/TailwindDoc.vue
index ce3aae654..484755123 100644
--- a/doc/splitbutton/theming/TailwindDoc.vue
+++ b/doc/splitbutton/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -203,7 +204,8 @@ const items = [
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/splitter/HorizontalDoc.vue b/doc/splitter/HorizontalDoc.vue
index b2da03886..5ced09d53 100644
--- a/doc/splitter/HorizontalDoc.vue
+++ b/doc/splitter/HorizontalDoc.vue
@@ -20,7 +20,8 @@ export default {
 <Splitter style="height: 300px" class="mb-5">
     <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
     <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
-</Splitter>`,
+</Splitter>
+`,
                 options: `
 <template>
     <div class="card">
@@ -32,7 +33,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -44,7 +46,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/splitter/NestedDoc.vue b/doc/splitter/NestedDoc.vue
index 3b2718292..796697c31 100644
--- a/doc/splitter/NestedDoc.vue
+++ b/doc/splitter/NestedDoc.vue
@@ -40,7 +40,8 @@ export default {
             </SplitterPanel>
         </Splitter>
     </SplitterPanel>
-</Splitter>`,
+</Splitter>
+`,
                 options: `
 <template>
     <div class="card">
@@ -62,7 +63,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -84,7 +86,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/splitter/SizeDoc.vue b/doc/splitter/SizeDoc.vue
index 8b2491c31..bc9857484 100644
--- a/doc/splitter/SizeDoc.vue
+++ b/doc/splitter/SizeDoc.vue
@@ -20,7 +20,8 @@ export default {
 <Splitter style="height: 300px">
     <SplitterPanel class="flex align-items-center justify-content-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
     <SplitterPanel class="flex align-items-center justify-content-center" :size="75"> Panel 2 </SplitterPanel>
-</Splitter>`,
+</Splitter>
+`,
                 options: `
 <template>
     <div class="card">
@@ -32,7 +33,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -44,7 +46,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/splitter/VerticalDoc.vue b/doc/splitter/VerticalDoc.vue
index 92b2b781a..f026f9658 100644
--- a/doc/splitter/VerticalDoc.vue
+++ b/doc/splitter/VerticalDoc.vue
@@ -20,7 +20,8 @@ export default {
 <Splitter style="height: 300px" layout="vertical">
     <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
     <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
-</Splitter>`,
+</Splitter>
+`,
                 options: `
 <template>
     <div class="card">
@@ -32,7 +33,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -44,7 +46,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/splitter/pt/PTDoc.vue b/doc/splitter/pt/PTDoc.vue
index 4ccd5f46b..0c084031f 100644
--- a/doc/splitter/pt/PTDoc.vue
+++ b/doc/splitter/pt/PTDoc.vue
@@ -22,7 +22,8 @@ export default {
     }">
     <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
     <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
-</Splitter>`,
+</Splitter>
+`,
                 options: `
 <template>
     <div class="card">
@@ -35,7 +36,8 @@ export default {
             <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
         </Splitter>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/splitter/theming/TailwindDoc.vue b/doc/splitter/theming/TailwindDoc.vue
index 96cf931d6..ee90fe7c9 100644
--- a/doc/splitter/theming/TailwindDoc.vue
+++ b/doc/splitter/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     splitter: {
         root: ({ context }) => ({
             class: [
@@ -61,7 +62,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/steps/BasicDoc.vue b/doc/steps/BasicDoc.vue
index 7646ba5a3..0e0eb1613 100644
--- a/doc/steps/BasicDoc.vue
+++ b/doc/steps/BasicDoc.vue
@@ -68,7 +68,8 @@ export default {
             <span v-bind="props.label">{{ label }}</span>
         </span>
     </template>
-</Steps>`,
+</Steps>
+`,
                 options: `
 <template>
     <div>        
@@ -126,7 +127,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div>
@@ -183,7 +185,8 @@ const items = ref([
 const isActive = (item) => {
     return item.route ? router.resolve(item.route).path === route.path : false;
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/steps/InteractiveDoc.vue b/doc/steps/InteractiveDoc.vue
index 1fb620d6b..fc8788cdc 100644
--- a/doc/steps/InteractiveDoc.vue
+++ b/doc/steps/InteractiveDoc.vue
@@ -82,7 +82,8 @@ export default {
     <keep-alive>
         <component :is="Component" />
     </keep-alive>
-</router-view>`,
+</router-view>
+`,
                 options: `
 <template>
     <div>
@@ -170,7 +171,8 @@ export default {
 ::v-deep(.p-card-body) {
     padding: 2rem;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div>
diff --git a/doc/steps/RouterDoc.vue b/doc/steps/RouterDoc.vue
index 5670b1fb0..bf7d6248e 100644
--- a/doc/steps/RouterDoc.vue
+++ b/doc/steps/RouterDoc.vue
@@ -79,7 +79,8 @@ export default {
             <span v-bind="props.label">{{ label }}</span>
         </a>
     </template>
-</Steps>`,
+</Steps>
+`,
                 options: `
 <template>
     <div>        
@@ -141,7 +142,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div>
@@ -202,7 +204,8 @@ const items = ref([
 const isActive = (item) => {
     return item.route ? router.resolve(item.route).path === route.path : false;
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/steps/pt/PTDoc.vue b/doc/steps/pt/PTDoc.vue
index ada9b9f59..7687e9b87 100644
--- a/doc/steps/pt/PTDoc.vue
+++ b/doc/steps/pt/PTDoc.vue
@@ -42,7 +42,8 @@ export default {
     :pt="{
         root: { class: 'w-30rem' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div>        
@@ -83,7 +84,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div>
@@ -120,7 +122,8 @@ const items = ref([
         to: "/confirmation",
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/steps/theming/TailwindDoc.vue b/doc/steps/theming/TailwindDoc.vue
index 3df4dc60a..fabc3109a 100644
--- a/doc/steps/theming/TailwindDoc.vue
+++ b/doc/steps/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     steps: {
         root: 'relative',
         menu: 'p-0 m-0 list-none flex',
@@ -70,7 +71,8 @@ const items = ref([
         to: "/confirmation",
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/styleclass/AnimationDoc.vue b/doc/styleclass/AnimationDoc.vue
index f6545ec4f..409b58542 100644
--- a/doc/styleclass/AnimationDoc.vue
+++ b/doc/styleclass/AnimationDoc.vue
@@ -27,7 +27,8 @@ export default {
 <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
 <div class="hidden animation-duration-500 box">
     <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center">
@@ -86,7 +87,8 @@ export default {
 .my-fadeout {
     animation: my-fadeout 150ms linear;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center">
diff --git a/doc/styleclass/ToggleClassDoc.vue b/doc/styleclass/ToggleClassDoc.vue
index e25685c95..b23db2116 100644
--- a/doc/styleclass/ToggleClassDoc.vue
+++ b/doc/styleclass/ToggleClassDoc.vue
@@ -16,7 +16,8 @@ export default {
             code: {
                 basic: `
 <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
-<InputText />`,
+<InputText />
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -26,7 +27,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -36,7 +38,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tabmenu/BasicDoc.vue b/doc/tabmenu/BasicDoc.vue
index e6b727f06..8148b975a 100644
--- a/doc/tabmenu/BasicDoc.vue
+++ b/doc/tabmenu/BasicDoc.vue
@@ -42,7 +42,8 @@ export default {
         </router-link>
     </template>
 </TabMenu>
-<router-view />`,
+<router-view />
+`,
                 options: `
 <template>
     <div class="card">
@@ -103,7 +104,8 @@ export default {
         this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -168,7 +170,8 @@ watch(
     },
     { immediate: true }
 );
-<\/script>`,
+<\/script>
+`,
                 pages: [
                     {
                         tabName: 'HomeDemo',
@@ -247,7 +250,8 @@ export default {
 export default {
 
 }
-<\/script>`
+<\/script>
+`
                     }
                 ]
             }
diff --git a/doc/tabmenu/ControlledDoc.vue b/doc/tabmenu/ControlledDoc.vue
index e182f0f3c..c18d14460 100644
--- a/doc/tabmenu/ControlledDoc.vue
+++ b/doc/tabmenu/ControlledDoc.vue
@@ -39,7 +39,8 @@ export default {
             code: {
                 basic: `
 <Button @click="active = 0" text outlined label="Activate 1st" />
-<TabMenu v-model:activeIndex="active" :model="items" />`,
+<TabMenu v-model:activeIndex="active" :model="items" />
+`,
                 options: `
 <template>
     <div class="card">
@@ -78,7 +79,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -113,7 +115,8 @@ const items = ref([
         icon: 'pi pi-fw pi-cog'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tabmenu/RouterDoc.vue b/doc/tabmenu/RouterDoc.vue
index 0168d221b..e80b53550 100644
--- a/doc/tabmenu/RouterDoc.vue
+++ b/doc/tabmenu/RouterDoc.vue
@@ -54,7 +54,8 @@ export default {
         </a>
     </template>
 </TabMenu>
-<router-view />`,
+<router-view />
+`,
                 options: `
 <template>
     <div class="card">
@@ -124,7 +125,8 @@ export default {
         this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -199,7 +201,8 @@ watch(
     { immediate: true }
 );
 
-<\/script>`,
+<\/script>
+`,
                 pages: [
                     {
                         tabName: 'HomeDemo',
@@ -278,7 +281,8 @@ export default {
 export default {
 
 }
-<\/script>`
+<\/script>
+`
                     }
                 ]
             }
diff --git a/doc/tabmenu/pt/PTDoc.vue b/doc/tabmenu/pt/PTDoc.vue
index d5b5a5b67..e867b9999 100644
--- a/doc/tabmenu/pt/PTDoc.vue
+++ b/doc/tabmenu/pt/PTDoc.vue
@@ -48,7 +48,8 @@ export default {
             class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card">
@@ -92,7 +93,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -132,7 +134,8 @@ const items = ref([
         icon: 'pi pi-fw pi-cog'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tabmenu/theming/TailwindDoc.vue b/doc/tabmenu/theming/TailwindDoc.vue
index 3314b471e..2e19efe2e 100644
--- a/doc/tabmenu/theming/TailwindDoc.vue
+++ b/doc/tabmenu/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     tabmenu: {
         root: 'overflow-x-auto',
         menu: {
@@ -79,7 +80,8 @@ const items = ref([
     }
 ]);
 
-<\/script>`,
+<\/script>
+`,
                 pages: [
                     {
                         tabName: 'HomeDemo',
@@ -158,7 +160,8 @@ export default {
 export default {
 
 }
-<\/script>`
+<\/script>
+`
                     }
                 ]
             }
diff --git a/doc/tabview/BasicDoc.vue b/doc/tabview/BasicDoc.vue
index b8b9b2a13..7a23a8a52 100644
--- a/doc/tabview/BasicDoc.vue
+++ b/doc/tabview/BasicDoc.vue
@@ -53,7 +53,8 @@ export default {
         </p>
     </TabPanel>
 </TabView>
-                `,
+                
+`,
                 options: `
 <template>
     <div class="card">
@@ -82,7 +83,8 @@ export default {
 
 <script>
 <\/script>
-    `,
+    
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/tabview/ControlledDoc.vue b/doc/tabview/ControlledDoc.vue
index 6117428b9..145f019d6 100644
--- a/doc/tabview/ControlledDoc.vue
+++ b/doc/tabview/ControlledDoc.vue
@@ -65,7 +65,8 @@ export default {
             officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </TabPanel>
-</TabView>`,
+</TabView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -106,7 +107,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -143,7 +145,8 @@ export default {
 import { ref } from 'vue';
 
 const active = ref(0);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tabview/DisabledDoc.vue b/doc/tabview/DisabledDoc.vue
index 642f195ec..b9213b2ef 100644
--- a/doc/tabview/DisabledDoc.vue
+++ b/doc/tabview/DisabledDoc.vue
@@ -55,7 +55,8 @@ export default {
         </p>
     </TabPanel>
     <TabPanel header="Header IV" :disabled="true"></TabPanel>
-</TabView>`,
+</TabView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -84,7 +85,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -113,7 +115,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tabview/DynamicDoc.vue b/doc/tabview/DynamicDoc.vue
index 508dde470..be8d94b6d 100644
--- a/doc/tabview/DynamicDoc.vue
+++ b/doc/tabview/DynamicDoc.vue
@@ -27,7 +27,8 @@ export default {
     <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </TabPanel>
-</TabView>`,
+</TabView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -51,7 +52,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ const tabs = ref([
     { title: 'Tab 2', content: 'Tab 2 Content' },
     { title: 'Tab 3', content: 'Tab 3 Content' }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tabview/ScrollableDoc.vue b/doc/tabview/ScrollableDoc.vue
index 1734f2e64..d55c536d9 100644
--- a/doc/tabview/ScrollableDoc.vue
+++ b/doc/tabview/ScrollableDoc.vue
@@ -23,7 +23,8 @@ export default {
     <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </TabPanel>
-</TabView>`,
+</TabView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -43,7 +44,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -59,7 +61,8 @@ export default {
 import { ref } from 'vue';
 
 const scrollableTabs = ref(Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` })));
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tabview/TemplateDoc.vue b/doc/tabview/TemplateDoc.vue
index ac174aaa1..70e9624d3 100644
--- a/doc/tabview/TemplateDoc.vue
+++ b/doc/tabview/TemplateDoc.vue
@@ -78,7 +78,8 @@ export default {
             officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
         </p>
     </TabPanel>
-</TabView>`,
+</TabView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -119,7 +120,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -160,7 +162,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tabview/pt/PTDoc.vue b/doc/tabview/pt/PTDoc.vue
index 118f50b61..85d9aa96a 100644
--- a/doc/tabview/pt/PTDoc.vue
+++ b/doc/tabview/pt/PTDoc.vue
@@ -38,7 +38,8 @@ export default {
         }">
         <p>{{ tab.content }}</p>
     </TabPanel>
-</TabView>`,
+</TabView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -75,7 +76,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -107,7 +109,8 @@ const panelClass = (props, parent, index) => {
         }
     ];
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/tabview/theming/TailwindDoc.vue b/doc/tabview/theming/TailwindDoc.vue
index e8efe1702..f209cb6c2 100644
--- a/doc/tabview/theming/TailwindDoc.vue
+++ b/doc/tabview/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     tabview: {
         navContainer: ({ props }) => ({
             class: [
@@ -91,7 +92,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tag/BasicDoc.vue b/doc/tag/BasicDoc.vue
index cd9a6ba87..e66d678f5 100644
--- a/doc/tag/BasicDoc.vue
+++ b/doc/tag/BasicDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<Tag value="New"></Tag>`,
+<Tag value="New"></Tag>
+`,
                 options: `
 <template>
     <div class="flex justify-content-center">
@@ -24,7 +25,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="flex justify-content-center">
@@ -34,7 +36,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tag/IconDoc.vue b/doc/tag/IconDoc.vue
index 59fda5a9d..5266dff9e 100644
--- a/doc/tag/IconDoc.vue
+++ b/doc/tag/IconDoc.vue
@@ -22,7 +22,8 @@ export default {
 <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
 <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
 <Tag icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
-<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>`,
+<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -36,7 +37,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -50,7 +52,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tag/PillDoc.vue b/doc/tag/PillDoc.vue
index 8de58a274..794ee68f5 100644
--- a/doc/tag/PillDoc.vue
+++ b/doc/tag/PillDoc.vue
@@ -22,7 +22,8 @@ export default {
 <Tag severity="success" value="Success" rounded></Tag>
 <Tag severity="info" value="Info" rounded></Tag>
 <Tag severity="warning" value="Warning" rounded></Tag>
-<Tag severity="danger" value="Danger" rounded></Tag>`,
+<Tag severity="danger" value="Danger" rounded></Tag>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -36,7 +37,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -50,7 +52,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tag/SeverityDoc.vue b/doc/tag/SeverityDoc.vue
index 378b1fb26..9043a22a4 100644
--- a/doc/tag/SeverityDoc.vue
+++ b/doc/tag/SeverityDoc.vue
@@ -22,7 +22,8 @@ export default {
 <Tag severity="success" value="Success"></Tag>
 <Tag severity="info" value="Info"></Tag>
 <Tag severity="warning" value="Warning"></Tag>
-<Tag severity="danger" value="Danger"></Tag>`,
+<Tag severity="danger" value="Danger"></Tag>
+`,
                 options: `
 <template>
     <div class="flex flex-wrap justify-content-center gap-2">
@@ -36,7 +37,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="flex flex-wrap justify-content-center gap-2">
diff --git a/doc/tag/TemplateDoc.vue b/doc/tag/TemplateDoc.vue
index d20517bd7..c07be97e4 100644
--- a/doc/tag/TemplateDoc.vue
+++ b/doc/tag/TemplateDoc.vue
@@ -26,7 +26,8 @@ export default {
         <span class="text-base">Italia</span>
         <i class="pi pi-times text-xs"></i>
     </div>
-</Tag>`,
+</Tag>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -42,7 +43,8 @@ export default {
 
 <script>
 
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +60,8 @@ export default {
 
 <script setup>
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tag/pt/PTDoc.vue b/doc/tag/pt/PTDoc.vue
index 2dc739d50..1cb10c9c5 100644
--- a/doc/tag/pt/PTDoc.vue
+++ b/doc/tag/pt/PTDoc.vue
@@ -16,7 +16,8 @@ export default {
     :pt="{
         root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -26,7 +27,8 @@ export default {
             }"
         />
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/tag/theming/TailwindDoc.vue b/doc/tag/theming/TailwindDoc.vue
index 5120b15d2..0cefd9792 100644
--- a/doc/tag/theming/TailwindDoc.vue
+++ b/doc/tag/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     tag: {
         root: ({ props }) => ({
             class: [
diff --git a/doc/tailwind/CSSLayerDoc.vue b/doc/tailwind/CSSLayerDoc.vue
index 1417e1548..a8114845a 100644
--- a/doc/tailwind/CSSLayerDoc.vue
+++ b/doc/tailwind/CSSLayerDoc.vue
@@ -13,7 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `@layer tailwind-base, primevue, tailwind-utilities;
+                basic: `
+@layer tailwind-base, primevue, tailwind-utilities;
 
 @layer tailwind-base {
   @tailwind base;
@@ -22,7 +23,8 @@ export default {
 @layer tailwind-utilities {
   @tailwind components;
   @tailwind utilities;
-}`
+}
+`
             }
         };
     }
diff --git a/doc/terminal/BasicDoc.vue b/doc/terminal/BasicDoc.vue
index 58584a5f9..82e789129 100644
--- a/doc/terminal/BasicDoc.vue
+++ b/doc/terminal/BasicDoc.vue
@@ -20,7 +20,8 @@ export default {
         return {
             code: {
                 basic: `
-<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />`,
+<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />
+`,
                 options: `
 <template>
     <div>
@@ -87,7 +88,8 @@ p {
 ::v-deep(.dark-demo-terminal .p-terminal-response) {
     color: #9fa8da;
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div>
diff --git a/doc/terminal/pt/PTDoc.vue b/doc/terminal/pt/PTDoc.vue
index 075f3b3fe..0214e0956 100644
--- a/doc/terminal/pt/PTDoc.vue
+++ b/doc/terminal/pt/PTDoc.vue
@@ -33,7 +33,8 @@ export default {
         prompt: { class: 'text-yellow-500' },
         response: { class: 'text-purple-500' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div>
@@ -88,7 +89,8 @@ export default {
         TerminalService.off('command', this.commandHandler);
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div>
@@ -142,7 +144,8 @@ const commandHandler = (text) => {
     
     TerminalService.emit('response', response);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/terminal/theming/TailwindDoc.vue b/doc/terminal/theming/TailwindDoc.vue
index d1388252d..a678154b6 100644
--- a/doc/terminal/theming/TailwindDoc.vue
+++ b/doc/terminal/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     terminal: {
         root: {
             class: ['border border-gray-300 p-5', 'bg-gray-900 text-white dark:border-blue-900/40 ', 'h-72 overflow-auto']
@@ -72,7 +73,8 @@ const commandHandler = (text) => {
     
     TerminalService.emit('response', response);
 }
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/textarea/AccessibilityDoc.vue b/doc/textarea/AccessibilityDoc.vue
index ad9f05280..92d34c324 100644
--- a/doc/textarea/AccessibilityDoc.vue
+++ b/doc/textarea/AccessibilityDoc.vue
@@ -40,7 +40,8 @@ export default {
 <span id="address2">Address 2</span>
 <Textarea aria-labelledby="address2" />
 
-<Textarea aria-label="Address Details"/>`
+<Textarea aria-label="Address Details"/>
+`
             }
         };
     }
diff --git a/doc/textarea/AutoResizeDoc.vue b/doc/textarea/AutoResizeDoc.vue
index f03850db8..f4c2065cf 100644
--- a/doc/textarea/AutoResizeDoc.vue
+++ b/doc/textarea/AutoResizeDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: '',
             code: {
                 basic: `
-<Textarea v-model="value" autoResize rows="5" cols="30" />`,
+<Textarea v-model="value" autoResize rows="5" cols="30" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/textarea/BasicDoc.vue b/doc/textarea/BasicDoc.vue
index eb9b65e58..b7264226a 100644
--- a/doc/textarea/BasicDoc.vue
+++ b/doc/textarea/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: '',
             code: {
                 basic: `
-<Textarea v-model="value" rows="5" cols="30" />`,
+<Textarea v-model="value" rows="5" cols="30" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/textarea/DisabledDoc.vue b/doc/textarea/DisabledDoc.vue
index dd51f217c..94303d4bf 100644
--- a/doc/textarea/DisabledDoc.vue
+++ b/doc/textarea/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: 'Disabled',
             code: {
                 basic: `
-<Textarea v-model="value" rows="5" cols="30" disabled />`,
+<Textarea v-model="value" rows="5" cols="30" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref('Disabled');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/textarea/FloatLabelDoc.vue b/doc/textarea/FloatLabelDoc.vue
index 8836f35ae..e6182dca0 100644
--- a/doc/textarea/FloatLabelDoc.vue
+++ b/doc/textarea/FloatLabelDoc.vue
@@ -21,7 +21,8 @@ export default {
 <span class="p-float-label">
     <Textarea v-model="value" rows="5" cols="30" />
     <label>Username</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -40,7 +41,8 @@ export default {
       }
   }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +57,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/textarea/InvalidDoc.vue b/doc/textarea/InvalidDoc.vue
index f8295fcce..7db4a6acb 100644
--- a/doc/textarea/InvalidDoc.vue
+++ b/doc/textarea/InvalidDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: '',
             code: {
                 basic: `
-<Textarea v-model="value" rows="5" cols="30" />`,
+<Textarea v-model="value" rows="5" cols="30" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/textarea/form/VeeValidateDoc.vue b/doc/textarea/form/VeeValidateDoc.vue
index 4b23d2420..aaee090d6 100644
--- a/doc/textarea/form/VeeValidateDoc.vue
+++ b/doc/textarea/form/VeeValidateDoc.vue
@@ -55,7 +55,8 @@ export default {
         <Button type="submit" label="Submit" />
     </form>
     <Toast />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -98,7 +99,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -136,7 +138,8 @@ const onSubmit = handleSubmit((values) => {
         resetForm();
     }
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/textarea/pt/PTDoc.vue b/doc/textarea/pt/PTDoc.vue
index 7e19c6980..df3637747 100644
--- a/doc/textarea/pt/PTDoc.vue
+++ b/doc/textarea/pt/PTDoc.vue
@@ -29,7 +29,8 @@ export default {
             cols: 30
         }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -53,7 +54,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -73,7 +75,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/textarea/theming/TailwindDoc.vue b/doc/textarea/theming/TailwindDoc.vue
index bb4b9d52a..19395666d 100644
--- a/doc/textarea/theming/TailwindDoc.vue
+++ b/doc/textarea/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     textarea: {
         root: ({ context }) => ({
             class: [
@@ -41,7 +42,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref('');
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/theming/BuiltInThemesDoc.vue b/doc/theming/BuiltInThemesDoc.vue
index 8a34697dd..56b5db9f3 100644
--- a/doc/theming/BuiltInThemesDoc.vue
+++ b/doc/theming/BuiltInThemesDoc.vue
@@ -13,7 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `primevue/resources/themes/bootstrap4-light-blue/theme.css
+                basic: `
+primevue/resources/themes/bootstrap4-light-blue/theme.css
 primevue/resources/themes/bootstrap4-light-purple/theme.css
 primevue/resources/themes/bootstrap4-dark-blue/theme.css
 primevue/resources/themes/bootstrap4-dark-purple/theme.css
@@ -51,7 +52,8 @@ primevue/resources/themes/vela-purple/theme.css
 primevue/resources/themes/arya-blue/theme.css
 primevue/resources/themes/arya-green/theme.css
 primevue/resources/themes/arya-orange/theme.css
-primevue/resources/themes/arya-purple/theme.css`
+primevue/resources/themes/arya-purple/theme.css
+`
             }
         };
     }
diff --git a/doc/theming/CSSModulesDoc.vue b/doc/theming/CSSModulesDoc.vue
index d305e7a5b..ffba8a6e1 100644
--- a/doc/theming/CSSModulesDoc.vue
+++ b/doc/theming/CSSModulesDoc.vue
@@ -4,16 +4,16 @@
             <a href="https://github.com/css-modules/css-modules">CSS modules</a> are supported by enabling the <i>module</i> property on a style element within your component and using the <i>$style</i> keyword to apply classes to a PrimeVue
             component.
         </p>
+        <div class="card flex justify-content-center">
+            <InputText :class="$style.myinput" placeholder="Search" />
+        </div>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <p>An in-depth video tutorial is available to cover advanced uses cases with Pass Through props.</p>
+        <div class="video-container">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/n5zvMo7ykgw?si=lw1dGEHclmhIfZTr" frameborder="0" allowfullscreen></iframe>
+        </div>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <InputText :class="$style.myinput" placeholder="Search" />
-    </div>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-    <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
-    <p>An in-depth video tutorial is available to cover advanced uses cases with Pass Through props.</p>
-    <div class="video-container">
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/n5zvMo7ykgw?si=lw1dGEHclmhIfZTr" frameborder="0" allowfullscreen></iframe>
-    </div>
 </template>
 
 <script>
@@ -31,11 +31,12 @@ export default {
 </style>
 `
             },
-
             code2: {
-                basic: `<template>
+                basic: `
+<template>
     <InputText :class="$style.myinput" placeholder="Search" />
-</template>`
+</template>
+`
             }
         };
     }
diff --git a/doc/theming/PrimeFlexDoc.vue b/doc/theming/PrimeFlexDoc.vue
index ea7acf932..c10b9aba8 100644
--- a/doc/theming/PrimeFlexDoc.vue
+++ b/doc/theming/PrimeFlexDoc.vue
@@ -26,7 +26,8 @@ export default {
     <Button type="button" label="Button 1"></Button>
     <Button type="button" label="Button 2" severity="secondary"></Button>
     <Button type="button" label="Button 3" severity="help"></Button>
-</div>`
+</div>
+`
             }
         };
     }
diff --git a/doc/theming/ScopedCSSDoc.vue b/doc/theming/ScopedCSSDoc.vue
index 91477b2e5..5cb2421cc 100644
--- a/doc/theming/ScopedCSSDoc.vue
+++ b/doc/theming/ScopedCSSDoc.vue
@@ -31,9 +31,8 @@ export default {
     border-color: var(--teal-500);
 }
 </style>
-        `
+`
             },
-
             code2: {
                 basic: `
 <template>
@@ -43,7 +42,8 @@ export default {
             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
             cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     </Panel>
-</template>`
+</template>
+`
             }
         };
     }
diff --git a/doc/theming/SwitchThemesDoc.vue b/doc/theming/SwitchThemesDoc.vue
index 7f4f104a2..5c67164e8 100644
--- a/doc/theming/SwitchThemesDoc.vue
+++ b/doc/theming/SwitchThemesDoc.vue
@@ -28,13 +28,13 @@ export default {
             code1: {
                 basic: `
 primevue.changeTheme(currentTheme: string, newTheme: string, linkElementId: string, callback: Function)
-        `
+`
             },
             code2: {
                 basic: `
 // Options API
 this.$primevue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {});
-        `
+`
             },
             code3: {
                 basic: `
@@ -43,18 +43,17 @@ import { usePrimeVue } from 'primevue/config';
 
 const PrimeVue = usePrimeVue();
 PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {});
-        `
+`
             },
             code4: {
-                basic: `<link id="theme-link" rel="stylesheet" href="/themes/lara-light-teal/theme.css">`
+                basic: `
+<link id="theme-link" rel="stylesheet" href="/themes/lara-light-teal/theme.css">
+`
             },
             code5: {
                 basic: `
-const baseUrl = '/';
-
 export default defineNuxtConfig({
     app: {
-        baseURL: baseUrl,
         head: {
             link: [
                 {
@@ -62,8 +61,11 @@ export default defineNuxtConfig({
                     rel: 'stylesheet',
                     href: baseUrl + 'themes/lara-light-teal/theme.css'
                 }
-            ],
-                `
+            ]
+        }
+    }
+});
+`
             }
         };
     }
diff --git a/doc/tieredmenu/BasicDoc.vue b/doc/tieredmenu/BasicDoc.vue
index 8c268968b..4a04e95b4 100644
--- a/doc/tieredmenu/BasicDoc.vue
+++ b/doc/tieredmenu/BasicDoc.vue
@@ -140,7 +140,8 @@ export default {
             ],
             code: {
                 basic: `
-<TieredMenu :model="items" />`,
+<TieredMenu :model="items" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -281,7 +282,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -418,7 +420,8 @@ const items = ref([
         icon: 'pi pi-fw pi-power-off'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tieredmenu/PopupDoc.vue b/doc/tieredmenu/PopupDoc.vue
index 09ac06b34..c2739bfac 100644
--- a/doc/tieredmenu/PopupDoc.vue
+++ b/doc/tieredmenu/PopupDoc.vue
@@ -142,7 +142,8 @@ export default {
             code: {
                 basic: `
 <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
-<TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />`,
+<TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -289,7 +290,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -432,7 +434,8 @@ const items = ref([
 const toggle = (event) => {
     menu.value.toggle(event);
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/tieredmenu/RouterDoc.vue b/doc/tieredmenu/RouterDoc.vue
index 26f955dd4..f2f1c7bbd 100644
--- a/doc/tieredmenu/RouterDoc.vue
+++ b/doc/tieredmenu/RouterDoc.vue
@@ -162,7 +162,8 @@ export default {
             ],
             code: {
                 basic: `
-<TieredMenu :model="items" />`,
+<TieredMenu :model="items" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -308,7 +309,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -450,7 +452,8 @@ const items = ref([
         icon: 'pi pi-fw pi-power-off'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tieredmenu/pt/PTDoc.vue b/doc/tieredmenu/pt/PTDoc.vue
index 45cf18d0d..b996e8c37 100644
--- a/doc/tieredmenu/pt/PTDoc.vue
+++ b/doc/tieredmenu/pt/PTDoc.vue
@@ -152,7 +152,8 @@ export default {
             class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -300,7 +301,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -444,7 +446,8 @@ const items = ref([
         icon: 'pi pi-fw pi-power-off'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tieredmenu/theming/TailwindDoc.vue b/doc/tieredmenu/theming/TailwindDoc.vue
index 6c71cc8b9..c1cc1dadc 100644
--- a/doc/tieredmenu/theming/TailwindDoc.vue
+++ b/doc/tieredmenu/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -203,7 +204,8 @@ const items = ref([
         icon: 'pi pi-fw pi-power-off'
     }
 ]);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/timeline/AlignmentDoc.vue b/doc/timeline/AlignmentDoc.vue
index e08df8ba4..583910720 100644
--- a/doc/timeline/AlignmentDoc.vue
+++ b/doc/timeline/AlignmentDoc.vue
@@ -52,7 +52,8 @@ export default {
     <template #content="slotProps">
         {{ slotProps.item.status }}
     </template>
-</Timeline>`,
+</Timeline>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap gap-6">
@@ -89,7 +90,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap gap-6">
@@ -123,7 +125,8 @@ const events = ref([
     { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
 ]);
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/timeline/BasicDoc.vue b/doc/timeline/BasicDoc.vue
index 72950c920..5b470d764 100644
--- a/doc/timeline/BasicDoc.vue
+++ b/doc/timeline/BasicDoc.vue
@@ -28,7 +28,8 @@ export default {
     <template #content="slotProps">
         {{ slotProps.item.status }}
     </template>
-</Timeline>`,
+</Timeline>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -75,7 +77,8 @@ const events = ref([
     { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
 ]);
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/timeline/HorizontalDoc.vue b/doc/timeline/HorizontalDoc.vue
index 4e77afb35..7520dc27c 100644
--- a/doc/timeline/HorizontalDoc.vue
+++ b/doc/timeline/HorizontalDoc.vue
@@ -49,7 +49,8 @@ export default {
     <template #content="slotProps">
         {{ slotProps.item }}
     </template>
-</Timeline>`,
+</Timeline>
+`,
                 options: `
 <template>
     <div class="card flex flex-column gap-3">
@@ -82,7 +83,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column gap-3">
@@ -111,7 +113,8 @@ export default {
 import { ref } from "vue";
 
 const events = ref(['2020', '2021', '2022', '2023']);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/timeline/OppositeDoc.vue b/doc/timeline/OppositeDoc.vue
index 5f199d950..e7bfbe50c 100644
--- a/doc/timeline/OppositeDoc.vue
+++ b/doc/timeline/OppositeDoc.vue
@@ -34,7 +34,8 @@ export default {
     <template #content="slotProps">
         {{slotProps.item.status}}
     </template>
-</Timeline>`,
+</Timeline>
+`,
                 options: `
 <template>
     <div class="card">
@@ -62,7 +63,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -87,7 +89,8 @@ const events = ref([
     { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
 ]);
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/timeline/TemplateDoc.vue b/doc/timeline/TemplateDoc.vue
index 8c1dc7488..5580e0f86 100644
--- a/doc/timeline/TemplateDoc.vue
+++ b/doc/timeline/TemplateDoc.vue
@@ -68,7 +68,8 @@ export default {
             </template>
         </Card>
     </template>
-</Timeline>`,
+</Timeline>
+`,
                 options: `
 <template>
     <div class="card">
@@ -135,7 +136,8 @@ export default {
         }
     }
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/timeline/pt/PTDoc.vue b/doc/timeline/pt/PTDoc.vue
index ce52d4123..74567dba9 100644
--- a/doc/timeline/pt/PTDoc.vue
+++ b/doc/timeline/pt/PTDoc.vue
@@ -36,7 +36,8 @@ export default {
     <template #content="slotProps">
         {{ slotProps.item.status }}
     </template>
-</Timeline>`,
+</Timeline>
+`,
                 options: `
 <template>
     <div class="card">
@@ -66,7 +67,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -93,7 +95,8 @@ const events = ref([
     { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
 ]);
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/timeline/theming/TailwindDoc.vue b/doc/timeline/theming/TailwindDoc.vue
index 51bd0f368..90e411192 100644
--- a/doc/timeline/theming/TailwindDoc.vue
+++ b/doc/timeline/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     timeline: {
         root: ({ props }) => ({
             class: [
@@ -129,7 +130,8 @@ const events = ref([
     { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
 ]);
 
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/toast/AccessibilityDoc.vue b/doc/toast/AccessibilityDoc.vue
index 8f0ccab7b..23ea26a44 100644
--- a/doc/toast/AccessibilityDoc.vue
+++ b/doc/toast/AccessibilityDoc.vue
@@ -66,7 +66,8 @@ const openDialog = () => {
         }
     });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/toast/BasicDoc.vue b/doc/toast/BasicDoc.vue
index 1d605388c..a3b7aac19 100644
--- a/doc/toast/BasicDoc.vue
+++ b/doc/toast/BasicDoc.vue
@@ -18,7 +18,8 @@ export default {
             code: {
                 basic: `
 <Toast />
-<Button label="Show" @click="show()" />`,
+<Button label="Show" @click="show()" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -35,7 +36,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -51,7 +53,8 @@ const toast = useToast();
 const show = () => {
     toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/toast/MultipleDoc.vue b/doc/toast/MultipleDoc.vue
index b197ecf28..1e5e786d6 100644
--- a/doc/toast/MultipleDoc.vue
+++ b/doc/toast/MultipleDoc.vue
@@ -16,6 +16,7 @@ export default {
                 basic: `
 <Toast />
 <Button label="Multiple" severity="warning" @click="showMultiple()" />
+
 `,
                 options: `
 <template>
@@ -36,7 +37,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +57,8 @@ const showMultiple = () => {
     toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
     toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/toast/PositionDoc.vue b/doc/toast/PositionDoc.vue
index 15b8cedc4..33623e8c1 100644
--- a/doc/toast/PositionDoc.vue
+++ b/doc/toast/PositionDoc.vue
@@ -26,7 +26,8 @@ export default {
     <Button label="Top Left" class="mr-2" @click="showTopLeft" />
     <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
     <Button label="Bottom Right" severity="success" @click="showBottomRight" />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -56,7 +57,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -87,7 +89,8 @@ const showBottomLeft = () => {
 const showBottomRight = () => {
     toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', group: 'br', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/toast/SeverityDoc.vue b/doc/toast/SeverityDoc.vue
index 327443c65..668ff1dec 100644
--- a/doc/toast/SeverityDoc.vue
+++ b/doc/toast/SeverityDoc.vue
@@ -25,7 +25,8 @@ export default {
     <Button label="Info" severity="info" @click="showInfo" />
     <Button label="Warn" severity="warning" @click="showWarn" />
     <Button label="Error" severity="danger" @click="showError" />
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -56,7 +57,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -89,7 +91,8 @@ const showWarn = () => {
 const showError = () => {
     toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/toast/StickyDoc.vue b/doc/toast/StickyDoc.vue
index 27995c95a..46b36582e 100644
--- a/doc/toast/StickyDoc.vue
+++ b/doc/toast/StickyDoc.vue
@@ -19,7 +19,8 @@ export default {
                 basic: `
 <Toast />
 <Button @click="showSticky" label="Sticky" />
-<Button label="Clear" @click="clear()" />`,
+<Button label="Clear" @click="clear()" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -42,7 +43,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -65,7 +67,8 @@ const showSticky = () => {
 const clear = () => {
     toast.removeAllGroups();
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/toast/TemplateDoc.vue b/doc/toast/TemplateDoc.vue
index 51473b714..816b700c4 100644
--- a/doc/toast/TemplateDoc.vue
+++ b/doc/toast/TemplateDoc.vue
@@ -43,7 +43,8 @@ export default {
         </div>
     </template>
 </Toast>
-<Button @click="showTemplate" label="Confirm" />`,
+<Button @click="showTemplate" label="Confirm" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -92,7 +93,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -140,7 +142,8 @@ const onReject = () => {
 const onClose = () => {
     visible.value = false;
 }
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/toast/pt/PTDoc.vue b/doc/toast/pt/PTDoc.vue
index 89a043eec..8408c7397 100644
--- a/doc/toast/pt/PTDoc.vue
+++ b/doc/toast/pt/PTDoc.vue
@@ -24,7 +24,8 @@ export default {
         container: { class: 'bg-yellow-100' }
     }"
 />
-<Button label="Show" @click="show()" />`,
+<Button label="Show" @click="show()" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -46,7 +47,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -67,7 +69,8 @@ const toast = useToast();
 const show = () => {
     toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', group: 'pt', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/toast/theming/TailwindDoc.vue b/doc/toast/theming/TailwindDoc.vue
index 61e4cf80f..055e36670 100644
--- a/doc/toast/theming/TailwindDoc.vue
+++ b/doc/toast/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     toast: {
         root: {
             class: ['w-96', 'opacity-90']
@@ -85,7 +86,8 @@ const showWarn = () => {
 const showError = () => {
     toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/togglebutton/AccessibilityDoc.vue b/doc/togglebutton/AccessibilityDoc.vue
index 5b60891f2..87e645b4e 100644
--- a/doc/togglebutton/AccessibilityDoc.vue
+++ b/doc/togglebutton/AccessibilityDoc.vue
@@ -43,7 +43,8 @@ export default {
 <span id="rememberme">Remember Me</span>
 <ToggleButton aria-labelledby="rememberme" />
 
-<ToggleButton aria-label="Remember Me" />`
+<ToggleButton aria-label="Remember Me" />
+`
             }
         };
     }
diff --git a/doc/togglebutton/BasicDoc.vue b/doc/togglebutton/BasicDoc.vue
index b1950e185..b2ddbfa31 100644
--- a/doc/togglebutton/BasicDoc.vue
+++ b/doc/togglebutton/BasicDoc.vue
@@ -15,7 +15,8 @@ export default {
             checked: false,
             code: {
                 basic: `
-<ToggleButton v-model="checked" />`,
+<ToggleButton v-model="checked" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/togglebutton/CustomizedDoc.vue b/doc/togglebutton/CustomizedDoc.vue
index e3e866c90..062252b0c 100644
--- a/doc/togglebutton/CustomizedDoc.vue
+++ b/doc/togglebutton/CustomizedDoc.vue
@@ -16,7 +16,8 @@ export default {
             code: {
                 basic: `
 <ToggleButton v-model="checked1" onLabel="I confirm" offLabel="I reject"
-    onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />`,
+    onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -33,7 +34,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -46,7 +48,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/togglebutton/DisabledDoc.vue b/doc/togglebutton/DisabledDoc.vue
index 2bd9929a0..f65d8675b 100644
--- a/doc/togglebutton/DisabledDoc.vue
+++ b/doc/togglebutton/DisabledDoc.vue
@@ -16,7 +16,8 @@ export default {
             code: {
                 basic: `
 <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
-    class="w-full sm:w-10rem" aria-label="Confirmation" />`,
+    class="w-full sm:w-10rem" aria-label="Confirmation" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -33,7 +34,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -46,7 +48,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/togglebutton/InvalidDoc.vue b/doc/togglebutton/InvalidDoc.vue
index a794086e5..861df79b3 100644
--- a/doc/togglebutton/InvalidDoc.vue
+++ b/doc/togglebutton/InvalidDoc.vue
@@ -15,7 +15,8 @@ export default {
             checked: true,
             code: {
                 basic: `
-<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />`,
+<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/togglebutton/form/VeeValidateDoc.vue b/doc/togglebutton/form/VeeValidateDoc.vue
index 864d0873f..95a7e98c6 100644
--- a/doc/togglebutton/form/VeeValidateDoc.vue
+++ b/doc/togglebutton/form/VeeValidateDoc.vue
@@ -49,7 +49,8 @@ export default {
         <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -90,7 +91,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     },
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -125,7 +127,8 @@ const onSubmit = handleSubmit((values) => {
         resetForm();
     }
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/togglebutton/pt/PTDoc.vue b/doc/togglebutton/pt/PTDoc.vue
index d9f43a558..ae38bfcfe 100644
--- a/doc/togglebutton/pt/PTDoc.vue
+++ b/doc/togglebutton/pt/PTDoc.vue
@@ -27,7 +27,8 @@ export default {
             class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
         }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -50,7 +51,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -69,7 +71,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/togglebutton/theming/TailwindDoc.vue b/doc/togglebutton/theming/TailwindDoc.vue
index 2bde458d9..863332019 100644
--- a/doc/togglebutton/theming/TailwindDoc.vue
+++ b/doc/togglebutton/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     togglebutton: {
         root: ({ props, context }) => ({
             class: [
@@ -59,7 +60,8 @@ export default {
 import { ref } from 'vue';
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/toolbar/BasicDoc.vue b/doc/toolbar/BasicDoc.vue
index 18abf17e3..864354d43 100644
--- a/doc/toolbar/BasicDoc.vue
+++ b/doc/toolbar/BasicDoc.vue
@@ -64,7 +64,8 @@ export default {
         <Button icon="pi pi-calendar" severity="success" class="mr-2" />
         <Button icon="pi pi-times" severity="danger" />
     </template>
-</Toolbar>`,
+</Toolbar>
+`,
                 options: `
 <template>
     <div class="card">
@@ -116,7 +117,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -164,7 +166,8 @@ const items = ref([
         }
     }
 ])
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/toolbar/pt/PTDoc.vue b/doc/toolbar/pt/PTDoc.vue
index 0ccfd78eb..af88b5de3 100644
--- a/doc/toolbar/pt/PTDoc.vue
+++ b/doc/toolbar/pt/PTDoc.vue
@@ -35,7 +35,8 @@ export default {
             <Button icon="pi pi-times" severity="danger" />
         </template>
     </Toolbar>
-</TabView>`,
+</TabView>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
             </template>
         </Toolbar>
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/toolbar/theming/TailwindDoc.vue b/doc/toolbar/theming/TailwindDoc.vue
index 907c764a3..3e4f09041 100644
--- a/doc/toolbar/theming/TailwindDoc.vue
+++ b/doc/toolbar/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     toolbar: {
         root: {
             class: ['flex items-center justify-between flex-wrap', 'bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-blue-900/40  p-5 rounded-md gap-2']
@@ -75,7 +76,8 @@ const items = ref([
         }
     }
 ])
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tooltip/DelayDoc.vue b/doc/tooltip/DelayDoc.vue
index e9923ee79..b4a28189f 100644
--- a/doc/tooltip/DelayDoc.vue
+++ b/doc/tooltip/DelayDoc.vue
@@ -14,13 +14,15 @@ export default {
         return {
             code: {
                 basic: `
-<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />`,
+<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
diff --git a/doc/tooltip/EventDoc.vue b/doc/tooltip/EventDoc.vue
index 773b504b6..3b0b4a13a 100644
--- a/doc/tooltip/EventDoc.vue
+++ b/doc/tooltip/EventDoc.vue
@@ -16,14 +16,16 @@ export default {
             code: {
                 basic: `
 <InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
-<Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />`,
+<Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
         <Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
diff --git a/doc/tooltip/PositionDoc.vue b/doc/tooltip/PositionDoc.vue
index 1be9ced13..fce97aa4a 100644
--- a/doc/tooltip/PositionDoc.vue
+++ b/doc/tooltip/PositionDoc.vue
@@ -20,7 +20,8 @@ export default {
 <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
 <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
 <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
-<InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />`,
+<InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -29,7 +30,8 @@ export default {
         <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
         <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
     </div>
-</template>`,
+</template>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
diff --git a/doc/tooltip/TemplateDoc.vue b/doc/tooltip/TemplateDoc.vue
index c0c9b8aaf..0343b6b25 100644
--- a/doc/tooltip/TemplateDoc.vue
+++ b/doc/tooltip/TemplateDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             code: {
                 basic: `
-<InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />`,
+<InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
@@ -30,7 +31,8 @@ export default {
 .custom-error.p-tooltip-right .p-tooltip-arrow {
     border-right-color: var(--pink-800);
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
diff --git a/doc/tooltip/pt/PTDoc.vue b/doc/tooltip/pt/PTDoc.vue
index f36d8a651..e0437b8f9 100644
--- a/doc/tooltip/pt/PTDoc.vue
+++ b/doc/tooltip/pt/PTDoc.vue
@@ -30,7 +30,8 @@ export default {
     }"
     type="text"
     placeholder="PassThrough Tooltip"
-/>`,
+/>
+`,
                 options: `<div class="card flex flex-wrap justify-content-center gap-2">
     <InputText
         v-tooltip.right="{
@@ -42,7 +43,8 @@ export default {
         type="text"
         placeholder="PassThrough Tooltip"
     />
-</div>`,
+</div>
+`,
                 composition: `
                 <div class="card flex flex-wrap justify-content-center gap-2">
     <InputText
diff --git a/doc/tooltip/theming/TailwindDoc.vue b/doc/tooltip/theming/TailwindDoc.vue
index 81d03ec03..c31101cd1 100644
--- a/doc/tooltip/theming/TailwindDoc.vue
+++ b/doc/tooltip/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     directives: {
         tooltip: {
             root: ({ context }) => ({
diff --git a/doc/tree/BasicDoc.vue b/doc/tree/BasicDoc.vue
index 58cd5f839..8947ab1a3 100644
--- a/doc/tree/BasicDoc.vue
+++ b/doc/tree/BasicDoc.vue
@@ -16,7 +16,8 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<Tree :value="nodes" class="w-full md:w-30rem"></Tree>`,
+<Tree :value="nodes" class="w-full md:w-30rem"></Tree>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -37,7 +38,8 @@ export default {
         NodeService.getTreeNodes().then((data) => (this.nodes = data));
     } 
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -54,7 +56,8 @@ const nodes = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/tree/ControlledDoc.vue b/doc/tree/ControlledDoc.vue
index 05f5018bb..75ab3f36d 100644
--- a/doc/tree/ControlledDoc.vue
+++ b/doc/tree/ControlledDoc.vue
@@ -29,7 +29,8 @@ export default {
     <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
     <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
 </div>
-<Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-30rem"></Tree>`,
+<Tree v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-30rem"></Tree>
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-cente">
@@ -76,7 +77,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-cente">
@@ -120,7 +122,8 @@ const expandNode = (node) => {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/tree/EventsDoc.vue b/doc/tree/EventsDoc.vue
index 4e63827a4..5e74b7e15 100644
--- a/doc/tree/EventsDoc.vue
+++ b/doc/tree/EventsDoc.vue
@@ -28,7 +28,8 @@ export default {
             code: {
                 basic: `
 <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" class="w-full md:w-30rem"
-    @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-30rem"></Tree>`,
+    @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-30rem"></Tree>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -65,7 +66,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -103,7 +105,8 @@ const onNodeExpand = (node) => {
 const onNodeCollapse (node) => {
     toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 });
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/tree/FilterDoc.vue b/doc/tree/FilterDoc.vue
index 19773dea6..d90c20fd1 100644
--- a/doc/tree/FilterDoc.vue
+++ b/doc/tree/FilterDoc.vue
@@ -23,7 +23,8 @@ export default {
             code: {
                 basic: `
 <Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-30rem"></Tree>
-<Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-30rem"></Tree>`,
+<Tree :value="nodes" :filter="true" filterMode="strict" class="w-full md:w-30rem"></Tree>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-5">
@@ -66,7 +67,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-5">
@@ -108,7 +110,8 @@ const expandNode = (node) => {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/tree/LazyDoc.vue b/doc/tree/LazyDoc.vue
index 327af7a3f..8b56c15ce 100644
--- a/doc/tree/LazyDoc.vue
+++ b/doc/tree/LazyDoc.vue
@@ -16,7 +16,8 @@ export default {
             loading: false,
             code: {
                 basic: `
-<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>`,
+<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -86,7 +87,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -153,7 +155,8 @@ const initateNodes = () => {
         }
     ];
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/tree/TemplateDoc.vue b/doc/tree/TemplateDoc.vue
index e65e46f97..938b5ee77 100644
--- a/doc/tree/TemplateDoc.vue
+++ b/doc/tree/TemplateDoc.vue
@@ -50,7 +50,8 @@ export default {
     <template #url="slotProps">
         <a :href="slotProps.node.data">{{ slotProps.node.label }}</a>
     </template>
-</Tree>`,
+</Tree>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -94,7 +95,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -134,7 +136,8 @@ const nodes = ref([
         ]
     }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/tree/pt/PTDoc.vue b/doc/tree/pt/PTDoc.vue
index a4a924e6a..9eb6c6916 100644
--- a/doc/tree/pt/PTDoc.vue
+++ b/doc/tree/pt/PTDoc.vue
@@ -31,7 +31,8 @@ export default {
             class: context.expanded ? 'bg-blue-100' : 'undefined'
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -60,7 +61,8 @@ export default {
         NodeService.getTreeNodes().then((data) => (this.nodes = data));
     } 
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -85,7 +87,8 @@ const nodes = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/tree/selection/CheckboxDoc.vue b/doc/tree/selection/CheckboxDoc.vue
index 46a9fa4c4..3fc46fed2 100644
--- a/doc/tree/selection/CheckboxDoc.vue
+++ b/doc/tree/selection/CheckboxDoc.vue
@@ -22,7 +22,8 @@ export default {
             selectedKey: null,
             code: {
                 basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>`,
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -52,7 +53,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -81,7 +83,8 @@ const onNodeSelect = (node) => {
 const onNodeUnselect = (node) => {
     toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/tree/selection/MultipleDoc.vue b/doc/tree/selection/MultipleDoc.vue
index ec43b1a61..9db11419a 100644
--- a/doc/tree/selection/MultipleDoc.vue
+++ b/doc/tree/selection/MultipleDoc.vue
@@ -28,7 +28,8 @@ export default {
             code: {
                 basic: `
 <Tree v-model:selectionKeys="selectedKey" :value="nodes" class="w-full md:w-30rem" 
-    selectionMode="multiple" :metaKeySelection="checked"></Tree>`,
+    selectionMode="multiple" :metaKeySelection="checked"></Tree>
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center justify-content-center">
@@ -55,7 +56,8 @@ export default {
         NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center justify-content-center">
@@ -78,7 +80,8 @@ const checked = ref(false);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/tree/selection/SingleDoc.vue b/doc/tree/selection/SingleDoc.vue
index 8d6becc80..ea6882236 100644
--- a/doc/tree/selection/SingleDoc.vue
+++ b/doc/tree/selection/SingleDoc.vue
@@ -17,7 +17,8 @@ export default {
             selectedKey: null,
             code: {
                 basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>`,
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -47,7 +48,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -76,7 +78,8 @@ const onNodeSelect = (node) => {
 const onNodeUnselect = (node) => {
     toast.add({ severity: 'success', summary: 'Node Unselected', detail: node.label, life: 3000 });
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/tree/theming/TailwindDoc.vue b/doc/tree/theming/TailwindDoc.vue
index df373c2fb..2c458a87b 100644
--- a/doc/tree/theming/TailwindDoc.vue
+++ b/doc/tree/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     tree: {
         root: {
             class: ['max-w-[30rem] md:w-full', 'border border-solid border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 p-5 rounded-md']
@@ -99,7 +100,8 @@ const nodes = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/treeselect/AccessibilityDoc.vue b/doc/treeselect/AccessibilityDoc.vue
index 9119535f0..d6da4dc05 100644
--- a/doc/treeselect/AccessibilityDoc.vue
+++ b/doc/treeselect/AccessibilityDoc.vue
@@ -100,7 +100,8 @@ export default {
 <span id="dd1">Options</span>
 <TreeSelect aria-labelledby="dd1" />
 
-<TreeSelect aria-label="Options" />`
+<TreeSelect aria-label="Options" />
+`
             }
         };
     }
diff --git a/doc/treeselect/BasicDoc.vue b/doc/treeselect/BasicDoc.vue
index 95540a7fd..5f19ecf2f 100644
--- a/doc/treeselect/BasicDoc.vue
+++ b/doc/treeselect/BasicDoc.vue
@@ -22,7 +22,8 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />`,
+<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -44,7 +45,8 @@ export default {
         NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -62,7 +64,8 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treeselect/CheckboxDoc.vue b/doc/treeselect/CheckboxDoc.vue
index 7bf9cfd2c..1cc9a6a95 100644
--- a/doc/treeselect/CheckboxDoc.vue
+++ b/doc/treeselect/CheckboxDoc.vue
@@ -32,7 +32,8 @@ export default {
             },
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />`,
+<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -54,7 +55,8 @@ export default {
         NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -72,7 +74,8 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treeselect/DisabledDoc.vue b/doc/treeselect/DisabledDoc.vue
index 9d871f9f8..1052a8cd2 100644
--- a/doc/treeselect/DisabledDoc.vue
+++ b/doc/treeselect/DisabledDoc.vue
@@ -17,7 +17,8 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />`,
+<TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -39,7 +40,8 @@ export default {
         NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -57,7 +59,8 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treeselect/FloatLabelDoc.vue b/doc/treeselect/FloatLabelDoc.vue
index b632d5a1c..5b96eecb2 100644
--- a/doc/treeselect/FloatLabelDoc.vue
+++ b/doc/treeselect/FloatLabelDoc.vue
@@ -24,7 +24,8 @@ export default {
 <span class="p-float-label">
     <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
     <label>Tree Select</label>
-</span>`,
+</span>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -49,7 +50,8 @@ export default {
         NodeService.getTreeNodes().then((data) => (this.nodes     = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -70,7 +72,8 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treeselect/InvalidDoc.vue b/doc/treeselect/InvalidDoc.vue
index 7c5af593e..91e02040f 100644
--- a/doc/treeselect/InvalidDoc.vue
+++ b/doc/treeselect/InvalidDoc.vue
@@ -18,7 +18,8 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />`,
+<TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -40,7 +41,8 @@ export default {
         NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +60,8 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treeselect/MultipleDoc.vue b/doc/treeselect/MultipleDoc.vue
index 59eaeda46..fbcd1112c 100644
--- a/doc/treeselect/MultipleDoc.vue
+++ b/doc/treeselect/MultipleDoc.vue
@@ -29,7 +29,8 @@ export default {
             },
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Item" class="md:w-20rem w-full" />`,
+<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Item" class="md:w-20rem w-full" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -51,7 +52,8 @@ export default {
         NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -69,7 +71,8 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treeselect/form/VeeValidateDoc.vue b/doc/treeselect/form/VeeValidateDoc.vue
index 43cf9d0f5..b6aaa40a9 100644
--- a/doc/treeselect/form/VeeValidateDoc.vue
+++ b/doc/treeselect/form/VeeValidateDoc.vue
@@ -50,7 +50,8 @@ export default {
         <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -100,7 +101,8 @@ export default {
         NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -143,7 +145,8 @@ const onSubmit = handleSubmit((values) => {
         resetForm();
     }
 });
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/treeselect/pt/PTDoc.vue b/doc/treeselect/pt/PTDoc.vue
index 53765a3a3..9e130397b 100644
--- a/doc/treeselect/pt/PTDoc.vue
+++ b/doc/treeselect/pt/PTDoc.vue
@@ -39,7 +39,8 @@ export default {
             })
         }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -73,7 +74,8 @@ export default {
         NodeService.getTreeNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -103,7 +105,8 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treeselect/theming/TailwindDoc.vue b/doc/treeselect/theming/TailwindDoc.vue
index 21b67f620..6b00118c8 100644
--- a/doc/treeselect/theming/TailwindDoc.vue
+++ b/doc/treeselect/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export const TRANSITIONS = {
+                basic: `
+export const TRANSITIONS = {
     overlay: {
         enterFromClass: 'opacity-0 scale-75',
         enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
@@ -135,7 +136,8 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/treetable/BasicDoc.vue b/doc/treetable/BasicDoc.vue
index 4cfe9343c..45cd3adfb 100644
--- a/doc/treetable/BasicDoc.vue
+++ b/doc/treetable/BasicDoc.vue
@@ -25,7 +25,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -50,7 +51,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/ColumnToggleDoc.vue b/doc/treetable/ColumnToggleDoc.vue
index f049b59f3..92bbd2812 100644
--- a/doc/treetable/ColumnToggleDoc.vue
+++ b/doc/treetable/ColumnToggleDoc.vue
@@ -35,7 +35,8 @@ export default {
     </template>
     <Column field="name" header="Name" :expander="true"></Column>
     <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -79,7 +80,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -112,7 +114,8 @@ const selectedColumns = ref(columns.value);
 const onToggle = (val) => {
     selectedColumns.value = columns.value.filter(col => val.includes(col));
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/ControlledDoc.vue b/doc/treetable/ControlledDoc.vue
index b4a27a7af..bab4c22e0 100644
--- a/doc/treetable/ControlledDoc.vue
+++ b/doc/treetable/ControlledDoc.vue
@@ -28,7 +28,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -65,7 +66,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -96,7 +98,8 @@ const toggleApplications = () => {
 
     expandedKeys.value = _expandedKeys;
 }
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/DynamicColumnsDoc.vue b/doc/treetable/DynamicColumnsDoc.vue
index 65f4c7dd9..2dbfae8e4 100644
--- a/doc/treetable/DynamicColumnsDoc.vue
+++ b/doc/treetable/DynamicColumnsDoc.vue
@@ -22,7 +22,8 @@ export default {
                 basic: `
 <TreeTable :value="nodes">
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -77,7 +79,8 @@ const columns = ref([
     { field: 'size', header: 'Size' },
     { field: 'type', header: 'Type' }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/FilterDoc.vue b/doc/treetable/FilterDoc.vue
index 507501f47..7ed963dfa 100644
--- a/doc/treetable/FilterDoc.vue
+++ b/doc/treetable/FilterDoc.vue
@@ -79,7 +79,8 @@ export default {
             <InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
         </template>
     </Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -133,7 +134,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -183,7 +185,8 @@ const filterOptions = ref([
     { label: 'Lenient', value: 'lenient' },
     { label: 'Strict', value: 'strict' }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/LazyLoadDoc.vue b/doc/treetable/LazyLoadDoc.vue
index 168ea202b..4145c9747 100644
--- a/doc/treetable/LazyLoadDoc.vue
+++ b/doc/treetable/LazyLoadDoc.vue
@@ -35,7 +35,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -135,7 +136,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div>
@@ -230,7 +232,8 @@ const loadNodes = (first, rows) => {
 
     return nodes;
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/treetable/ResponsiveDoc.vue b/doc/treetable/ResponsiveDoc.vue
index 1a5a98759..295af8fc9 100644
--- a/doc/treetable/ResponsiveDoc.vue
+++ b/doc/treetable/ResponsiveDoc.vue
@@ -25,7 +25,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -50,7 +51,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/SizeDoc.vue b/doc/treetable/SizeDoc.vue
index 98232557e..23ab49d85 100644
--- a/doc/treetable/SizeDoc.vue
+++ b/doc/treetable/SizeDoc.vue
@@ -34,7 +34,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -65,7 +66,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -92,7 +94,8 @@ const sizeOptions = ref([
     { label: 'Normal', value: 'normal' },
     { label: 'Large', value: 'large', class: 'lg' }
 ]);
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/TemplateDoc.vue b/doc/treetable/TemplateDoc.vue
index 0e6f18ae6..6cafefdc3 100644
--- a/doc/treetable/TemplateDoc.vue
+++ b/doc/treetable/TemplateDoc.vue
@@ -57,7 +57,8 @@ export default {
             <Button icon="pi pi-refresh" label="Reload" severity="warning" />
         </div>
     </template>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -98,7 +99,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -135,7 +137,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/paginator/PaginatorBasicDoc.vue b/doc/treetable/paginator/PaginatorBasicDoc.vue
index c37acd50d..7a4b270b2 100644
--- a/doc/treetable/paginator/PaginatorBasicDoc.vue
+++ b/doc/treetable/paginator/PaginatorBasicDoc.vue
@@ -23,7 +23,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -71,7 +72,8 @@ export default {
         this.nodes = files;
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -114,7 +116,8 @@ for (let i = 0; i < 50; i++) {
 
 nodes.value = files;
     
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/treetable/paginator/PaginatorTemplateDoc.vue b/doc/treetable/paginator/PaginatorTemplateDoc.vue
index a1c37e192..8c7a59a9e 100644
--- a/doc/treetable/paginator/PaginatorTemplateDoc.vue
+++ b/doc/treetable/paginator/PaginatorTemplateDoc.vue
@@ -47,7 +47,8 @@ export default {
     <template #paginatorend>
         <Button type="button" icon="pi pi-download" text />
     </template>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -103,7 +104,8 @@ export default {
         this.nodes = files;
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -154,7 +156,8 @@ for (let i = 0; i < 50; i++) {
 
 nodes.value = files;
     
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/treetable/pt/PTDoc.vue b/doc/treetable/pt/PTDoc.vue
index 4c4fbd477..b9394bb6a 100644
--- a/doc/treetable/pt/PTDoc.vue
+++ b/doc/treetable/pt/PTDoc.vue
@@ -67,7 +67,8 @@ export default {
             sortBadge: { class: 'text-orange-400' }
         }"
     />
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -114,7 +115,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -157,7 +159,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/resize/ExpandModeDoc.vue b/doc/treetable/resize/ExpandModeDoc.vue
index db00ee5dd..96e9b8f3d 100644
--- a/doc/treetable/resize/ExpandModeDoc.vue
+++ b/doc/treetable/resize/ExpandModeDoc.vue
@@ -25,7 +25,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -50,7 +51,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/resize/FitModeDoc.vue b/doc/treetable/resize/FitModeDoc.vue
index 27aa61e69..9f1359e2d 100644
--- a/doc/treetable/resize/FitModeDoc.vue
+++ b/doc/treetable/resize/FitModeDoc.vue
@@ -28,7 +28,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -53,7 +54,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -74,7 +76,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/scroll/FlexibleScrollDoc.vue b/doc/treetable/scroll/FlexibleScrollDoc.vue
index 19d4c095d..f6660a2a8 100644
--- a/doc/treetable/scroll/FlexibleScrollDoc.vue
+++ b/doc/treetable/scroll/FlexibleScrollDoc.vue
@@ -42,7 +42,8 @@ export default {
     <template #footer>
         <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
     </template>
-</Dialog>`,
+</Dialog>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -74,7 +75,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -103,7 +105,8 @@ onMounted(() => {
 const nodes = ref();
 const dialogVisible = ref(false);
 
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/treetable/scroll/FrozenColumnsDoc.vue b/doc/treetable/scroll/FrozenColumnsDoc.vue
index 882b0ac55..6a3d90e72 100644
--- a/doc/treetable/scroll/FrozenColumnsDoc.vue
+++ b/doc/treetable/scroll/FrozenColumnsDoc.vue
@@ -31,7 +31,8 @@ export default {
     <Column field="size" header="Size 2" style="width: 250px; height: 57px"></Column>
     <Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column>
     <Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -59,7 +60,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -83,7 +85,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/scroll/HorizontalScrollDoc.vue b/doc/treetable/scroll/HorizontalScrollDoc.vue
index 59a5af7b0..ff4ef5bdf 100644
--- a/doc/treetable/scroll/HorizontalScrollDoc.vue
+++ b/doc/treetable/scroll/HorizontalScrollDoc.vue
@@ -31,7 +31,8 @@ export default {
     <Column field="size" header="Size 2" style="width: 250px"></Column>
     <Column field="type" header="Type 3" style="width: 250px"></Column>
     <Column field="size" header="Size 3" style="width: 250px"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -59,7 +60,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -83,7 +85,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/scroll/VerticalScrollDoc.vue b/doc/treetable/scroll/VerticalScrollDoc.vue
index 9101f27f3..4f13a44cf 100644
--- a/doc/treetable/scroll/VerticalScrollDoc.vue
+++ b/doc/treetable/scroll/VerticalScrollDoc.vue
@@ -25,7 +25,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -50,7 +51,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/selection/CheckboxRowSelectionDoc.vue b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
index 6bcd249dd..a3f4c7760 100644
--- a/doc/treetable/selection/CheckboxRowSelectionDoc.vue
+++ b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
@@ -37,7 +37,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -63,7 +64,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -85,7 +87,8 @@ onMounted(() => {
 
 const nodes = ref();
 const selectedKey = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/selection/MultipleRowsSelectionDoc.vue b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
index 3d07eb0bd..2f3c96b53 100644
--- a/doc/treetable/selection/MultipleRowsSelectionDoc.vue
+++ b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
@@ -37,7 +37,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -68,7 +69,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -95,7 +97,8 @@ onMounted(() => {
 const nodes = ref();
 const selectedKey = ref();
 const metaKey = ref(true);
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/selection/RowSelectionEventsDoc.vue b/doc/treetable/selection/RowSelectionEventsDoc.vue
index 0f7dc5715..550d056a6 100644
--- a/doc/treetable/selection/RowSelectionEventsDoc.vue
+++ b/doc/treetable/selection/RowSelectionEventsDoc.vue
@@ -27,7 +27,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -63,7 +64,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -95,7 +97,8 @@ const onNodeSelect = (node) => {
 const onNodeUnselect = (node) => {
     toast.add({ severity: 'warn', summary: 'Node Unselected', detail: node.data.name, life: 3000 });
 };
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/selection/SingleRowSelectionDoc.vue b/doc/treetable/selection/SingleRowSelectionDoc.vue
index e1f18238b..ef72f1b5f 100644
--- a/doc/treetable/selection/SingleRowSelectionDoc.vue
+++ b/doc/treetable/selection/SingleRowSelectionDoc.vue
@@ -37,7 +37,8 @@ export default {
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -68,7 +69,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -95,7 +97,8 @@ onMounted(() => {
 const nodes = ref();
 const selectedKey = ref();
 const metaKey = ref(true);
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/sort/MultipleColumnsDoc.vue b/doc/treetable/sort/MultipleColumnsDoc.vue
index 4a7a9de81..c91a5a2ca 100644
--- a/doc/treetable/sort/MultipleColumnsDoc.vue
+++ b/doc/treetable/sort/MultipleColumnsDoc.vue
@@ -25,7 +25,8 @@ export default {
     <Column field="name" header="Name" sortable expander></Column>
     <Column field="size" header="Size" sortable></Column>
     <Column field="type" header="Type" sortable></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -50,7 +51,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/sort/RemovableSortDoc.vue b/doc/treetable/sort/RemovableSortDoc.vue
index de78b710c..322adeaac 100644
--- a/doc/treetable/sort/RemovableSortDoc.vue
+++ b/doc/treetable/sort/RemovableSortDoc.vue
@@ -25,7 +25,8 @@ export default {
     <Column field="name" header="Name" sortable expander></Column>
     <Column field="size" header="Size" sortable></Column>
     <Column field="type" header="Type" sortable></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -50,7 +51,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/sort/SingleColumnDoc.vue b/doc/treetable/sort/SingleColumnDoc.vue
index 537a02bab..cb38a164b 100644
--- a/doc/treetable/sort/SingleColumnDoc.vue
+++ b/doc/treetable/sort/SingleColumnDoc.vue
@@ -25,7 +25,8 @@ export default {
     <Column field="name" header="Name" sortable expander></Column>
     <Column field="size" header="Size" sortable></Column>
     <Column field="type" header="Type" sortable></Column>
-</TreeTable>`,
+</TreeTable>
+`,
                 options: `
 <template>
     <div class="card">
@@ -50,7 +51,8 @@ export default {
         NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card">
@@ -71,7 +73,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`,
+<\/script>
+`,
                 data: `
 {
     key: '0',
diff --git a/doc/treetable/theming/TailwindDoc.vue b/doc/treetable/theming/TailwindDoc.vue
index 7f549e387..911b0a332 100644
--- a/doc/treetable/theming/TailwindDoc.vue
+++ b/doc/treetable/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     treetable: {
         root: ({ props }) => ({
             class: [
@@ -192,7 +193,8 @@ onMounted(() => {
 });
 
 const nodes = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tristatecheckbox/AccessibilityDoc.vue b/doc/tristatecheckbox/AccessibilityDoc.vue
index e9fe89c12..acbb68b9a 100644
--- a/doc/tristatecheckbox/AccessibilityDoc.vue
+++ b/doc/tristatecheckbox/AccessibilityDoc.vue
@@ -45,7 +45,8 @@ export default {
 <span id="chkbox1">Remember Me</span>
 <TriStateCheckbox aria-labelledby="chkbox1" />
 
-<TriStateCheckbox aria-label="Remember Me" />`
+<TriStateCheckbox aria-label="Remember Me" />
+`
             }
         };
     }
diff --git a/doc/tristatecheckbox/BasicDoc.vue b/doc/tristatecheckbox/BasicDoc.vue
index 1dab637d0..a57fe30db 100644
--- a/doc/tristatecheckbox/BasicDoc.vue
+++ b/doc/tristatecheckbox/BasicDoc.vue
@@ -16,7 +16,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<TriStateCheckbox v-model="value" />`,
+<TriStateCheckbox v-model="value" />
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -33,7 +34,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -46,7 +48,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tristatecheckbox/DisabledDoc.vue b/doc/tristatecheckbox/DisabledDoc.vue
index d22b718ec..80903e02a 100644
--- a/doc/tristatecheckbox/DisabledDoc.vue
+++ b/doc/tristatecheckbox/DisabledDoc.vue
@@ -15,7 +15,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<TriStateCheckbox v-model="value" />`,
+<TriStateCheckbox v-model="value" />
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -31,7 +32,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -43,7 +45,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tristatecheckbox/InvalidDoc.vue b/doc/tristatecheckbox/InvalidDoc.vue
index b5b59e56d..bdf3445ef 100644
--- a/doc/tristatecheckbox/InvalidDoc.vue
+++ b/doc/tristatecheckbox/InvalidDoc.vue
@@ -16,7 +16,8 @@ export default {
             value: null,
             code: {
                 basic: `
-<TriStateCheckbox v-model="value" class="p-invalid" />`,
+<TriStateCheckbox v-model="value" class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -33,7 +34,8 @@ export default {
       }
   }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -46,7 +48,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tristatecheckbox/form/VeeValidateDoc.vue b/doc/tristatecheckbox/form/VeeValidateDoc.vue
index cb451ec12..7f79f17eb 100644
--- a/doc/tristatecheckbox/form/VeeValidateDoc.vue
+++ b/doc/tristatecheckbox/form/VeeValidateDoc.vue
@@ -51,7 +51,8 @@ export default {
         <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -92,7 +93,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -128,7 +130,8 @@ const onSubmit = handleSubmit((values) => {
         resetForm();
     }
 });
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tristatecheckbox/pt/PTDoc.vue b/doc/tristatecheckbox/pt/PTDoc.vue
index 2cd927ad4..7ba213eaa 100644
--- a/doc/tristatecheckbox/pt/PTDoc.vue
+++ b/doc/tristatecheckbox/pt/PTDoc.vue
@@ -28,7 +28,8 @@ export default {
             class: value ? 'bg-teal-500 border-white' : undefined
         }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -52,7 +53,8 @@ export default {
         }
     }
 }
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
@@ -72,7 +74,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/tristatecheckbox/theming/TailwindDoc.vue b/doc/tristatecheckbox/theming/TailwindDoc.vue
index f01dc997d..85e28d644 100644
--- a/doc/tristatecheckbox/theming/TailwindDoc.vue
+++ b/doc/tristatecheckbox/theming/TailwindDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     tristatecheckbox: {
         root: {
             class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
@@ -51,7 +52,8 @@ export default {
 import { ref } from 'vue';
 
 const value = ref(null);
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/unocss/SetupDoc.vue b/doc/unocss/SetupDoc.vue
index bfd4fb64c..c530acb9f 100644
--- a/doc/unocss/SetupDoc.vue
+++ b/doc/unocss/SetupDoc.vue
@@ -35,7 +35,8 @@ export default defineConfig({
       "./src/**/*.{vue,js,ts,jsx,tsx}",
       "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"]
   })]
-})`
+})
+`
             }
         };
     }
diff --git a/doc/unstyled/ExampleDoc.vue b/doc/unstyled/ExampleDoc.vue
index 21d17dff2..bdf980848 100644
--- a/doc/unstyled/ExampleDoc.vue
+++ b/doc/unstyled/ExampleDoc.vue
@@ -32,7 +32,8 @@ export default {
         label: { class: 'text-white font-bold text-xl' },
         icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card">
@@ -47,7 +48,8 @@ export default {
 </template>
 
 <script>
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <Button label="Check" icon="pi pi-check" unstyled
@@ -60,7 +62,8 @@ export default {
 </template>
 
 <script setup>
-<\/script>`
+<\/script>
+`
             }
         };
     }
diff --git a/doc/unstyled/SetupDoc.vue b/doc/unstyled/SetupDoc.vue
index c2f46bd5a..512457a7a 100644
--- a/doc/unstyled/SetupDoc.vue
+++ b/doc/unstyled/SetupDoc.vue
@@ -25,7 +25,8 @@ app.use(PrimeVue, { unstyled: true });
             },
             code2: {
                 basic: `
-<Button label="Check" icon="pi pi-check" unstyled></Button>`
+<Button label="Check" icon="pi pi-check" unstyled></Button>
+`
             }
         };
     }
diff --git a/doc/virtualscroller/BasicDoc.vue b/doc/virtualscroller/BasicDoc.vue
index bc731f1c0..46bccc8f6 100644
--- a/doc/virtualscroller/BasicDoc.vue
+++ b/doc/virtualscroller/BasicDoc.vue
@@ -26,7 +26,8 @@ export default {
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
-</VirtualScroller>`,
+</VirtualScroller>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -49,7 +50,8 @@ export default {
         this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -65,7 +67,8 @@ export default {
 import { ref } from 'vue';
 
 const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/virtualscroller/DelayDoc.vue b/doc/virtualscroller/DelayDoc.vue
index 0234f5b65..bde7c14a0 100644
--- a/doc/virtualscroller/DelayDoc.vue
+++ b/doc/virtualscroller/DelayDoc.vue
@@ -54,7 +54,8 @@ export default {
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
-</VirtualScroller>`,
+</VirtualScroller>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-5">
@@ -96,7 +97,8 @@ export default {
         this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-5">
@@ -131,7 +133,8 @@ export default {
 import { ref } from 'vue';
 
 const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/virtualscroller/GridDoc.vue b/doc/virtualscroller/GridDoc.vue
index 07ff425c0..35c01f10f 100644
--- a/doc/virtualscroller/GridDoc.vue
+++ b/doc/virtualscroller/GridDoc.vue
@@ -31,7 +31,8 @@ export default {
             </template>
         </div>
     </template>
-</VirtualScroller>`,
+</VirtualScroller>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -58,7 +59,8 @@ export default {
         this.items = Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`));
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -78,7 +80,8 @@ export default {
 import { ref } from 'vue';
 
 const items = ref(Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`)));
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/virtualscroller/HorizontalDoc.vue b/doc/virtualscroller/HorizontalDoc.vue
index 35e3ef48e..c62120329 100644
--- a/doc/virtualscroller/HorizontalDoc.vue
+++ b/doc/virtualscroller/HorizontalDoc.vue
@@ -23,7 +23,8 @@ export default {
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
     </template>
-</VirtualScroller>`,
+</VirtualScroller>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -55,7 +56,8 @@ export default {
         flex-direction: row;
     }
 }
-</style>`,
+</style>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/virtualscroller/LazyDoc.vue b/doc/virtualscroller/LazyDoc.vue
index 06d07f4be..6dbf7a00b 100644
--- a/doc/virtualscroller/LazyDoc.vue
+++ b/doc/virtualscroller/LazyDoc.vue
@@ -28,7 +28,8 @@ export default {
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
-</VirtualScroller>`,
+</VirtualScroller>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -76,7 +77,8 @@ export default {
         }
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -115,7 +117,8 @@ const onLazyLoad = (event) => {
 
     }, Math.random() * 1000 + 250);
 };
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/virtualscroller/LoadingDoc.vue b/doc/virtualscroller/LoadingDoc.vue
index 44520ffa0..5159cda4a 100644
--- a/doc/virtualscroller/LoadingDoc.vue
+++ b/doc/virtualscroller/LoadingDoc.vue
@@ -53,7 +53,8 @@ export default {
             <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
         </div>
     </template>
-</VirtualScroller>`,
+</VirtualScroller>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-5">
@@ -92,7 +93,8 @@ export default {
         this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-5">
@@ -124,7 +126,8 @@ export default {
 import { ref } from 'vue';
 
 const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-<\/script>`
+<\/script>
+`
             }
         };
     },
diff --git a/doc/virtualscroller/pt/PTDoc.vue b/doc/virtualscroller/pt/PTDoc.vue
index a80a89575..7d69f49e8 100644
--- a/doc/virtualscroller/pt/PTDoc.vue
+++ b/doc/virtualscroller/pt/PTDoc.vue
@@ -35,7 +35,8 @@ export default {
             style: { width: '200px', height: '200px' }
         }
     }"
->`,
+>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -63,7 +64,8 @@ export default {
         this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -84,7 +86,8 @@ export default {
 import { ref } from 'vue';
 
 const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
-<\/script>`
+<\/script>
+`
             }
         };
     },