diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue
index 3290e2c11..ef6e78430 100644
--- a/components/doc/DocSectionCode.vue
+++ b/components/doc/DocSectionCode.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-if="!embedded" class="surface-card mb-4" style="border-radius: 10px">
-        <div class="flex doc-section-code-buttons surface-card align-items-center justify-content-end sticky z-1 top-0 mr-3">
+    <div v-if="!embedded" class="surface-card mb-4" :class="scrollable ? '' : 'relative'" style="border-radius: 10px">
+        <div class="flex doc-section-code-buttons surface-card align-items-center justify-content-end z-1" :style="scrollable ? { position: 'sticky', padding: '0.75rem 0.75rem 0 0' } : { position: 'absolute', top: '0.75rem', right: '0.75rem' }">
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
                 <Button
                     :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'composition' }]"
@@ -76,33 +76,41 @@
             ></Button>
         </div>
 
-        <div class="relative doc-section-code overflow-auto" style="max-height: 40rem">
+        <div class="relative doc-section-code overflow-auto" :style="scrollable ? { 'max-height': '40rem' } : undefined" style="border-radius: 10px">
             <template v-if="codeMode === 'basic' && importCode">
                 <pre v-code.script><code>{{ code.basic }}
 </code></pre>
             </template>
 
             <template v-if="codeMode === 'basic' && !importCode">
-                <pre v-code><code>{{ code.basic }}
+                <pre v-code><code>
+{{ code.basic }}
+
 </code></pre>
             </template>
 
             <template v-if="codeMode !== 'basic' && codeLang === 'options'">
-                <pre v-code><code>{{ code.options }}
+                <pre v-code><code>
+{{ code.options }}
+
 </code></pre>
             </template>
 
             <template v-if="codeMode !== 'basic' && codeLang === 'composition'">
-                <pre v-code><code>{{ code.composition }}
+                <pre v-code><code>
+{{ code.composition }}
+
 </code></pre>
             </template>
 
             <template v-if="codeMode !== 'basic' && codeLang === 'data'">
-                <pre v-code.json><code>{{ code.data }}
+                <pre v-code.json><code>
+{{ code.data }}
+
 </code></pre>
             </template>
         </div>
-        <div class="h-1rem"></div>
+        <div v-if="scrollable" class="h-1rem"></div>
     </div>
     <div v-else id="embed"></div>
 </template>
@@ -152,6 +160,10 @@ export default {
         embedded: {
             type: Boolean,
             default: false
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
diff --git a/doc/accordion/BasicDoc.vue b/doc/accordion/BasicDoc.vue
index f4c408ce9..503b82883 100644
--- a/doc/accordion/BasicDoc.vue
+++ b/doc/accordion/BasicDoc.vue
@@ -32,7 +32,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Accordion :activeIndex="0">
+                basic: `
+<Accordion :activeIndex="0">
     <AccordionTab header="Header I">
         <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
@@ -53,7 +54,8 @@ export default {
         </p>
     </AccordionTab>
 </Accordion>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab header="Header I">
@@ -80,7 +82,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab header="Header I">
diff --git a/doc/accordion/ControlledDoc.vue b/doc/accordion/ControlledDoc.vue
index 93f204d50..4ef93f09e 100644
--- a/doc/accordion/ControlledDoc.vue
+++ b/doc/accordion/ControlledDoc.vue
@@ -39,7 +39,8 @@ export default {
         return {
             active: 0,
             code: {
-                basic: `<div class="pb-3">
+                basic: `
+<div class="pb-3">
     <Button @click="active = 0" text label="Activate 1st" />
     <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
     <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
@@ -65,7 +66,8 @@ export default {
         </p>
     </AccordionTab>
 </Accordion>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="pb-3">
             <Button @click="active = 0" text label="Activate 1st" />
@@ -105,7 +107,8 @@ export default {
         }
     }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="pb-3">
             <Button @click="active = 0" text label="Activate 1st" />
diff --git a/doc/accordion/DisabledDoc.vue b/doc/accordion/DisabledDoc.vue
index a26c73321..bef341147 100644
--- a/doc/accordion/DisabledDoc.vue
+++ b/doc/accordion/DisabledDoc.vue
@@ -33,7 +33,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Accordion :multiple="true" :activeIndex="[0]">
+                basic: `
+<Accordion :multiple="true" :activeIndex="[0]">
     <AccordionTab header="Header I">
         <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
@@ -55,7 +56,8 @@ export default {
     </AccordionTab>
     <AccordionTab header="Header IV" :disabled="true"> </AccordionTab>
 </Accordion>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Accordion :multiple="true" :activeIndex="[0]">
             <AccordionTab header="Header I">
@@ -83,7 +85,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Accordion :multiple="true" :activeIndex="[0]">
             <AccordionTab header="Header I">
diff --git a/doc/accordion/DynamicDoc.vue b/doc/accordion/DynamicDoc.vue
index 7ca3862fb..fdf8601c7 100644
--- a/doc/accordion/DynamicDoc.vue
+++ b/doc/accordion/DynamicDoc.vue
@@ -22,12 +22,14 @@ export default {
                 { title: 'Title 3', content: 'Content 3' }
             ],
             code: {
-                basic: `<Accordion :activeIndex="0">
+                basic: `
+<Accordion :activeIndex="0">
     <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </AccordionTab>
 </Accordion>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
@@ -50,7 +52,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
diff --git a/doc/accordion/ImportDoc.vue b/doc/accordion/ImportDoc.vue
index b3c594852..2f839980f 100644
--- a/doc/accordion/ImportDoc.vue
+++ b/doc/accordion/ImportDoc.vue
@@ -8,8 +8,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Accordion from 'primevue/accordion';
-import AccordionTab from 'primevue/accordiontab';`
+                basic: `
+import Accordion from 'primevue/accordion';
+import AccordionTab from 'primevue/accordiontab';
+`
             }
         };
     }
diff --git a/doc/accordion/MultipleDoc.vue b/doc/accordion/MultipleDoc.vue
index 5f156cd36..b45e90cff 100644
--- a/doc/accordion/MultipleDoc.vue
+++ b/doc/accordion/MultipleDoc.vue
@@ -32,7 +32,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Accordion :multiple="true" :activeIndex="[0]">
+                basic: `
+<Accordion :multiple="true" :activeIndex="[0]">
     <AccordionTab header="Header I">
         <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
@@ -53,7 +54,8 @@ export default {
         </p>
     </AccordionTab>
 </Accordion>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Accordion :multiple="true" :activeIndex="[0]">
             <AccordionTab header="Header I">
@@ -80,7 +82,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Accordion :multiple="true" :activeIndex="[0]">
             <AccordionTab header="Header I">
diff --git a/doc/accordion/TemplateDoc.vue b/doc/accordion/TemplateDoc.vue
index 86d90d5f1..7b1d2340b 100644
--- a/doc/accordion/TemplateDoc.vue
+++ b/doc/accordion/TemplateDoc.vue
@@ -45,7 +45,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Accordion class="accordion-custom" :activeIndex="0">
+                basic: `
+<Accordion class="accordion-custom" :activeIndex="0">
     <AccordionTab>
         <template #header>
             <i class="pi pi-calendar"></i>
@@ -78,7 +79,8 @@ export default {
         </p>
     </AccordionTab>
 </Accordion>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Accordion class="accordion-custom" :activeIndex="0">
             <AccordionTab>
@@ -133,7 +135,8 @@ export default {
     margin: 0;
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Accordion class="accordion-custom" :activeIndex="0">
             <AccordionTab>
diff --git a/doc/accordion/pt/PTDoc.vue b/doc/accordion/pt/PTDoc.vue
index a46546f82..58f860ab2 100644
--- a/doc/accordion/pt/PTDoc.vue
+++ b/doc/accordion/pt/PTDoc.vue
@@ -28,7 +28,8 @@ export default {
                 content: `Tab ${i + 1} Content`
             })),
             code: {
-                basic: `<Accordion :activeIndex="0">
+                basic: `
+<Accordion :activeIndex="0">
     <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
         :pt="{
             headerAction: ({ props, parent }) => ({
@@ -38,7 +39,8 @@ export default {
         <p>{{ tab.content }}</p>
     </AccordionTab>
 </Accordion>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
@@ -74,7 +76,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
diff --git a/doc/accordion/theming/TailwindDoc.vue b/doc/accordion/theming/TailwindDoc.vue
index af897f78b..e81028ee5 100644
--- a/doc/accordion/theming/TailwindDoc.vue
+++ b/doc/accordion/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -62,7 +62,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Accordion :activeIndex="0">
             <AccordionTab header="Header I">
diff --git a/doc/autocomplete/AccessibilityDoc.vue b/doc/autocomplete/AccessibilityDoc.vue
index e3e8fe45a..3aed121d3 100644
--- a/doc/autocomplete/AccessibilityDoc.vue
+++ b/doc/autocomplete/AccessibilityDoc.vue
@@ -161,7 +161,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<label for="ac1">;Username</label>
+                basic: `
+<label for="ac1">;Username</label>
 <AutoComplete inputId="ac1" />
 
 <span id="ac2">Email</span>
diff --git a/doc/autocomplete/BasicDoc.vue b/doc/autocomplete/BasicDoc.vue
index 94418b9ca..0f405724c 100644
--- a/doc/autocomplete/BasicDoc.vue
+++ b/doc/autocomplete/BasicDoc.vue
@@ -15,8 +15,10 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `<AutoComplete v-model="value" :suggestions="items" @complete="search" />`,
-                options: `<template>
+                basic: `
+<AutoComplete v-model="value" :suggestions="items" @complete="search" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
     </div>
@@ -37,7 +39,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
     </div>
diff --git a/doc/autocomplete/DisabledDoc.vue b/doc/autocomplete/DisabledDoc.vue
index 3e4bc7839..b5ec9650a 100644
--- a/doc/autocomplete/DisabledDoc.vue
+++ b/doc/autocomplete/DisabledDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<AutoComplete disabled placeholder="Disabled" />`,
-                options: `<template>
+                basic: `
+<AutoComplete disabled placeholder="Disabled" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete disabled placeholder="Disabled" />
     </div>
@@ -23,7 +25,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete disabled placeholder="Disabled" />
     </div>
diff --git a/doc/autocomplete/DropdownDoc.vue b/doc/autocomplete/DropdownDoc.vue
index 6ce0c6b32..1d4c63ac7 100644
--- a/doc/autocomplete/DropdownDoc.vue
+++ b/doc/autocomplete/DropdownDoc.vue
@@ -18,8 +18,10 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />`,
-                options: `<template>
+                basic: `
+<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
     </div>
@@ -42,7 +44,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />
     </div>
diff --git a/doc/autocomplete/FloatLabelDoc.vue b/doc/autocomplete/FloatLabelDoc.vue
index b1e573097..fa0821dde 100644
--- a/doc/autocomplete/FloatLabelDoc.vue
+++ b/doc/autocomplete/FloatLabelDoc.vue
@@ -18,11 +18,13 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `<span class="p-float-label">
+                basic: `
+<span class="p-float-label">
     <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
     <label for="ac">Float Label</label>
 </span>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
@@ -46,7 +48,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
diff --git a/doc/autocomplete/ForceSelectionDoc.vue b/doc/autocomplete/ForceSelectionDoc.vue
index 560822eeb..96e769ebf 100644
--- a/doc/autocomplete/ForceSelectionDoc.vue
+++ b/doc/autocomplete/ForceSelectionDoc.vue
@@ -18,8 +18,10 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />`,
-                options: `<template>
+                basic: `
+<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
     </div>
@@ -40,7 +42,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
     </div>
diff --git a/doc/autocomplete/GroupDoc.vue b/doc/autocomplete/GroupDoc.vue
index 4ba7b03a9..810732874 100644
--- a/doc/autocomplete/GroupDoc.vue
+++ b/doc/autocomplete/GroupDoc.vue
@@ -57,7 +57,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
+                basic: `
+<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
     <template #optiongroup="slotProps">
         <div class="flex align-items-center country-item">
             <img :alt="slotProps.item.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.item.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -65,7 +66,8 @@ export default {
         </div>
     </template>
 </AutoComplete>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
             <template #optiongroup="slotProps">
@@ -139,7 +141,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
             <template #optiongroup="slotProps">
diff --git a/doc/autocomplete/ImportDoc.vue b/doc/autocomplete/ImportDoc.vue
index cd49441a1..60f864b82 100644
--- a/doc/autocomplete/ImportDoc.vue
+++ b/doc/autocomplete/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import AutoComplete from 'primevue/autocomplete';`
+                basic: `
+import AutoComplete from 'primevue/autocomplete';
+`
             }
         };
     }
diff --git a/doc/autocomplete/InvalidDoc.vue b/doc/autocomplete/InvalidDoc.vue
index b5c06f5db..4f24ec053 100644
--- a/doc/autocomplete/InvalidDoc.vue
+++ b/doc/autocomplete/InvalidDoc.vue
@@ -15,8 +15,10 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />`,
-                options: `<template>
+                basic: `
+<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
     </div>
@@ -37,7 +39,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
     </div>
diff --git a/doc/autocomplete/MultipleDoc.vue b/doc/autocomplete/MultipleDoc.vue
index 5f5745696..34d4853a6 100644
--- a/doc/autocomplete/MultipleDoc.vue
+++ b/doc/autocomplete/MultipleDoc.vue
@@ -15,8 +15,10 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />`,
-                options: `<template>
+                basic: `
+<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />`,
+                options: `
+<template>
     <div class="card p-fluid">
         <AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
     </div>
@@ -37,7 +39,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid">
         <AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
     </div>
diff --git a/doc/autocomplete/ObjectsDoc.vue b/doc/autocomplete/ObjectsDoc.vue
index d27920a2d..0a2e2ecdc 100644
--- a/doc/autocomplete/ObjectsDoc.vue
+++ b/doc/autocomplete/ObjectsDoc.vue
@@ -21,8 +21,10 @@ export default {
             selectedCountry: null,
             filteredCountries: null,
             code: {
-                basic: `<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />`,
-                options: `<template>
+                basic: `
+<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
@@ -57,7 +59,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
diff --git a/doc/autocomplete/TemplateDoc.vue b/doc/autocomplete/TemplateDoc.vue
index 3d0808c58..4724bc025 100644
--- a/doc/autocomplete/TemplateDoc.vue
+++ b/doc/autocomplete/TemplateDoc.vue
@@ -27,7 +27,8 @@ export default {
             countries: null,
             filteredCountries: null,
             code: {
-                basic: `<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+                basic: `
+<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
     <template #option="slotProps">
         <div class="flex align-options-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -35,7 +36,8 @@ export default {
         </div>
     </template>
 </AutoComplete>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
             <template #option="slotProps">
@@ -77,7 +79,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
             <template #option="slotProps">
diff --git a/doc/autocomplete/VirtualScrollDoc.vue b/doc/autocomplete/VirtualScrollDoc.vue
index 2afdb9666..876443903 100644
--- a/doc/autocomplete/VirtualScrollDoc.vue
+++ b/doc/autocomplete/VirtualScrollDoc.vue
@@ -19,9 +19,11 @@ export default {
             selectedItem: null,
             filteredItems: null,
             code: {
-                basic: `<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
+                basic: `
+<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
     :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
     </div>
@@ -55,7 +57,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems" :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />
     </div>
diff --git a/doc/autocomplete/form/VeeValidateDoc.vue b/doc/autocomplete/form/VeeValidateDoc.vue
index 88c1cadf2..2d8aa9651 100644
--- a/doc/autocomplete/form/VeeValidateDoc.vue
+++ b/doc/autocomplete/form/VeeValidateDoc.vue
@@ -44,7 +44,8 @@ export default {
         return {
             items: [],
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="ac">Value</label>
@@ -54,7 +55,8 @@ export default {
         </form>
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="ac">Value</label>
@@ -105,7 +107,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="ac">Value</label>
diff --git a/doc/autocomplete/pt/PTDoc.vue b/doc/autocomplete/pt/PTDoc.vue
index 75cdf32fc..ab62970d0 100644
--- a/doc/autocomplete/pt/PTDoc.vue
+++ b/doc/autocomplete/pt/PTDoc.vue
@@ -23,7 +23,8 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `<AutoComplete
+                basic: `
+<AutoComplete
     v-model="value"
     :suggestions="items"
     @complete="search"
@@ -34,7 +35,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete
             v-model="value"
@@ -65,7 +67,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <AutoComplete
             v-model="value"
diff --git a/doc/autocomplete/theming/TailwindDoc.vue b/doc/autocomplete/theming/TailwindDoc.vue
index fd1225170..e8a6c2fb8 100644
--- a/doc/autocomplete/theming/TailwindDoc.vue
+++ b/doc/autocomplete/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -92,7 +91,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
     </div>
diff --git a/doc/avatar/AvatarGroupDoc.vue b/doc/avatar/AvatarGroupDoc.vue
index c68d03e1f..e9fe57b5c 100644
--- a/doc/avatar/AvatarGroupDoc.vue
+++ b/doc/avatar/AvatarGroupDoc.vue
@@ -20,7 +20,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<AvatarGroup>
+                basic: `
+<AvatarGroup>
     <Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle" />
     <Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" />
     <Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle" />
@@ -28,7 +29,8 @@ export default {
     <Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
     <Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
 </AvatarGroup>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <AvatarGroup>
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
@@ -44,7 +46,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <AvatarGroup>
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
diff --git a/doc/avatar/IconDoc.vue b/doc/avatar/IconDoc.vue
index f74ffede7..17a60f2a9 100644
--- a/doc/avatar/IconDoc.vue
+++ b/doc/avatar/IconDoc.vue
@@ -32,7 +32,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                basic: `
+<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
 <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
 <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
 
@@ -41,7 +42,8 @@ export default {
 <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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div class="flex-auto">
@@ -69,7 +71,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div class="flex-auto">
diff --git a/doc/avatar/ImageDoc.vue b/doc/avatar/ImageDoc.vue
index f793c6482..c2f86b95c 100644
--- a/doc/avatar/ImageDoc.vue
+++ b/doc/avatar/ImageDoc.vue
@@ -30,14 +30,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Avatar image="/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                basic: `
+<Avatar image="/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
 <Avatar image="/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
 <Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
 
 <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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div class="flex-auto">
@@ -63,7 +65,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div class="flex-auto">
diff --git a/doc/avatar/ImportDoc.vue b/doc/avatar/ImportDoc.vue
index d4fa8459c..a33086bfe 100644
--- a/doc/avatar/ImportDoc.vue
+++ b/doc/avatar/ImportDoc.vue
@@ -8,8 +8,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Avatar from 'primevue/avatar';
-import AvatarGroup from 'primevue/avatargroup';   //Optional for grouping`
+                basic: `
+import Avatar from 'primevue/avatar';
+import AvatarGroup from 'primevue/avatargroup';   //Optional for grouping
+`
             }
         };
     }
diff --git a/doc/avatar/LabelDoc.vue b/doc/avatar/LabelDoc.vue
index eba743307..28f2c8292 100644
--- a/doc/avatar/LabelDoc.vue
+++ b/doc/avatar/LabelDoc.vue
@@ -32,7 +32,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Avatar label="P" class="mr-2" size="xlarge" />
+                basic: `
+<Avatar label="P" class="mr-2" size="xlarge" />
 <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
 <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
 
@@ -41,7 +42,8 @@ export default {
 <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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="flex flex-wrap gap-5">
         <div class="flex-auto">
             <h5>Label</h5>
@@ -67,7 +69,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="flex flex-wrap gap-5">
         <div class="flex-auto">
             <h5>Label</h5>
diff --git a/doc/avatar/pt/PTDoc.vue b/doc/avatar/pt/PTDoc.vue
index 1b6af57e1..02a16e813 100644
--- a/doc/avatar/pt/PTDoc.vue
+++ b/doc/avatar/pt/PTDoc.vue
@@ -11,19 +11,22 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
+                basic: `
+<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
     :pt="{
         image: { class: 'w-4rem h-4rem' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
         :pt="{
             image: { class: 'w-4rem h-4rem' }
         }"
     />
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
         :pt="{
             image: { class: 'w-4rem h-4rem' }
diff --git a/doc/avatar/theming/TailwindDoc.vue b/doc/avatar/theming/TailwindDoc.vue
index b069450f8..9718052b1 100644
--- a/doc/avatar/theming/TailwindDoc.vue
+++ b/doc/avatar/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     avatar: {
         root: ({ props, parent }) => ({
             class: [
@@ -45,7 +44,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex flex-wrap gap-5">
             <div>
diff --git a/doc/badge/BasicDoc.vue b/doc/badge/BasicDoc.vue
index ec8013738..ac0baf0ab 100644
--- a/doc/badge/BasicDoc.vue
+++ b/doc/badge/BasicDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Badge value="2"></Badge>`,
-                options: `<template>
+                basic: `
+<Badge value="2"></Badge>`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Badge value="2"></Badge>
     </div>
@@ -23,7 +25,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Badge value="2"></Badge>
     </div>
diff --git a/doc/badge/ButtonDoc.vue b/doc/badge/ButtonDoc.vue
index 439b6f42b..a0e00bc5e 100644
--- a/doc/badge/ButtonDoc.vue
+++ b/doc/badge/ButtonDoc.vue
@@ -14,9 +14,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button type="button" label="Emails" badge="8" />
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
@@ -26,7 +28,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
diff --git a/doc/badge/ImportDoc.vue b/doc/badge/ImportDoc.vue
index 4d919da39..ea98142d1 100644
--- a/doc/badge/ImportDoc.vue
+++ b/doc/badge/ImportDoc.vue
@@ -8,13 +8,15 @@ export default {
     data() {
         return {
             code: {
-                basic: `// import as component
+                basic: `
+// import as component
 import Badge from 'primevue/badge';
 
 // import as directive
 import BadgeDirective from 'primevue/badgedirective';
 
-app.directive('badge', BadgeDirective);`
+app.directive('badge', BadgeDirective);
+`
             }
         };
     }
diff --git a/doc/badge/PositionDoc.vue b/doc/badge/PositionDoc.vue
index 63509d794..68a00a14a 100644
--- a/doc/badge/PositionDoc.vue
+++ b/doc/badge/PositionDoc.vue
@@ -15,10 +15,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-4">
         <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" />
@@ -29,7 +31,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-4">
         <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" />
diff --git a/doc/badge/SeverityDoc.vue b/doc/badge/SeverityDoc.vue
index 36d6f9849..6a8d2870c 100644
--- a/doc/badge/SeverityDoc.vue
+++ b/doc/badge/SeverityDoc.vue
@@ -17,12 +17,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Badge value="2"></Badge>
+                basic: `
+<Badge value="2"></Badge>
 <Badge value="8" severity="success"></Badge>
 <Badge value="4" severity="info"></Badge>
 <Badge value="12" severity="warning"></Badge>
 <Badge value="3" severity="danger"></Badge>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Badge value="2"></Badge>
         <Badge value="8" severity="success"></Badge>
@@ -35,7 +37,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Badge value="2"></Badge>
         <Badge value="8" severity="success"></Badge>
diff --git a/doc/badge/SizeDoc.vue b/doc/badge/SizeDoc.vue
index 81985fbfc..1e6079b4f 100644
--- a/doc/badge/SizeDoc.vue
+++ b/doc/badge/SizeDoc.vue
@@ -15,10 +15,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Badge value="6" size="xlarge" severity="success"></Badge>
+                basic: `
+<Badge value="6" size="xlarge" severity="success"></Badge>
 <Badge value="4" size="large" severity="warning"></Badge>
 <Badge value="2"></Badge>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
         <Badge value="6" size="xlarge" severity="success"></Badge>
         <Badge value="4" size="large" severity="warning"></Badge>
@@ -29,7 +31,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
         <Badge value="6" size="xlarge" severity="success"></Badge>
         <Badge value="4" size="large" severity="warning"></Badge>
diff --git a/doc/badge/pt/PTDoc.vue b/doc/badge/pt/PTDoc.vue
index f13b7fce4..ebdb96083 100644
--- a/doc/badge/pt/PTDoc.vue
+++ b/doc/badge/pt/PTDoc.vue
@@ -44,7 +44,8 @@ export default {
     }"
     class="pi pi-calendar text-4xl"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center align-items-center gap-2">
         // component
         <Badge
@@ -66,7 +67,8 @@ export default {
         />
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center align-items-center gap-2">
         // component
         <Badge
diff --git a/doc/badge/theming/TailwindDoc.vue b/doc/badge/theming/TailwindDoc.vue
index f67c1287d..94bd69eb8 100644
--- a/doc/badge/theming/TailwindDoc.vue
+++ b/doc/badge/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     directives: {
         badge: {
             root: ({ context }) => ({
@@ -65,7 +64,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-center gap-2">
         <Badge value="2"></Badge>
         <Badge value="8" severity="success"></Badge>
diff --git a/doc/blockui/BasicDoc.vue b/doc/blockui/BasicDoc.vue
index 0b4ccd1e8..976d8996f 100644
--- a/doc/blockui/BasicDoc.vue
+++ b/doc/blockui/BasicDoc.vue
@@ -25,7 +25,8 @@ export default {
         return {
             blocked: false,
             code: {
-                basic: `<div class="mb-3">
+                basic: `
+<div class="mb-3">
     <Button label="Block" @click="blocked = true" class="mr-2"></Button>
     <Button label="Unblock" @click="blocked = false"></Button>
 </div>
@@ -37,7 +38,8 @@ export default {
         </p>
     </Panel>
 </BlockUI>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="mb-3">
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>
@@ -63,7 +65,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="mb-3">
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>
diff --git a/doc/blockui/DocumentDoc.vue b/doc/blockui/DocumentDoc.vue
index b0a96cdcd..8ebf22fd0 100644
--- a/doc/blockui/DocumentDoc.vue
+++ b/doc/blockui/DocumentDoc.vue
@@ -15,9 +15,11 @@ export default {
         return {
             blocked: false,
             code: {
-                basic: `<BlockUI :blocked="blocked" fullScreen />
+                basic: `
+<BlockUI :blocked="blocked" fullScreen />
 <Button label="Block" @click="blocked = true" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <BlockUI :blocked="blocked" fullScreen />
         <Button label="Block" @click="blockDocument" />
@@ -42,7 +44,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <BlockUI :blocked="blocked" fullScreen />
         <Button label="Block" @click="blockDocument" />
diff --git a/doc/blockui/ImportDoc.vue b/doc/blockui/ImportDoc.vue
index 8478e48e9..a84efc319 100644
--- a/doc/blockui/ImportDoc.vue
+++ b/doc/blockui/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import BlockUI from 'primevue/blockui';`
+                basic: `
+import BlockUI from 'primevue/blockui';
+`
             }
         };
     }
diff --git a/doc/blockui/pt/PTDoc.vue b/doc/blockui/pt/PTDoc.vue
index 7aef09e8b..07f74e1f2 100644
--- a/doc/blockui/pt/PTDoc.vue
+++ b/doc/blockui/pt/PTDoc.vue
@@ -21,13 +21,15 @@ export default {
         return {
             blocked: false,
             code: {
-                basic: `<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
+                basic: `
+<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
     <p class="m-0">
         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>`,
-                options: `<template>
+                options: `
+<template>
     <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
         <p class="m-0">
             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.
@@ -35,7 +37,8 @@ export default {
         </p>
     </BlockUI>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
         <p class="m-0">
             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.
diff --git a/doc/blockui/theming/TailwindDoc.vue b/doc/blockui/theming/TailwindDoc.vue
index a01dde7c2..8470d20dd 100644
--- a/doc/blockui/theming/TailwindDoc.vue
+++ b/doc/blockui/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     blockui: {
         root: 'relative',
         mask: 'bg-black/40'
@@ -25,7 +24,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="mb-3">
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>
diff --git a/doc/breadcrumb/BasicDoc.vue b/doc/breadcrumb/BasicDoc.vue
index 3db9bf87b..7f0cda45d 100644
--- a/doc/breadcrumb/BasicDoc.vue
+++ b/doc/breadcrumb/BasicDoc.vue
@@ -18,8 +18,10 @@ export default {
             },
             items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
             code: {
-                basic: `<Breadcrumb :home="home" :model="items" />`,
-                options: `<template>
+                basic: `
+<Breadcrumb :home="home" :model="items" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items" />
     </div>
@@ -44,7 +46,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items" />
     </div>
diff --git a/doc/breadcrumb/ImportDoc.vue b/doc/breadcrumb/ImportDoc.vue
index c44e1b5c3..1d98d9796 100644
--- a/doc/breadcrumb/ImportDoc.vue
+++ b/doc/breadcrumb/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Breadcrumb from 'primevue/breadcrumb';`
+                basic: `
+import Breadcrumb from 'primevue/breadcrumb';
+`
             }
         };
     }
diff --git a/doc/breadcrumb/RouterDoc.vue b/doc/breadcrumb/RouterDoc.vue
index eb92679b9..1db6febca 100644
--- a/doc/breadcrumb/RouterDoc.vue
+++ b/doc/breadcrumb/RouterDoc.vue
@@ -34,7 +34,8 @@ export default {
             },
             items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
             code: {
-                basic: `<Breadcrumb :home="home" :model="items">
+                basic: `
+<Breadcrumb :home="home" :model="items">
     <template #item="{ label, item, props }">
         <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
             <a :href="routerProps.href" v-bind="props.action">
@@ -48,7 +49,8 @@ export default {
         </a>
     </template>
 </Breadcrumb>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{ label, item, props }">
@@ -86,7 +88,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{ label, item, props }">
diff --git a/doc/breadcrumb/TemplateDoc.vue b/doc/breadcrumb/TemplateDoc.vue
index fcdac89f9..d2271f7c7 100644
--- a/doc/breadcrumb/TemplateDoc.vue
+++ b/doc/breadcrumb/TemplateDoc.vue
@@ -21,14 +21,16 @@ export default {
             home: { icon: 'pi pi-home', url: 'https://primevue.org/' },
             items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }],
             code: {
-                basic: `<Breadcrumb :home="home" :model="items">
+                basic: `
+<Breadcrumb :home="home" :model="items">
     <template #item="item">
         <a :class="item.class">
             <span :class="item.icon"></span>
         </a>
     </template>
 </Breadcrumb>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{item}">
@@ -50,7 +52,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{item}">
diff --git a/doc/breadcrumb/pt/PTDoc.vue b/doc/breadcrumb/pt/PTDoc.vue
index f3324a932..ad55160ea 100644
--- a/doc/breadcrumb/pt/PTDoc.vue
+++ b/doc/breadcrumb/pt/PTDoc.vue
@@ -25,7 +25,8 @@ export default {
             },
             items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
             code: {
-                basic: `<Breadcrumb :home="home" :model="items"
+                basic: `
+<Breadcrumb :home="home" :model="items"
     :pt="{
         root: { class: 'surface-ground' },
         label: ({ props }) => ({
@@ -33,7 +34,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items"
             :pt="{
@@ -65,7 +67,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items"
             :pt="{
diff --git a/doc/breadcrumb/theming/TailwindDoc.vue b/doc/breadcrumb/theming/TailwindDoc.vue
index cd354fd57..d7d6c8c22 100644
--- a/doc/breadcrumb/theming/TailwindDoc.vue
+++ b/doc/breadcrumb/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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']
@@ -38,7 +37,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Breadcrumb :home="home" :model="items" />
     </div>
diff --git a/doc/button/AccessibilityDoc.vue b/doc/button/AccessibilityDoc.vue
index 99f9ee19a..d8e3069c8 100644
--- a/doc/button/AccessibilityDoc.vue
+++ b/doc/button/AccessibilityDoc.vue
@@ -40,7 +40,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button icon="pi pi-check" aria-label="Submit" />
+                basic: `
+<Button icon="pi pi-check" aria-label="Submit" />
 
 <Button icon="pi pi-check" label="Submit" />
 
diff --git a/doc/button/BadgesDoc.vue b/doc/button/BadgesDoc.vue
index 4c0ad28e2..c17f6ff03 100644
--- a/doc/button/BadgesDoc.vue
+++ b/doc/button/BadgesDoc.vue
@@ -14,9 +14,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button type="button" label="Emails" badge="8" />
+                basic: `
+<Button type="button" label="Emails" badge="8" />
 <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
@@ -25,7 +27,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
diff --git a/doc/button/BasicDoc.vue b/doc/button/BasicDoc.vue
index d26c760b5..88d32158c 100644
--- a/doc/button/BasicDoc.vue
+++ b/doc/button/BasicDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Submit" />`,
-                options: `<template>
+                basic: `
+<Button label="Submit" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Submit" />
     </div>
@@ -22,7 +24,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Submit" />
     </div>
diff --git a/doc/button/ButtonSetDoc.vue b/doc/button/ButtonSetDoc.vue
index ed4fd24f3..8036272c1 100644
--- a/doc/button/ButtonSetDoc.vue
+++ b/doc/button/ButtonSetDoc.vue
@@ -17,12 +17,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span class="p-buttonset">
+                basic: `
+<span class="p-buttonset">
     <Button label="Save" icon="pi pi-check" />
     <Button label="Delete" icon="pi pi-trash" />
     <Button label="Cancel" icon="pi pi-times" />
 </span>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-buttonset">
             <Button label="Save" icon="pi pi-check" />
@@ -34,7 +36,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-buttonset">
             <Button label="Save" icon="pi pi-check" />
diff --git a/doc/button/DisabledDoc.vue b/doc/button/DisabledDoc.vue
index e29159b57..daf94fcb7 100644
--- a/doc/button/DisabledDoc.vue
+++ b/doc/button/DisabledDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Submit" disabled />`,
-                options: `<template>
+                basic: `
+<Button label="Submit" disabled />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Submit" disabled />
     </div>
@@ -22,7 +24,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Submit" disabled />
     </div>
diff --git a/doc/button/IconOnlyDoc.vue b/doc/button/IconOnlyDoc.vue
index 9bf81c341..6f651d07d 100644
--- a/doc/button/IconOnlyDoc.vue
+++ b/doc/button/IconOnlyDoc.vue
@@ -61,7 +61,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button icon="pi pi-check" aria-label="Filter" />
+                basic: `
+<Button icon="pi pi-check" aria-label="Filter" />
 <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
 <Button icon="pi pi-search" severity="success" aria-label="Search" />
 <Button icon="pi pi-user" severity="info" aria-label="User" />
@@ -100,7 +101,8 @@ export default {
 <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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
             <Button icon="pi pi-check" aria-label="Filter" />
@@ -156,7 +158,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
             <Button icon="pi pi-check" aria-label="Filter" />
diff --git a/doc/button/IconsDoc.vue b/doc/button/IconsDoc.vue
index a04da1e30..d2fdbfb80 100644
--- a/doc/button/IconsDoc.vue
+++ b/doc/button/IconsDoc.vue
@@ -15,10 +15,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button icon="pi pi-check" aria-label="Submit" />
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-3  justify-content-center">
         <Button icon="pi pi-check" aria-label="Submit" />
         <Button label="Submit" icon="pi pi-check" />
@@ -28,7 +30,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-3  justify-content-center">
         <Button icon="pi pi-check" aria-label="Submit" />
         <Button label="Submit" icon="pi pi-check" />
diff --git a/doc/button/ImportDoc.vue b/doc/button/ImportDoc.vue
index d593509c7..e78448a6d 100644
--- a/doc/button/ImportDoc.vue
+++ b/doc/button/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Button from 'primevue/button';`
+                basic: `
+import Button from 'primevue/button';
+`
             }
         };
     }
diff --git a/doc/button/LinkDoc.vue b/doc/button/LinkDoc.vue
index 86fbd2154..bb29e24af 100644
--- a/doc/button/LinkDoc.vue
+++ b/doc/button/LinkDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Link" link />`,
-                options: `<template>
+                basic: `
+<Button label="Link" link />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Link" link />
     </div>
@@ -22,7 +24,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Link" link />
     </div>
diff --git a/doc/button/LoadingDoc.vue b/doc/button/LoadingDoc.vue
index 895bfa429..93f2a3878 100644
--- a/doc/button/LoadingDoc.vue
+++ b/doc/button/LoadingDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             loading: false,
             code: {
-                basic: `<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />`,
-                options: `<template>
+                basic: `
+<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
     </div>
@@ -38,7 +40,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />
     </div>
diff --git a/doc/button/OutlinedDoc.vue b/doc/button/OutlinedDoc.vue
index 9a4236037..b437c8a49 100644
--- a/doc/button/OutlinedDoc.vue
+++ b/doc/button/OutlinedDoc.vue
@@ -19,14 +19,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Primary" outlined />
+                basic: `
+<Button label="Primary" outlined />
 <Button label="Secondary" severity="secondary" outlined />
 <Button label="Success" severity="success" outlined />
 <Button label="Info" severity="info" outlined />
 <Button label="Warning" severity="warning" outlined />
 <Button label="Help" severity="help" outlined />
 <Button label="Danger" severity="danger" outlined />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" outlined />
         <Button label="Secondary" severity="secondary" outlined />
@@ -40,7 +42,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" outlined />
         <Button label="Secondary" severity="secondary" outlined />
diff --git a/doc/button/RaisedDoc.vue b/doc/button/RaisedDoc.vue
index 4838d83b6..a6e87230b 100644
--- a/doc/button/RaisedDoc.vue
+++ b/doc/button/RaisedDoc.vue
@@ -19,14 +19,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Primary" raised />
+                basic: `
+<Button label="Primary" raised />
 <Button label="Secondary" severity="secondary" raised />
 <Button label="Success" severity="success" raised />
 <Button label="Info" severity="info" raised />
 <Button label="Warning" severity="warning" raised />
 <Button label="Help" severity="help" raised />
 <Button label="Danger" severity="danger" raised />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" raised />
         <Button label="Secondary" severity="secondary" raised />
@@ -40,7 +42,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" raised />
         <Button label="Secondary" severity="secondary" raised />
diff --git a/doc/button/RaisedTextDoc.vue b/doc/button/RaisedTextDoc.vue
index 6220fe4e9..0643cfade 100644
--- a/doc/button/RaisedTextDoc.vue
+++ b/doc/button/RaisedTextDoc.vue
@@ -20,7 +20,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Primary" text raised />
+                basic: `
+<Button label="Primary" text raised />
 <Button label="Secondary" severity="secondary" text raised />
 <Button label="Success" severity="success" text raised />
 <Button label="Info" severity="info" text raised />
@@ -28,7 +29,8 @@ export default {
 <Button label="Help" severity="help" text raised />
 <Button label="Danger" severity="danger" text raised />
 <Button label="Plain" plain text raised />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" text raised />
         <Button label="Secondary" severity="secondary" text raised />
@@ -43,7 +45,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" text raised />
         <Button label="Secondary" severity="secondary" text raised />
diff --git a/doc/button/RoundedDoc.vue b/doc/button/RoundedDoc.vue
index 26e3e56f8..0cccd2082 100644
--- a/doc/button/RoundedDoc.vue
+++ b/doc/button/RoundedDoc.vue
@@ -19,14 +19,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Primary" rounded />
+                basic: `
+<Button label="Primary" rounded />
 <Button label="Secondary" severity="secondary" rounded />
 <Button label="Success" severity="success" rounded />
 <Button label="Info" severity="info" rounded />
 <Button label="Warning" severity="warning" rounded />
 <Button label="Help" severity="help" rounded />
 <Button label="Danger" severity="danger" rounded />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" rounded />
         <Button label="Secondary" severity="secondary" rounded />
@@ -40,7 +42,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" rounded />
         <Button label="Secondary" severity="secondary" rounded />
diff --git a/doc/button/SeverityDoc.vue b/doc/button/SeverityDoc.vue
index 4344da36f..a650dddf8 100644
--- a/doc/button/SeverityDoc.vue
+++ b/doc/button/SeverityDoc.vue
@@ -19,14 +19,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Primary" />
+                basic: `
+<Button label="Primary" />
 <Button label="Secondary" severity="secondary" />
 <Button label="Success" severity="success" />
 <Button label="Info" severity="info" />
 <Button label="Warning" severity="warning" />
 <Button label="Help" severity="help" />
 <Button label="Danger" severity="danger" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" />
         <Button label="Secondary" severity="secondary" />
@@ -40,7 +42,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" />
         <Button label="Secondary" severity="secondary" />
diff --git a/doc/button/SizesDoc.vue b/doc/button/SizesDoc.vue
index 970b2f74d..c60b69aef 100644
--- a/doc/button/SizesDoc.vue
+++ b/doc/button/SizesDoc.vue
@@ -15,10 +15,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Small" icon="pi pi-check" size="small" />
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
         <Button label="Small" icon="pi pi-check" size="small" />
         <Button label="Normal" icon="pi pi-check" />
@@ -28,7 +30,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
         <Button label="Small" icon="pi pi-check" size="small" />
         <Button label="Normal" icon="pi pi-check" />
diff --git a/doc/button/TemplateDoc.vue b/doc/button/TemplateDoc.vue
index 8adee911a..67c3a8bf2 100644
--- a/doc/button/TemplateDoc.vue
+++ b/doc/button/TemplateDoc.vue
@@ -15,10 +15,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
+                basic: `
+<Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
     <img alt="logo" src="/images/logo.svg" class="h-2rem" />
 </Button>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
             <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-light.svg" class="h-2rem" />
@@ -28,7 +30,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button class="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
             <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-light.svg" class="h-2rem" />
diff --git a/doc/button/TextDoc.vue b/doc/button/TextDoc.vue
index 276a87241..fd4d8d29e 100644
--- a/doc/button/TextDoc.vue
+++ b/doc/button/TextDoc.vue
@@ -20,7 +20,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Primary" text />
+                basic: `
+<Button label="Primary" text />
 <Button label="Secondary" severity="secondary" text />
 <Button label="Success" severity="success" text />
 <Button label="Info" severity="info" text />
@@ -28,7 +29,8 @@ export default {
 <Button label="Help" severity="help" text />
 <Button label="Danger" severity="danger" text />
 <Button label="Plain" plain text />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" text />
         <Button label="Secondary" severity="secondary" text />
@@ -43,7 +45,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" text />
         <Button label="Secondary" severity="secondary" text />
diff --git a/doc/button/pt/PTDoc.vue b/doc/button/pt/PTDoc.vue
index 4802d7b19..4b9384fcc 100644
--- a/doc/button/pt/PTDoc.vue
+++ b/doc/button/pt/PTDoc.vue
@@ -11,12 +11,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Submit" icon="pi pi-check"
+                basic: `
+<Button label="Submit" icon="pi pi-check"
     :pt="{ 
         root: { class: 'bg-indigo-600 border-indigo-600' } 
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-3 justify-content-center">
         <Button label="Submit" icon="pi pi-check"
             :pt="{ 
@@ -25,7 +27,8 @@ export default {
         />
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-3 justify-content-center">
         <Button label="Submit" icon="pi pi-check"
             :pt="{ 
diff --git a/doc/button/theming/TailwindDoc.vue b/doc/button/theming/TailwindDoc.vue
index 9c961b0fd..b0c692f4f 100644
--- a/doc/button/theming/TailwindDoc.vue
+++ b/doc/button/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     button: {
         root: ({ props, context }) => ({
             class: [
@@ -94,7 +93,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center flex-wrap gap-3">
         <Button label="Primary" />
         <Button label="Secondary" severity="secondary" />
diff --git a/doc/calendar/AccessibilityDoc.vue b/doc/calendar/AccessibilityDoc.vue
index c253505c0..76e4409ef 100644
--- a/doc/calendar/AccessibilityDoc.vue
+++ b/doc/calendar/AccessibilityDoc.vue
@@ -195,7 +195,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<label for="date1">Date</label>
+                basic: `
+<label for="date1">Date</label>
 <Calendar inputId="date1" />
 
 <span id="date2">Date</span>
diff --git a/doc/calendar/BasicDoc.vue b/doc/calendar/BasicDoc.vue
index 9afd581c6..af940fd2b 100644
--- a/doc/calendar/BasicDoc.vue
+++ b/doc/calendar/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" />
     </div>
diff --git a/doc/calendar/ButtonBarDoc.vue b/doc/calendar/ButtonBarDoc.vue
index 5706ba882..09f9394f8 100644
--- a/doc/calendar/ButtonBarDoc.vue
+++ b/doc/calendar/ButtonBarDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" showButtonBar />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" showButtonBar />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" showButtonBar />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" showButtonBar />
     </div>
diff --git a/doc/calendar/DateTemplateDoc.vue b/doc/calendar/DateTemplateDoc.vue
index de89c003f..a5c517709 100644
--- a/doc/calendar/DateTemplateDoc.vue
+++ b/doc/calendar/DateTemplateDoc.vue
@@ -19,13 +19,15 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date">
+                basic: `
+<Calendar v-model="date">
     <template #date="slotProps">
         <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date">
             <template #date="slotProps">
@@ -45,7 +47,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date">
             <template #date="slotProps">
diff --git a/doc/calendar/DisabledDoc.vue b/doc/calendar/DisabledDoc.vue
index 66ccdedd1..2f7576808 100644
--- a/doc/calendar/DisabledDoc.vue
+++ b/doc/calendar/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" disabled />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" disabled />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" disabled />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" disabled />
     </div>
diff --git a/doc/calendar/FloatLabelDoc.vue b/doc/calendar/FloatLabelDoc.vue
index 441adc905..53b680e90 100644
--- a/doc/calendar/FloatLabelDoc.vue
+++ b/doc/calendar/FloatLabelDoc.vue
@@ -17,11 +17,13 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<span class="p-float-label">
+                basic: `
+<span class="p-float-label">
     <Calendar v-model="date" inputId="birth_date" />
     <label for="birth_date">Birth Date</label>
 </span>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Calendar v-model="date" inputId="birth_date" />
@@ -39,7 +41,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Calendar v-model="date" inputId="birth_date" />
diff --git a/doc/calendar/FormatDoc.vue b/doc/calendar/FormatDoc.vue
index 3e11fd99d..6f9e804a7 100644
--- a/doc/calendar/FormatDoc.vue
+++ b/doc/calendar/FormatDoc.vue
@@ -33,8 +33,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" dateFormat="dd/mm/yy" />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" dateFormat="dd/mm/yy" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" dateFormat="dd/mm/yy" />
     </div>
@@ -49,7 +51,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" dateFormat="dd/mm/yy" />
     </div>
diff --git a/doc/calendar/IconDoc.vue b/doc/calendar/IconDoc.vue
index 82bfb10fc..cf63943f6 100644
--- a/doc/calendar/IconDoc.vue
+++ b/doc/calendar/IconDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" showIcon />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" showIcon />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" showIcon />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" showIcon />
     </div>
diff --git a/doc/calendar/ImportDoc.vue b/doc/calendar/ImportDoc.vue
index cb5966c1a..8561631cf 100644
--- a/doc/calendar/ImportDoc.vue
+++ b/doc/calendar/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Calendar from 'primevue/calendar';`
+                basic: `
+import Calendar from 'primevue/calendar';
+`
             }
         };
     }
diff --git a/doc/calendar/InlineDoc.vue b/doc/calendar/InlineDoc.vue
index 51ceb4c85..5e0b079bb 100644
--- a/doc/calendar/InlineDoc.vue
+++ b/doc/calendar/InlineDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" inline showWeek />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" inline showWeek />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" inline showWeek />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" inline showWeek />
     </div>
diff --git a/doc/calendar/InvalidDoc.vue b/doc/calendar/InvalidDoc.vue
index c697172a0..d1faeb76a 100644
--- a/doc/calendar/InvalidDoc.vue
+++ b/doc/calendar/InvalidDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" class="p-invalid" />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" class="p-invalid" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" class="p-invalid" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" class="p-invalid" />
     </div>
diff --git a/doc/calendar/MinMaxDoc.vue b/doc/calendar/MinMaxDoc.vue
index 35e606be4..496f60e83 100644
--- a/doc/calendar/MinMaxDoc.vue
+++ b/doc/calendar/MinMaxDoc.vue
@@ -16,8 +16,10 @@ export default {
             minDate: null,
             maxDate: null,
             code: {
-                basic: `<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
     </div>
@@ -50,7 +52,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
     </div>
diff --git a/doc/calendar/MonthPickerDoc.vue b/doc/calendar/MonthPickerDoc.vue
index 255e3ff90..9ca78a949 100644
--- a/doc/calendar/MonthPickerDoc.vue
+++ b/doc/calendar/MonthPickerDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" view="month" dateFormat="mm/yy" />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" view="month" dateFormat="mm/yy" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" view="month" dateFormat="mm/yy" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" view="month" dateFormat="mm/yy" />
     </div>
diff --git a/doc/calendar/MultipleDoc.vue b/doc/calendar/MultipleDoc.vue
index a0e28e96d..89fa42fbd 100644
--- a/doc/calendar/MultipleDoc.vue
+++ b/doc/calendar/MultipleDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             dates: null,
             code: {
-                basic: `<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />
     </div>
diff --git a/doc/calendar/MultipleMonthsDoc.vue b/doc/calendar/MultipleMonthsDoc.vue
index 6c6d75730..3a61aaa35 100644
--- a/doc/calendar/MultipleMonthsDoc.vue
+++ b/doc/calendar/MultipleMonthsDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" :numberOfMonths="2" />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" :numberOfMonths="2" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" :numberOfMonths="2" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" :numberOfMonths="2" />
     </div>
diff --git a/doc/calendar/RangeDoc.vue b/doc/calendar/RangeDoc.vue
index b321346f1..f9e95f0f3 100644
--- a/doc/calendar/RangeDoc.vue
+++ b/doc/calendar/RangeDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             dates: null,
             code: {
-                basic: `<Calendar v-model="dates" selectionMode="range" :manualInput="false" />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="dates" selectionMode="range" :manualInput="false" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="dates" selectionMode="range" :manualInput="false" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="dates" selectionMode="range" :manualInput="false" />
     </div>
diff --git a/doc/calendar/TimeDoc.vue b/doc/calendar/TimeDoc.vue
index 44b647016..f126e6d7e 100644
--- a/doc/calendar/TimeDoc.vue
+++ b/doc/calendar/TimeDoc.vue
@@ -27,10 +27,12 @@ export default {
             datetime24h: null,
             time: null,
             code: {
-                basic: `<Calendar id="calendar-12h" v-model="datetime12h" showTime hourFormat="12" />
+                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 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>
@@ -58,7 +60,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="calendar-12h" class="font-bold block mb-2"> 12h Format </label>
diff --git a/doc/calendar/TouchUIDoc.vue b/doc/calendar/TouchUIDoc.vue
index ba7ab3cc3..5a2f33473 100644
--- a/doc/calendar/TouchUIDoc.vue
+++ b/doc/calendar/TouchUIDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" touchUI />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" touchUI />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" touchUI />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" touchUI />
     </div>
diff --git a/doc/calendar/YearPickerDoc.vue b/doc/calendar/YearPickerDoc.vue
index e5347efe7..f65a3442e 100644
--- a/doc/calendar/YearPickerDoc.vue
+++ b/doc/calendar/YearPickerDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" view="year" dateFormat="yy" />`,
-                options: `<template>
+                basic: `
+<Calendar v-model="date" view="year" dateFormat="yy" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" view="year" dateFormat="yy" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar v-model="date" view="year" dateFormat="yy" />
     </div>
diff --git a/doc/calendar/form/VeeValidateDoc.vue b/doc/calendar/form/VeeValidateDoc.vue
index a270c0d0c..ef63e0f46 100644
--- a/doc/calendar/form/VeeValidateDoc.vue
+++ b/doc/calendar/form/VeeValidateDoc.vue
@@ -43,7 +43,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="date">Date</label>
@@ -54,7 +55,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="date">Date</label>
@@ -95,7 +97,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="date">Date</label>
diff --git a/doc/calendar/pt/PTDoc.vue b/doc/calendar/pt/PTDoc.vue
index 00159f28d..539915e3a 100644
--- a/doc/calendar/pt/PTDoc.vue
+++ b/doc/calendar/pt/PTDoc.vue
@@ -21,7 +21,8 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar
+                basic: `
+<Calendar
     v-model="date"
     showIcon
     :pt="{
@@ -31,7 +32,8 @@ export default {
         }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar
             v-model="date"
@@ -55,7 +57,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Calendar
             v-model="date"
diff --git a/doc/calendar/theming/TailwindDoc.vue b/doc/calendar/theming/TailwindDoc.vue
index 9f7ea2214..c16e4a718 100644
--- a/doc/calendar/theming/TailwindDoc.vue
+++ b/doc/calendar/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -151,7 +150,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Calendar v-model="date" />
     </div>
diff --git a/doc/card/AccessibilityDoc.vue b/doc/card/AccessibilityDoc.vue
index 7879d7407..fe2da1bcb 100644
--- a/doc/card/AccessibilityDoc.vue
+++ b/doc/card/AccessibilityDoc.vue
@@ -18,7 +18,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Card role="region">
+                basic: `
+<Card role="region">
     Content
 </Card>`
             }
diff --git a/doc/card/AdvancedDoc.vue b/doc/card/AdvancedDoc.vue
index 66989f86b..068ceaea6 100644
--- a/doc/card/AdvancedDoc.vue
+++ b/doc/card/AdvancedDoc.vue
@@ -29,7 +29,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Card style="width: 25em">
+                basic: `
+<Card style="width: 25em">
     <template #header>
         <img alt="user header" src="/images/usercard.png" />
     </template>
@@ -46,7 +47,8 @@ export default {
         <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
     </template>
 </Card>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex align-items-center justify-content-center">
         <Card style="width: 25em">
             <template #header>
@@ -70,7 +72,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex align-items-center justify-content-center">
         <Card style="width: 25em">
             <template #header>
diff --git a/doc/card/ImportDoc.vue b/doc/card/ImportDoc.vue
index 2b9306e5c..4837420d5 100644
--- a/doc/card/ImportDoc.vue
+++ b/doc/card/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Card from 'primevue/card';`
+                basic: `
+import Card from 'primevue/card';
+`
             }
         };
     }
diff --git a/doc/card/pt/PTDoc.vue b/doc/card/pt/PTDoc.vue
index 08529ebe3..ed10bb1b4 100644
--- a/doc/card/pt/PTDoc.vue
+++ b/doc/card/pt/PTDoc.vue
@@ -19,7 +19,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
+                basic: `
+<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
     <template #title> Simple Card </template>
     <template #content>
         <p>
@@ -28,7 +29,8 @@ export default {
         </p>
     </template>
 </Card>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
             <template #title> Simple Card </template>
@@ -41,7 +43,8 @@ export default {
         </Card>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
             <template #title> Simple Card </template>
diff --git a/doc/card/theming/TailwindDoc.vue b/doc/card/theming/TailwindDoc.vue
index 52e7d1ec7..f91d756be 100644
--- a/doc/card/theming/TailwindDoc.vue
+++ b/doc/card/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     card: {
         root: {
             class: [
@@ -39,7 +38,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex items-center justify-center">
         <Card style="width: 25em">
             <template #header>
diff --git a/doc/carousel/BasicDoc.vue b/doc/carousel/BasicDoc.vue
index 857a0548d..de5c310df 100644
--- a/doc/carousel/BasicDoc.vue
+++ b/doc/carousel/BasicDoc.vue
@@ -51,7 +51,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+                basic: `
+<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
@@ -69,7 +70,8 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
@@ -140,7 +142,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
diff --git a/doc/carousel/CircularDoc.vue b/doc/carousel/CircularDoc.vue
index 8a079db23..8594ff9dd 100644
--- a/doc/carousel/CircularDoc.vue
+++ b/doc/carousel/CircularDoc.vue
@@ -52,7 +52,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
+                basic: `
+<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
@@ -71,7 +72,8 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">
@@ -143,7 +145,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">
diff --git a/doc/carousel/ImportDoc.vue b/doc/carousel/ImportDoc.vue
index 05e4de167..31ce36cd1 100644
--- a/doc/carousel/ImportDoc.vue
+++ b/doc/carousel/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Carousel from 'primevue/carousel';`
+                basic: `
+import Carousel from 'primevue/carousel';
+`
             }
         };
     }
diff --git a/doc/carousel/NumScrollDoc.vue b/doc/carousel/NumScrollDoc.vue
index 317b0c489..7ee516a6d 100644
--- a/doc/carousel/NumScrollDoc.vue
+++ b/doc/carousel/NumScrollDoc.vue
@@ -52,7 +52,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
+                basic: `
+<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
@@ -71,7 +72,8 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
@@ -143,7 +145,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
diff --git a/doc/carousel/ResponsiveDoc.vue b/doc/carousel/ResponsiveDoc.vue
index 0924d37bd..0616e66c1 100644
--- a/doc/carousel/ResponsiveDoc.vue
+++ b/doc/carousel/ResponsiveDoc.vue
@@ -55,7 +55,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
+                basic: `
+<Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
@@ -74,7 +75,8 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
@@ -146,7 +148,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
diff --git a/doc/carousel/VerticalDoc.vue b/doc/carousel/VerticalDoc.vue
index 66c88d0d3..f9a7f62e4 100644
--- a/doc/carousel/VerticalDoc.vue
+++ b/doc/carousel/VerticalDoc.vue
@@ -52,7 +52,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
+                basic: `
+<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
     :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
@@ -72,7 +73,8 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
             :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
@@ -145,7 +147,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px"
             :responsiveOptions="responsiveOptions" containerClass="w-30rem" contentClass="flex align-items-center">
diff --git a/doc/carousel/pt/PTDoc.vue b/doc/carousel/pt/PTDoc.vue
index 7dadf9d31..32be965ab 100644
--- a/doc/carousel/pt/PTDoc.vue
+++ b/doc/carousel/pt/PTDoc.vue
@@ -56,7 +56,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Carousel
+                basic: `
+<Carousel
     :value="products"
     :numVisible="3"
     :numScroll="3"
@@ -82,7 +83,8 @@ export default {
         </div>
     </template>
 </Carousel>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Carousel
             :value="products"
@@ -161,7 +163,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Carousel
             :value="products"
diff --git a/doc/carousel/theming/TailwindDoc.vue b/doc/carousel/theming/TailwindDoc.vue
index ef711e139..157615320 100644
--- a/doc/carousel/theming/TailwindDoc.vue
+++ b/doc/carousel/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded :service="['ProductService']" />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     carousel: {
         root: 'flex flex-col',
         content: 'flex flex-col overflow-auto',
@@ -70,7 +69,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
diff --git a/doc/cascadeselect/AccessibilityDoc.vue b/doc/cascadeselect/AccessibilityDoc.vue
index 9cf5dc53c..172c1cd91 100644
--- a/doc/cascadeselect/AccessibilityDoc.vue
+++ b/doc/cascadeselect/AccessibilityDoc.vue
@@ -123,7 +123,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="dd1"></span>Options</span>
+                basic: `
+<span id="dd1"></span>Options</span>
 <CascadeSelect aria-labelledby="dd1" />
 
 <CascadeSelect aria-label="Options" />`
diff --git a/doc/cascadeselect/BasicDoc.vue b/doc/cascadeselect/BasicDoc.vue
index 1e0b87e1f..4f7119050 100644
--- a/doc/cascadeselect/BasicDoc.vue
+++ b/doc/cascadeselect/BasicDoc.vue
@@ -91,9 +91,11 @@ export default {
                 }
             ],
             code: {
-                basic: `<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+                basic: `
+<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
     :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
@@ -183,7 +185,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
diff --git a/doc/cascadeselect/DisabledDoc.vue b/doc/cascadeselect/DisabledDoc.vue
index a7b224959..2062ca28e 100644
--- a/doc/cascadeselect/DisabledDoc.vue
+++ b/doc/cascadeselect/DisabledDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />`,
-                options: `<template>
+                basic: `
+<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
     </div>
@@ -23,7 +25,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
     </div>
diff --git a/doc/cascadeselect/FloatLabelDoc.vue b/doc/cascadeselect/FloatLabelDoc.vue
index 5f5045b5a..6ceff09a6 100644
--- a/doc/cascadeselect/FloatLabelDoc.vue
+++ b/doc/cascadeselect/FloatLabelDoc.vue
@@ -91,12 +91,14 @@ export default {
                 }
             ],
             code: {
-                basic: `<span class="p-float-label">
+                basic: `
+<span class="p-float-label">
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
@@ -189,7 +191,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
diff --git a/doc/cascadeselect/ImportDoc.vue b/doc/cascadeselect/ImportDoc.vue
index 1bd17a003..3b078fb3b 100644
--- a/doc/cascadeselect/ImportDoc.vue
+++ b/doc/cascadeselect/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import CascadeSelect from 'primevue/cascadeselect';`
+                basic: `
+import CascadeSelect from 'primevue/cascadeselect';
+`
             }
         };
     }
diff --git a/doc/cascadeselect/InvalidDoc.vue b/doc/cascadeselect/InvalidDoc.vue
index b6e658839..fa7856371 100644
--- a/doc/cascadeselect/InvalidDoc.vue
+++ b/doc/cascadeselect/InvalidDoc.vue
@@ -88,9 +88,11 @@ export default {
                 }
             ],
             code: {
-                basic: `<CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
@@ -180,7 +182,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
diff --git a/doc/cascadeselect/LoadingStateDoc.vue b/doc/cascadeselect/LoadingStateDoc.vue
index 861be1caa..f117b9a2a 100644
--- a/doc/cascadeselect/LoadingStateDoc.vue
+++ b/doc/cascadeselect/LoadingStateDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />`,
-                options: `<template>
+                basic: `
+<CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />
     </div>
@@ -23,7 +25,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />
     </div>
diff --git a/doc/cascadeselect/TemplateDoc.vue b/doc/cascadeselect/TemplateDoc.vue
index fa9a21603..9cba80708 100644
--- a/doc/cascadeselect/TemplateDoc.vue
+++ b/doc/cascadeselect/TemplateDoc.vue
@@ -100,7 +100,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+                basic: `
+<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
     :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
     <template #option="slotProps">
         <div class="flex align-items-center">
@@ -111,7 +112,8 @@ export default {
         </div>
     </template>
 </CascadeSelect>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
@@ -210,7 +212,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
diff --git a/doc/cascadeselect/form/VeeValidateDoc.vue b/doc/cascadeselect/form/VeeValidateDoc.vue
index 603204c66..d767c7377 100644
--- a/doc/cascadeselect/form/VeeValidateDoc.vue
+++ b/doc/cascadeselect/form/VeeValidateDoc.vue
@@ -127,7 +127,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
@@ -138,7 +139,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
@@ -258,7 +260,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <CascadeSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="countries" optionLabel="cname"
diff --git a/doc/cascadeselect/pt/PTDoc.vue b/doc/cascadeselect/pt/PTDoc.vue
index 214678d26..044d74e55 100644
--- a/doc/cascadeselect/pt/PTDoc.vue
+++ b/doc/cascadeselect/pt/PTDoc.vue
@@ -96,7 +96,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<CascadeSelect
+                basic: `
+<CascadeSelect
     v-model="selectedCity"
     :options="countries"
     optionLabel="cname"
@@ -107,7 +108,8 @@ export default {
         root: { style: { minWidth: '14rem' } }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect
             v-model="selectedCity"
@@ -206,7 +208,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect
             v-model="selectedCity"
diff --git a/doc/cascadeselect/theming/TailwindDoc.vue b/doc/cascadeselect/theming/TailwindDoc.vue
index d873a976d..ab6d61052 100644
--- a/doc/cascadeselect/theming/TailwindDoc.vue
+++ b/doc/cascadeselect/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -62,7 +61,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
diff --git a/doc/chart/AccessibilityDoc.vue b/doc/chart/AccessibilityDoc.vue
index 372191d1a..7435c5d43 100644
--- a/doc/chart/AccessibilityDoc.vue
+++ b/doc/chart/AccessibilityDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" />`
+                basic: `
+<Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" />`
             }
         };
     }
diff --git a/doc/chart/BasicDoc.vue b/doc/chart/BasicDoc.vue
index e7261ac39..74802a4e0 100644
--- a/doc/chart/BasicDoc.vue
+++ b/doc/chart/BasicDoc.vue
@@ -35,8 +35,10 @@ export default {
                 }
             },
             code: {
-                basic: `<Chart type="bar" :data="chartData" :options="chartOptions" />`,
-                options: `<template>
+                basic: `
+<Chart type="bar" :data="chartData" :options="chartOptions" />`,
+                options: `
+<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" />
     </div>
@@ -69,7 +71,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" />
     </div>
diff --git a/doc/chart/ComboDoc.vue b/doc/chart/ComboDoc.vue
index 8880a682b..b4f649a2c 100644
--- a/doc/chart/ComboDoc.vue
+++ b/doc/chart/ComboDoc.vue
@@ -15,8 +15,10 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />`,
-                options: `<template>
+                basic: `
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+                options: `
+<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
@@ -106,7 +108,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
diff --git a/doc/chart/DoughnutDoc.vue b/doc/chart/DoughnutDoc.vue
index f2228a77d..e9a3a1804 100644
--- a/doc/chart/DoughnutDoc.vue
+++ b/doc/chart/DoughnutDoc.vue
@@ -17,8 +17,10 @@ export default {
                 cutout: '60%'
             },
             code: {
-                basic: `<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
-                options: `<template>
+                basic: `
+<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
@@ -55,7 +57,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
diff --git a/doc/chart/HorizontalBarDoc.vue b/doc/chart/HorizontalBarDoc.vue
index 4ce9aa924..1fa0fe6f7 100644
--- a/doc/chart/HorizontalBarDoc.vue
+++ b/doc/chart/HorizontalBarDoc.vue
@@ -15,8 +15,10 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />`,
-                options: `<template>
+                basic: `
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />`,
+                options: `
+<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
     </div>
@@ -101,7 +103,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
     </div>
diff --git a/doc/chart/ImportDoc.vue b/doc/chart/ImportDoc.vue
index 13a592f96..45149eca6 100644
--- a/doc/chart/ImportDoc.vue
+++ b/doc/chart/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Chart from 'primevue/chart';`
+                basic: `
+import Chart from 'primevue/chart';
+`
             }
         };
     }
diff --git a/doc/chart/LineDoc.vue b/doc/chart/LineDoc.vue
index f26511a5e..646e3786f 100644
--- a/doc/chart/LineDoc.vue
+++ b/doc/chart/LineDoc.vue
@@ -15,8 +15,10 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
-                options: `<template>
+                basic: `
+<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+                options: `
+<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
@@ -97,7 +99,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
diff --git a/doc/chart/LineStylesDoc.vue b/doc/chart/LineStylesDoc.vue
index 6f39a2926..e5aec7f95 100644
--- a/doc/chart/LineStylesDoc.vue
+++ b/doc/chart/LineStylesDoc.vue
@@ -15,8 +15,10 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
-                options: `<template>
+                basic: `
+<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+                options: `
+<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
@@ -106,7 +108,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
diff --git a/doc/chart/MultiAxisDoc.vue b/doc/chart/MultiAxisDoc.vue
index 2732debfb..5ca0f7ca8 100644
--- a/doc/chart/MultiAxisDoc.vue
+++ b/doc/chart/MultiAxisDoc.vue
@@ -15,8 +15,10 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
-                options: `<template>
+                basic: `
+<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+                options: `
+<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
@@ -115,7 +117,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
diff --git a/doc/chart/PieChartDoc.vue b/doc/chart/PieChartDoc.vue
index 6b9c2a98b..b1a258bc6 100644
--- a/doc/chart/PieChartDoc.vue
+++ b/doc/chart/PieChartDoc.vue
@@ -23,8 +23,10 @@ export default {
                 }
             },
             code: {
-                basic: `<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
-                options: `<template>
+                basic: `
+<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
@@ -67,7 +69,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
diff --git a/doc/chart/PolarAreaDoc.vue b/doc/chart/PolarAreaDoc.vue
index 5b648d854..0892e3674 100644
--- a/doc/chart/PolarAreaDoc.vue
+++ b/doc/chart/PolarAreaDoc.vue
@@ -15,8 +15,10 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
-                options: `<template>
+                basic: `
+<Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
@@ -80,7 +82,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Chart type="polarArea" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
diff --git a/doc/chart/RadarDoc.vue b/doc/chart/RadarDoc.vue
index 7ed7195ec..01855b3b2 100644
--- a/doc/chart/RadarDoc.vue
+++ b/doc/chart/RadarDoc.vue
@@ -15,8 +15,10 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
-                options: `<template>
+                basic: `
+<Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
@@ -88,7 +90,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Chart type="radar" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
     </div>
diff --git a/doc/chart/StackedBarDoc.vue b/doc/chart/StackedBarDoc.vue
index 8bc63ed78..3b135b5fb 100644
--- a/doc/chart/StackedBarDoc.vue
+++ b/doc/chart/StackedBarDoc.vue
@@ -15,8 +15,10 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />`,
-                options: `<template>
+                basic: `
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />`,
+                options: `
+<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
@@ -107,7 +109,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
     </div>
diff --git a/doc/chart/VerticalBarDoc.vue b/doc/chart/VerticalBarDoc.vue
index 198e2ff12..5077120ee 100644
--- a/doc/chart/VerticalBarDoc.vue
+++ b/doc/chart/VerticalBarDoc.vue
@@ -15,8 +15,10 @@ export default {
             chartData: null,
             chartOptions: null,
             code: {
-                basic: `<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />`,
-                options: `<template>
+                basic: `
+<Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />`,
+                options: `
+<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
     </div>
@@ -100,7 +102,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem"  />
     </div>
diff --git a/doc/chart/pt/PTDoc.vue b/doc/chart/pt/PTDoc.vue
index 6dae7d7f7..ee7ca7f5b 100644
--- a/doc/chart/pt/PTDoc.vue
+++ b/doc/chart/pt/PTDoc.vue
@@ -30,7 +30,8 @@ export default {
                 }
             },
             code: {
-                basic: `<Chart
+                basic: `
+<Chart
     type="pie"
     :data="chartData"
     :options="chartOptions"
@@ -38,7 +39,8 @@ export default {
         root: { class: 'w-full md:w-30rem' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Chart
             type="pie"
@@ -88,7 +90,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Chart
             type="pie"
diff --git a/doc/chart/theming/TailwindDoc.vue b/doc/chart/theming/TailwindDoc.vue
index 57d419311..9b4700fbd 100644
--- a/doc/chart/theming/TailwindDoc.vue
+++ b/doc/chart/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     chart: {
         root: 'relative'
     }
@@ -24,7 +23,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Chart type="bar" :data="chartData" :options="chartOptions" />
     </div>
diff --git a/doc/checkbox/AccessibilityDoc.vue b/doc/checkbox/AccessibilityDoc.vue
index 1dba20b6a..20cf16f0e 100644
--- a/doc/checkbox/AccessibilityDoc.vue
+++ b/doc/checkbox/AccessibilityDoc.vue
@@ -37,7 +37,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<label for="chkbox1">Remember Me</label>
+                basic: `
+<label for="chkbox1">Remember Me</label>
 <Checkbox inputId="chkbox1" />
 
 <span id="chkbox2">Remember Me</span>
diff --git a/doc/checkbox/BasicDoc.vue b/doc/checkbox/BasicDoc.vue
index baf5aa9c4..dfce32a65 100644
--- a/doc/checkbox/BasicDoc.vue
+++ b/doc/checkbox/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<Checkbox v-model="checked" :binary="true" />`,
-                options: `<template>
+                basic: `
+<Checkbox v-model="checked" :binary="true" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" :binary="true" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" :binary="true" />
     </div>
diff --git a/doc/checkbox/DisabledDoc.vue b/doc/checkbox/DisabledDoc.vue
index 9e1a3082f..8b1c8325a 100644
--- a/doc/checkbox/DisabledDoc.vue
+++ b/doc/checkbox/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<Checkbox v-model="checked" disabled />`,
-                options: `<template>
+                basic: `
+<Checkbox v-model="checked" disabled />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" disabled />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" disabled />
     </div>
diff --git a/doc/checkbox/DynamicDoc.vue b/doc/checkbox/DynamicDoc.vue
index 6b6b7905f..01df48951 100644
--- a/doc/checkbox/DynamicDoc.vue
+++ b/doc/checkbox/DynamicDoc.vue
@@ -25,11 +25,13 @@ export default {
                 { name: 'Research', key: 'R' }
             ],
             code: {
-                basic: `<div v-for="category of categories" :key="category.key" class="flex align-items-center">
+                basic: `
+<div v-for="category of categories" :key="category.key" class="flex align-items-center">
     <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
     <label :for="category.key">{{ category.name }}</label>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="category of categories" :key="category.key" class="flex align-items-center">
@@ -55,7 +57,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="category of categories" :key="category.key" class="flex align-items-center">
diff --git a/doc/checkbox/GroupDoc.vue b/doc/checkbox/GroupDoc.vue
index 21320e466..f17e9f5b8 100644
--- a/doc/checkbox/GroupDoc.vue
+++ b/doc/checkbox/GroupDoc.vue
@@ -29,7 +29,8 @@ export default {
         return {
             pizza: null,
             code: {
-                basic: `<div class="card flex flex-wrap justify-content-center gap-3">
+                basic: `
+<div class="card flex flex-wrap justify-content-center gap-3">
     <div class="flex align-items-center">
         <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
         <label for="ingredient1" class="ml-2"> Cheese </label>
@@ -47,7 +48,8 @@ export default {
         <label for="ingredient4" class="ml-2"> Onion </label>
     </div>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-3">
         <div class="flex align-items-center">
             <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
@@ -77,7 +79,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-3">
         <div class="flex align-items-center">
             <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
diff --git a/doc/checkbox/ImportDoc.vue b/doc/checkbox/ImportDoc.vue
index 9baef2788..f66e200b5 100644
--- a/doc/checkbox/ImportDoc.vue
+++ b/doc/checkbox/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Checkbox from 'primevue/checkbox';`
+                basic: `
+import Checkbox from 'primevue/checkbox';
+`
             }
         };
     }
diff --git a/doc/checkbox/InvalidDoc.vue b/doc/checkbox/InvalidDoc.vue
index 855eb4dda..3b65f51d2 100644
--- a/doc/checkbox/InvalidDoc.vue
+++ b/doc/checkbox/InvalidDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<Checkbox v-model="checked" class="p-invalid" />`,
-                options: `<template>
+                basic: `
+<Checkbox v-model="checked" class="p-invalid" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" class="p-invalid" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Checkbox v-model="checked" class="p-invalid" />
     </div>
diff --git a/doc/checkbox/form/VeeValidateDoc.vue b/doc/checkbox/form/VeeValidateDoc.vue
index 0147e7805..62c4d73e6 100644
--- a/doc/checkbox/form/VeeValidateDoc.vue
+++ b/doc/checkbox/form/VeeValidateDoc.vue
@@ -42,7 +42,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="chbx">I've read and accept the terms & conditions.</label>
@@ -53,7 +54,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="chbx">I've read and accept the terms & conditions.</label>
@@ -93,7 +95,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="chbx">I've read and accept the terms & conditions.</label>
diff --git a/doc/checkbox/pt/PTDoc.vue b/doc/checkbox/pt/PTDoc.vue
index 050364c4a..a6fe398af 100644
--- a/doc/checkbox/pt/PTDoc.vue
+++ b/doc/checkbox/pt/PTDoc.vue
@@ -20,7 +20,8 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<Checkbox
+                basic: `
+<Checkbox
     v-model="checked"
     binary
     :pt="{
@@ -29,7 +30,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Checkbox
             v-model="checked"
@@ -52,7 +54,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Checkbox
             v-model="checked"
diff --git a/doc/checkbox/theming/TailwindDoc.vue b/doc/checkbox/theming/TailwindDoc.vue
index de0d6c1e9..fa2f6cc30 100644
--- a/doc/checkbox/theming/TailwindDoc.vue
+++ b/doc/checkbox/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     checkbox: {
         root: {
             class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
@@ -41,7 +40,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Checkbox v-model="checked" :binary="true" />
     </div>
diff --git a/doc/chip/BasicDoc.vue b/doc/chip/BasicDoc.vue
index 7b1071d78..34b16499b 100644
--- a/doc/chip/BasicDoc.vue
+++ b/doc/chip/BasicDoc.vue
@@ -16,11 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Chip label="Action" />
+                basic: `
+<Chip label="Action" />
 <Chip label="Comedy" />
 <Chip label="Mystery" />
 <Chip label="Thriller" removable />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Action" />
         <Chip label="Comedy" />
@@ -32,7 +34,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Action" />
         <Chip label="Comedy" />
diff --git a/doc/chip/IconDoc.vue b/doc/chip/IconDoc.vue
index bff89b2c7..8405f0b0d 100644
--- a/doc/chip/IconDoc.vue
+++ b/doc/chip/IconDoc.vue
@@ -16,11 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Chip label="Apple" icon="pi pi-apple" />
+                basic: `
+<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 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Apple" icon="pi pi-apple" />
         <Chip label="Facebook" icon="pi pi-facebook" />
@@ -31,7 +33,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Apple" icon="pi pi-apple" />
         <Chip label="Facebook" icon="pi pi-facebook" />
diff --git a/doc/chip/ImageDoc.vue b/doc/chip/ImageDoc.vue
index 6cbc20b97..381e29686 100644
--- a/doc/chip/ImageDoc.vue
+++ b/doc/chip/ImageDoc.vue
@@ -16,11 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" />
+                basic: `
+<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 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
         <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
@@ -32,7 +34,8 @@ export default {
 <script >
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
         <Chip label="Asiya Javayant" image=https://primefaces.org/cdn/primevue"/images/avatar/asiyajavayant.png" />
diff --git a/doc/chip/ImportDoc.vue b/doc/chip/ImportDoc.vue
index 5fe88de0c..60dd18517 100644
--- a/doc/chip/ImportDoc.vue
+++ b/doc/chip/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Chip from 'primevue/chip';`
+                basic: `
+import Chip from 'primevue/chip';
+`
             }
         };
     }
diff --git a/doc/chip/TemplateDoc.vue b/doc/chip/TemplateDoc.vue
index 07e1dbfcb..f94347d05 100644
--- a/doc/chip/TemplateDoc.vue
+++ b/doc/chip/TemplateDoc.vue
@@ -16,11 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Chip class="pl-0 pr-3">
+                basic: `
+<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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <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>
@@ -32,7 +34,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <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>
diff --git a/doc/chip/pt/PTDoc.vue b/doc/chip/pt/PTDoc.vue
index 7d6c5eee7..f574b4adb 100644
--- a/doc/chip/pt/PTDoc.vue
+++ b/doc/chip/pt/PTDoc.vue
@@ -18,7 +18,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Chip
+                basic: `
+<Chip
     label="Amy Elsner"
     image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
     :pt="{
@@ -26,7 +27,8 @@ export default {
         label: { class: 'text-white' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <Chip
         label="Amy Elsner"
         image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
@@ -36,7 +38,8 @@ export default {
         }"
     />
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <Chip
         label="Amy Elsner"
         image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
diff --git a/doc/chip/theming/TailwindDoc.vue b/doc/chip/theming/TailwindDoc.vue
index 97d9c1878..7f7b97259 100644
--- a/doc/chip/theming/TailwindDoc.vue
+++ b/doc/chip/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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']
@@ -34,7 +33,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-2">
         <Chip label="Apple" icon="pi pi-apple" />
         <Chip label="Facebook" icon="pi pi-facebook" />
diff --git a/doc/chips/AccessibilityDoc.vue b/doc/chips/AccessibilityDoc.vue
index 11210db85..7ce48f87a 100644
--- a/doc/chips/AccessibilityDoc.vue
+++ b/doc/chips/AccessibilityDoc.vue
@@ -71,7 +71,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<label for="chips1">Tags</label>
+                basic: `
+<label for="chips1">Tags</label>
 <Chips inputId="chips1" />
 
 <span id="chips2">Tags</span>
diff --git a/doc/chips/BasicDoc.vue b/doc/chips/BasicDoc.vue
index 9583e6a4d..6908bbcc7 100644
--- a/doc/chips/BasicDoc.vue
+++ b/doc/chips/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Chips v-model="value" />`,
-                options: `<template>
+                basic: `
+<Chips v-model="value" />`,
+                options: `
+<template>
     <div class="card p-fluid">
         <Chips v-model="value" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid">
         <Chips v-model="value" />
     </div>
diff --git a/doc/chips/DisabledDoc.vue b/doc/chips/DisabledDoc.vue
index 21f58d425..c988ba8ba 100644
--- a/doc/chips/DisabledDoc.vue
+++ b/doc/chips/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Chips v-model="value" disabled />`,
-                options: `<template>
+                basic: `
+<Chips v-model="value" disabled />`,
+                options: `
+<template>
     <div class="card p-fluid">
         <Chips v-model="value" disabled />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid">
         <Chips v-model="value" disabled />
     </div>
diff --git a/doc/chips/FloatLabelDoc.vue b/doc/chips/FloatLabelDoc.vue
index 5a9f5c83d..4be48d0a2 100644
--- a/doc/chips/FloatLabelDoc.vue
+++ b/doc/chips/FloatLabelDoc.vue
@@ -17,11 +17,13 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<span class="p-float-label">
+                basic: `
+<span class="p-float-label">
     <Chips id="chips" v-model="value" />
     <label for="chips">Chips</label>
 </span>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card p-fluid">
         <span class="p-float-label">
             <Chips id="chips" v-model="value" />
@@ -39,7 +41,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid">
         <span class="p-float-label">
             <Chips id="chips" v-model="value" />
diff --git a/doc/chips/ImportDoc.vue b/doc/chips/ImportDoc.vue
index 36b6ad9ce..bd72e5f07 100644
--- a/doc/chips/ImportDoc.vue
+++ b/doc/chips/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Chips from 'primevue/chips';`
+                basic: `
+import Chips from 'primevue/chips';
+`
             }
         };
     }
diff --git a/doc/chips/InvalidDoc.vue b/doc/chips/InvalidDoc.vue
index 7ab8dfac0..b539949f5 100644
--- a/doc/chips/InvalidDoc.vue
+++ b/doc/chips/InvalidDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Chips v-model="value" class="p-invalid" />`,
-                options: `<template>
+                basic: `
+<Chips v-model="value" class="p-invalid" />`,
+                options: `
+<template>
     <div class="card p-fluid">
         <Chips v-model="value" class="p-invalid" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid">
         <Chips v-model="value" class="p-invalid" />
     </div>
diff --git a/doc/chips/SeparatorDoc.vue b/doc/chips/SeparatorDoc.vue
index 265df766c..886916721 100644
--- a/doc/chips/SeparatorDoc.vue
+++ b/doc/chips/SeparatorDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Chips v-model="value" separator=","  />`,
-                options: `<template>
+                basic: `
+<Chips v-model="value" separator=","  />`,
+                options: `
+<template>
     <div class="card p-fluid">
         <Chips v-model="value" separator="," />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid">
         <Chips v-model="value" separator=","  />
     </div>
diff --git a/doc/chips/TemplateDoc.vue b/doc/chips/TemplateDoc.vue
index 93c72e65a..d9302acb1 100644
--- a/doc/chips/TemplateDoc.vue
+++ b/doc/chips/TemplateDoc.vue
@@ -21,7 +21,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Chips v-model="value">
+                basic: `
+<Chips v-model="value">
     <template #chip="slotProps">
         <div>
             <span>{{ slotProps.value }} - (active) </span>
@@ -29,7 +30,8 @@ export default {
         </div>
     </template>
 </Chips>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card p-fluid">
         <Chips v-model="value">
             <template #chip="slotProps">
@@ -51,7 +53,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid">
         <Chips v-model="value">
             <template #chip="slotProps">
diff --git a/doc/chips/form/VeeValidateDoc.vue b/doc/chips/form/VeeValidateDoc.vue
index ecab1f5e9..cafb23cf1 100644
--- a/doc/chips/form/VeeValidateDoc.vue
+++ b/doc/chips/form/VeeValidateDoc.vue
@@ -42,7 +42,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
@@ -52,7 +53,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
@@ -92,7 +94,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Chips v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="chips-error" />
diff --git a/doc/chips/pt/PTDoc.vue b/doc/chips/pt/PTDoc.vue
index 61e2485fd..01b239c0f 100644
--- a/doc/chips/pt/PTDoc.vue
+++ b/doc/chips/pt/PTDoc.vue
@@ -19,7 +19,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Chips
+                basic: `
+<Chips
     v-model="value"
     :pt="{
         root: { class: 'flex' },
@@ -27,7 +28,8 @@ export default {
         token: { class: 'bg-primary' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Chips
             v-model="value"
@@ -49,7 +51,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Chips
             v-model="value"
diff --git a/doc/chips/theming/TailwindDoc.vue b/doc/chips/theming/TailwindDoc.vue
index a2b5ec67d..c959b8007 100644
--- a/doc/chips/theming/TailwindDoc.vue
+++ b/doc/chips/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     chips: {
         root: ({ props }) => ({
             class: [
@@ -50,7 +49,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Chips v-model="value" />
     </div>
diff --git a/doc/colorpicker/BasicDoc.vue b/doc/colorpicker/BasicDoc.vue
index 7b4898564..c004bc8da 100644
--- a/doc/colorpicker/BasicDoc.vue
+++ b/doc/colorpicker/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             color: null,
             code: {
-                basic: `<ColorPicker v-model="color" />`,
-                options: `<template>
+                basic: `
+<ColorPicker v-model="color" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" />
     </div>
diff --git a/doc/colorpicker/DisabledDoc.vue b/doc/colorpicker/DisabledDoc.vue
index a5e9e9924..5a783e138 100644
--- a/doc/colorpicker/DisabledDoc.vue
+++ b/doc/colorpicker/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             color: null,
             code: {
-                basic: `<ColorPicker v-model="color" disabled />`,
-                options: `<template>
+                basic: `
+<ColorPicker v-model="color" disabled />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" disabled />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" disabled />
     </div>
diff --git a/doc/colorpicker/FormatDoc.vue b/doc/colorpicker/FormatDoc.vue
index 3e8d2f9a5..cedcd8f52 100644
--- a/doc/colorpicker/FormatDoc.vue
+++ b/doc/colorpicker/FormatDoc.vue
@@ -30,10 +30,12 @@ export default {
             colorRGB: { r: 100, g: 102, b: 241 },
             colorHSB: { h: 239, s: 59, b: 95 },
             code: {
-                basic: `<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-3">
         <div class="flex-1 flex flex-column align-items-center">
             <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
@@ -64,7 +66,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-3">
         <div class="flex-1 flex flex-column align-items-center">
             <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
diff --git a/doc/colorpicker/ImportDoc.vue b/doc/colorpicker/ImportDoc.vue
index c6d464e96..1957bb6a8 100644
--- a/doc/colorpicker/ImportDoc.vue
+++ b/doc/colorpicker/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import ColorPicker from 'primevue/colorpicker';`
+                basic: `
+import ColorPicker from 'primevue/colorpicker';
+`
             }
         };
     }
diff --git a/doc/colorpicker/InlineDoc.vue b/doc/colorpicker/InlineDoc.vue
index 1ea5497a5..f8738f558 100644
--- a/doc/colorpicker/InlineDoc.vue
+++ b/doc/colorpicker/InlineDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             color: null,
             code: {
-                basic: `<ColorPicker v-model="color" inline />`,
-                options: `<template>
+                basic: `
+<ColorPicker v-model="color" inline />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" inline />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ColorPicker v-model="color" inline />
     </div>
diff --git a/doc/colorpicker/form/VeeValidateDoc.vue b/doc/colorpicker/form/VeeValidateDoc.vue
index 901d3a82d..96a1a0522 100644
--- a/doc/colorpicker/form/VeeValidateDoc.vue
+++ b/doc/colorpicker/form/VeeValidateDoc.vue
@@ -41,7 +41,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
@@ -51,7 +52,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
@@ -90,7 +92,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
diff --git a/doc/colorpicker/pt/PTDoc.vue b/doc/colorpicker/pt/PTDoc.vue
index 784920da0..da21da2e8 100644
--- a/doc/colorpicker/pt/PTDoc.vue
+++ b/doc/colorpicker/pt/PTDoc.vue
@@ -18,14 +18,16 @@ export default {
         return {
             color: null,
             code: {
-                basic: `<ColorPicker
+                basic: `
+<ColorPicker
     v-model="color"
     inline
     :pt="{
         colorHandler: { class: 'w-1rem h-1rem' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ColorPicker
             v-model="color"
@@ -46,7 +48,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ColorPicker
             v-model="color"
diff --git a/doc/colorpicker/theming/TailwindDoc.vue b/doc/colorpicker/theming/TailwindDoc.vue
index 7595cc5ae..547aa4c60 100644
--- a/doc/colorpicker/theming/TailwindDoc.vue
+++ b/doc/colorpicker/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -72,7 +71,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <ColorPicker v-model="color" />
     </div>
diff --git a/doc/colors/OverviewDoc.vue b/doc/colors/OverviewDoc.vue
index 75a4f5822..a492b460a 100644
--- a/doc/colors/OverviewDoc.vue
+++ b/doc/colors/OverviewDoc.vue
@@ -71,8 +71,11 @@ export default {
     data() {
         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>`
+                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/configuration/ImportDoc.vue b/doc/configuration/ImportDoc.vue
index 5c4ff5021..cc700f5c4 100644
--- a/doc/configuration/ImportDoc.vue
+++ b/doc/configuration/ImportDoc.vue
@@ -10,10 +10,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `import PrimeVue from 'primevue/config';
+                basic: `
+import PrimeVue from 'primevue/config';
 const app = createApp(App);
 
-app.use(PrimeVue, { /* options */ });`
+app.use(PrimeVue, { /* options */ });
+`
             }
         };
     }
diff --git a/doc/configuration/InputStyleDoc.vue b/doc/configuration/InputStyleDoc.vue
index 53e3a741f..4ffe9817b 100644
--- a/doc/configuration/InputStyleDoc.vue
+++ b/doc/configuration/InputStyleDoc.vue
@@ -15,11 +15,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `import {createApp} from "vue";
+                basic: `
+import {createApp} from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, { inputStyle: "filled" });`
+app.use(PrimeVue, { inputStyle: "filled" });
+`
             }
         };
     }
diff --git a/doc/configuration/PTDoc.vue b/doc/configuration/PTDoc.vue
index 86059c3cb..689d35b82 100644
--- a/doc/configuration/PTDoc.vue
+++ b/doc/configuration/PTDoc.vue
@@ -10,7 +10,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import { createApp } from "vue";
+                basic: `
+import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
@@ -20,7 +21,8 @@ app.use(PrimeVue, {
             handle: { class: 'bg-primary' }
         }
     } 
-});`
+});
+`
             }
         };
     }
diff --git a/doc/configuration/PTOptionsDoc.vue b/doc/configuration/PTOptionsDoc.vue
index 70156fe0e..75e0a0117 100644
--- a/doc/configuration/PTOptionsDoc.vue
+++ b/doc/configuration/PTOptionsDoc.vue
@@ -13,7 +13,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import { createApp } from "vue";
+                basic: `
+import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
@@ -22,7 +23,8 @@ app.use(PrimeVue, {
         mergeSections: true,
         mergeProps: false
     } 
-});`
+});
+`
             }
         };
     }
diff --git a/doc/configuration/RippleDoc.vue b/doc/configuration/RippleDoc.vue
index 4c7a51fa0..9725971de 100644
--- a/doc/configuration/RippleDoc.vue
+++ b/doc/configuration/RippleDoc.vue
@@ -11,11 +11,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `import { createApp } from "vue";
+                basic: `
+import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, { ripple: true });`
+app.use(PrimeVue, { ripple: true });
+`
             }
         };
     }
diff --git a/doc/configuration/UnstyledDoc.vue b/doc/configuration/UnstyledDoc.vue
index aae8b65ef..3a2e24933 100644
--- a/doc/configuration/UnstyledDoc.vue
+++ b/doc/configuration/UnstyledDoc.vue
@@ -14,11 +14,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `import { createApp } from "vue";
+                basic: `
+import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, { unstyled: true });`
+app.use(PrimeVue, { unstyled: true });
+`
             }
         };
     }
diff --git a/doc/configuration/ZIndexDoc.vue b/doc/configuration/ZIndexDoc.vue
index 7e1ae513a..9bd86e2f5 100644
--- a/doc/configuration/ZIndexDoc.vue
+++ b/doc/configuration/ZIndexDoc.vue
@@ -14,7 +14,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import {createApp} from "vue";
+                basic: `
+import {createApp} from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
@@ -25,7 +26,8 @@ app.use(PrimeVue, {
         menu: 1000,         //overlay menus
         tooltip: 1100       //tooltip
     }
-});`
+});
+`
             }
         };
     }
diff --git a/doc/configuration/csp/NonceDoc.vue b/doc/configuration/csp/NonceDoc.vue
index 7bc621fd1..ad594d13b 100644
--- a/doc/configuration/csp/NonceDoc.vue
+++ b/doc/configuration/csp/NonceDoc.vue
@@ -11,11 +11,13 @@ export default {
     data() {
         return {
             code1: {
-                basic: `app.use(PrimeVue, {
+                basic: `
+app.use(PrimeVue, {
     csp: {
         nonce: '...'
     }
-});`
+});
+`
             }
         };
     }
diff --git a/doc/configuration/locale/ImportDoc.vue b/doc/configuration/locale/ImportDoc.vue
index 56f5ebca7..6f78781ef 100644
--- a/doc/configuration/locale/ImportDoc.vue
+++ b/doc/configuration/locale/ImportDoc.vue
@@ -10,7 +10,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import PrimeVue from 'primevue/config';
+                basic: `
+import PrimeVue from 'primevue/config';
 const app = createApp(App);
 
 app.use(PrimeVue);`
diff --git a/doc/configuration/locale/SetLocaleDoc.vue b/doc/configuration/locale/SetLocaleDoc.vue
index afe4013c1..cce74b3e0 100644
--- a/doc/configuration/locale/SetLocaleDoc.vue
+++ b/doc/configuration/locale/SetLocaleDoc.vue
@@ -15,16 +15,19 @@ export default {
     data() {
         return {
             code1: {
-                basic: `app.use(PrimeVue, {
+                basic: `
+app.use(PrimeVue, {
     locale: {
         accept: 'Aceptar',
         reject: 'Rechazar',
         //...
     }
-});`
+});
+`
             },
             code2: {
-                basic: `import { defineComponent, onMounted } from "vue";
+                basic: `
+import { defineComponent, onMounted } from "vue";
 import { usePrimeVue } from "primevue/config";
 
 export default defineComponent({
@@ -39,7 +42,8 @@ export default defineComponent({
             changeToSpanish();
         })
     }
-});`
+});
+`
             }
         };
     }
diff --git a/doc/confirmdialog/AccessibilityDoc.vue b/doc/confirmdialog/AccessibilityDoc.vue
index 55e2d4114..e6bb57f79 100644
--- a/doc/confirmdialog/AccessibilityDoc.vue
+++ b/doc/confirmdialog/AccessibilityDoc.vue
@@ -75,12 +75,14 @@ export default {
     data() {
         return {
             code1: {
-                basic: `<ConfirmDialog id="confirm" />
+                basic: `
+<ConfirmDialog id="confirm" />
 
 <Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>`
             },
             code2: {
-                basic: `<script setup>
+                basic: `
+<script setup>
 const confirm = useConfirm();
 const isVisible = ref(false);
 
diff --git a/doc/confirmdialog/BasicDoc.vue b/doc/confirmdialog/BasicDoc.vue
index 334df0f97..9f8f18fcc 100644
--- a/doc/confirmdialog/BasicDoc.vue
+++ b/doc/confirmdialog/BasicDoc.vue
@@ -15,10 +15,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ConfirmDialog></ConfirmDialog>
+                basic: `
+<ConfirmDialog></ConfirmDialog>
 <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
 <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>`,
-                options: `<template>
+                options: `
+<template>
     <Toast />
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
@@ -60,7 +62,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <Toast />
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
diff --git a/doc/confirmdialog/ConfirmationServiceDoc.vue b/doc/confirmdialog/ConfirmationServiceDoc.vue
index b32456f04..af81d1b20 100644
--- a/doc/confirmdialog/ConfirmationServiceDoc.vue
+++ b/doc/confirmdialog/ConfirmationServiceDoc.vue
@@ -14,14 +14,16 @@ export default {
     data() {
         return {
             code1: {
-                basic: `import {createApp} from 'vue';
+                basic: `
+import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
 const app = createApp(App);
 app.use(ConfirmationService);`
             },
             code2: {
-                basic: `import { useConfirm } from "primevue/useconfirm";
+                basic: `
+import { useConfirm } from "primevue/useconfirm";
 
 const confirm = useConfirm();`
             }
diff --git a/doc/confirmdialog/ImportDoc.vue b/doc/confirmdialog/ImportDoc.vue
index 775d573ae..cc4e72fea 100644
--- a/doc/confirmdialog/ImportDoc.vue
+++ b/doc/confirmdialog/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import ConfirmDialog from 'primevue/confirmdialog';`
+                basic: `
+import ConfirmDialog from 'primevue/confirmdialog';
+`
             }
         };
     }
diff --git a/doc/confirmdialog/PositionDoc.vue b/doc/confirmdialog/PositionDoc.vue
index 53be3058b..ed1652971 100644
--- a/doc/confirmdialog/PositionDoc.vue
+++ b/doc/confirmdialog/PositionDoc.vue
@@ -27,7 +27,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ConfirmDialog group="positionDialog"></ConfirmDialog>
+                basic: `
+<ConfirmDialog group="positionDialog"></ConfirmDialog>
 <div class="flex flex-wrap justify-content-center gap-2 mb-2">
     <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
@@ -42,7 +43,8 @@ export default {
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <Toast />
     <ConfirmDialog group="positionDialog"></ConfirmDialog>
     <div class="card">
@@ -84,7 +86,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <Toast />
     <ConfirmDialog group="positionDialog"></ConfirmDialog>
     <div class="card">
diff --git a/doc/confirmdialog/TemplateDoc.vue b/doc/confirmdialog/TemplateDoc.vue
index b2c213e3d..938b36d66 100644
--- a/doc/confirmdialog/TemplateDoc.vue
+++ b/doc/confirmdialog/TemplateDoc.vue
@@ -21,7 +21,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
+                basic: `
+<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
     <template #message="slotProps">
         <div class="flex p-4">
             <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
@@ -30,7 +31,8 @@ export default {
     </template>
 </ConfirmDialog>
 <Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>`,
-                options: `<template>
+                options: `
+<template>
     <ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
         <template #message="slotProps">
             <div class="flex p-4">
@@ -67,7 +69,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
         <template #message="slotProps">
             <div class="flex p-4">
diff --git a/doc/confirmdialog/pt/PTDoc.vue b/doc/confirmdialog/pt/PTDoc.vue
index 60010b2aa..b61014d66 100644
--- a/doc/confirmdialog/pt/PTDoc.vue
+++ b/doc/confirmdialog/pt/PTDoc.vue
@@ -12,13 +12,15 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ConfirmDialog
+                basic: `
+<ConfirmDialog
     group="pt"
     :pt="{
         headerTitle: { class: 'text-primary' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <ConfirmDialog
         group="pt"
         :pt="{
@@ -50,7 +52,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <ConfirmDialog
         group="pt"
         :pt="{
diff --git a/doc/confirmdialog/theming/TailwindDoc.vue b/doc/confirmdialog/theming/TailwindDoc.vue
index 49d4ea76f..392ba0a75 100644
--- a/doc/confirmdialog/theming/TailwindDoc.vue
+++ b/doc/confirmdialog/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     dialog: {
         root: ({ state }) => ({
             class: [
@@ -102,7 +101,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <Toast />
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-center">
diff --git a/doc/confirmpopup/AccessibilityDoc.vue b/doc/confirmpopup/AccessibilityDoc.vue
index bd1e7857d..f1575093c 100644
--- a/doc/confirmpopup/AccessibilityDoc.vue
+++ b/doc/confirmpopup/AccessibilityDoc.vue
@@ -74,12 +74,14 @@ export default {
     data() {
         return {
             code1: {
-                basic: `<ConfirmPopup id="confirm" aria-label="popup" />
+                basic: `
+<ConfirmPopup id="confirm" aria-label="popup" />
 
 <Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" />`
             },
             code2: {
-                basic: `<script setup>
+                basic: `
+<script setup>
 const confirm = useConfirm();
 const isVisible = ref(false);
 const openPopup = (event) => {
diff --git a/doc/confirmpopup/BasicDoc.vue b/doc/confirmpopup/BasicDoc.vue
index 9d8eb7bf7..a5d68aab1 100644
--- a/doc/confirmpopup/BasicDoc.vue
+++ b/doc/confirmpopup/BasicDoc.vue
@@ -15,12 +15,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ConfirmPopup></ConfirmPopup>
+                basic: `
+<ConfirmPopup></ConfirmPopup>
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <Toast />
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
@@ -62,7 +64,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <Toast />
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
diff --git a/doc/confirmpopup/ConfirmationServiceDoc.vue b/doc/confirmpopup/ConfirmationServiceDoc.vue
index 9eb37a8dd..2ae1ccd6d 100644
--- a/doc/confirmpopup/ConfirmationServiceDoc.vue
+++ b/doc/confirmpopup/ConfirmationServiceDoc.vue
@@ -14,14 +14,16 @@ export default {
     data() {
         return {
             code1: {
-                basic: `import {createApp} from 'vue';
+                basic: `
+import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
 const app = createApp(App);
 app.use(ConfirmationService);`
             },
             code2: {
-                basic: `import { useConfirm } from "primevue/useconfirm";
+                basic: `
+import { useConfirm } from "primevue/useconfirm";
 
 const confirm = useConfirm();`
             }
diff --git a/doc/confirmpopup/ImportDoc.vue b/doc/confirmpopup/ImportDoc.vue
index 5404a5568..cd1f9cbf4 100644
--- a/doc/confirmpopup/ImportDoc.vue
+++ b/doc/confirmpopup/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import ConfirmPopup from 'primevue/confirmpopup';`
+                basic: `
+import ConfirmPopup from 'primevue/confirmpopup';
+`
             }
         };
     }
diff --git a/doc/confirmpopup/TemplateDoc.vue b/doc/confirmpopup/TemplateDoc.vue
index e547ec28a..5d3b3235e 100644
--- a/doc/confirmpopup/TemplateDoc.vue
+++ b/doc/confirmpopup/TemplateDoc.vue
@@ -21,7 +21,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ConfirmPopup group="demo">
+                basic: `
+<ConfirmPopup group="demo">
     <template #message="slotProps">
         <div class="flex p-4">
             <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
@@ -32,7 +33,8 @@ export default {
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <Toast />
     <ConfirmPopup group="demo">
         <template #message="slotProps">
@@ -69,7 +71,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <Toast />
     <ConfirmPopup group="demo">
         <template #message="slotProps">
diff --git a/doc/confirmpopup/pt/PTDoc.vue b/doc/confirmpopup/pt/PTDoc.vue
index b9ce1eb5d..2b3a9bfe3 100644
--- a/doc/confirmpopup/pt/PTDoc.vue
+++ b/doc/confirmpopup/pt/PTDoc.vue
@@ -17,13 +17,15 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ConfirmPopup
+                basic: `
+<ConfirmPopup
     group="pt"
     :pt="{
         root: { class: 'surface-100' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <ConfirmPopup
         group="pt"
         :pt="{
@@ -56,7 +58,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <ConfirmPopup
         group="pt"
         :pt="{
diff --git a/doc/confirmpopup/theming/TailwindDoc.vue b/doc/confirmpopup/theming/TailwindDoc.vue
index c97f1cb3d..ca0f27e2d 100644
--- a/doc/confirmpopup/theming/TailwindDoc.vue
+++ b/doc/confirmpopup/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -45,7 +44,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <Toast />
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-center">
diff --git a/doc/contextmenu/BasicDoc.vue b/doc/contextmenu/BasicDoc.vue
index c546a453b..6c565279c 100644
--- a/doc/contextmenu/BasicDoc.vue
+++ b/doc/contextmenu/BasicDoc.vue
@@ -18,9 +18,11 @@ export default {
                 { label: 'Delete', icon: 'pi pi-fw pi-trash' }
             ],
             code: {
-                basic: `<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex md:justify-content-center">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu ref="menu" :model="items" />
@@ -44,7 +46,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu ref="menu" :model="items" />
diff --git a/doc/contextmenu/DocumentDoc.vue b/doc/contextmenu/DocumentDoc.vue
index 58da6a8b6..33edc1786 100644
--- a/doc/contextmenu/DocumentDoc.vue
+++ b/doc/contextmenu/DocumentDoc.vue
@@ -140,9 +140,11 @@ export default {
                 }
             ],
             code: {
-                basic: `<p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
+                basic: `
+<p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
 <ContextMenu global :model="items" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card text-center">
         <p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
         <ContextMenu global :model="items" />
@@ -283,7 +285,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card text-center">
         <p class="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
         <ContextMenu global :model="items" />
diff --git a/doc/contextmenu/ImportDoc.vue b/doc/contextmenu/ImportDoc.vue
index 91f7bb8aa..03bfd8ed0 100644
--- a/doc/contextmenu/ImportDoc.vue
+++ b/doc/contextmenu/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import ContextMenu from 'primevue/contextmenu';`
+                basic: `
+import ContextMenu from 'primevue/contextmenu';
+`
             }
         };
     }
diff --git a/doc/contextmenu/RouterDoc.vue b/doc/contextmenu/RouterDoc.vue
index 0fd5afd0e..11b06a417 100644
--- a/doc/contextmenu/RouterDoc.vue
+++ b/doc/contextmenu/RouterDoc.vue
@@ -40,9 +40,11 @@ export default {
                 }
             ],
             code: {
-                basic: `<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex md:justify-content-center">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu ref="routemenu" :model="items" />
@@ -71,7 +73,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu ref="routemenu" :model="items" />
diff --git a/doc/contextmenu/pt/PTDoc.vue b/doc/contextmenu/pt/PTDoc.vue
index de09596c4..5aa5a61df 100644
--- a/doc/contextmenu/pt/PTDoc.vue
+++ b/doc/contextmenu/pt/PTDoc.vue
@@ -144,7 +144,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
+                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"
@@ -152,7 +153,8 @@ export default {
         action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex md:justify-content-center">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu
@@ -304,7 +306,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu
diff --git a/doc/contextmenu/theming/TailwindDoc.vue b/doc/contextmenu/theming/TailwindDoc.vue
index c7e119439..0a0c3c699 100644
--- a/doc/contextmenu/theming/TailwindDoc.vue
+++ b/doc/contextmenu/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -49,7 +49,8 @@ xport default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
         <ContextMenu ref="menu" :model="items" />
diff --git a/doc/datatable/BasicDoc.vue b/doc/datatable/BasicDoc.vue
index 1372c146b..20be7a12a 100644
--- a/doc/datatable/BasicDoc.vue
+++ b/doc/datatable/BasicDoc.vue
@@ -21,13 +21,15 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -52,7 +54,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/ColumnGroupDoc.vue b/doc/datatable/ColumnGroupDoc.vue
index d91f26cbf..09a327500 100644
--- a/doc/datatable/ColumnGroupDoc.vue
+++ b/doc/datatable/ColumnGroupDoc.vue
@@ -58,7 +58,8 @@ export default {
         return {
             sales: null,
             code: {
-                basic: `<DataTable :value="sales" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="sales" tableStyle="min-width: 50rem">
     <ColumnGroup type="header">
         <Row>
             <Column header="Product" :rowspan="3" />
@@ -100,7 +101,8 @@ export default {
         </Row>
     </ColumnGroup>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <DataTable :value="sales" tableStyle="min-width: 50rem">
         <ColumnGroup type="header">
             <Row>
@@ -196,7 +198,8 @@ export default {
 }
 <\/script>
 `,
-                composition: `<template>
+                composition: `
+<template>
     <DataTable :value="sales" tableStyle="min-width: 50rem">
         <ColumnGroup type="header">
             <Row>
diff --git a/doc/datatable/ColumnToggleDoc.vue b/doc/datatable/ColumnToggleDoc.vue
index 534bbc228..848e26027 100644
--- a/doc/datatable/ColumnToggleDoc.vue
+++ b/doc/datatable/ColumnToggleDoc.vue
@@ -26,7 +26,8 @@ export default {
             columns: null,
             products: null,
             code: {
-                basic: `<DataTable :value="products" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
     <template #header>
         <div style="text-align:left">
             <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"    
@@ -36,7 +37,8 @@ export default {
     <Column field="code" header="Code" />
     <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div>
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
@@ -81,7 +83,8 @@ export default {
 }
 <\/script>
 `,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
diff --git a/doc/datatable/ConditionalStyleDoc.vue b/doc/datatable/ConditionalStyleDoc.vue
index 43fc17847..8de5b9453 100644
--- a/doc/datatable/ConditionalStyleDoc.vue
+++ b/doc/datatable/ConditionalStyleDoc.vue
@@ -27,7 +27,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
@@ -39,7 +40,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -90,7 +92,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/ContextMenuDoc.vue b/doc/datatable/ContextMenuDoc.vue
index a2c5677e0..b8973d12f 100644
--- a/doc/datatable/ContextMenuDoc.vue
+++ b/doc/datatable/ContextMenuDoc.vue
@@ -33,7 +33,8 @@ export default {
                 { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct) }
             ],
             code: {
-                basic: `<ContextMenu ref="cm" :model="menuModel" />
+                basic: `
+<ContextMenu ref="cm" :model="menuModel" />
 <DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu
         @row-contextmenu="onRowContextMenu" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
@@ -45,7 +46,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div>
         <ContextMenu ref="cm" :model="menuModel" />
         <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" 
@@ -99,7 +101,8 @@ export default {
 }
 <\/script>
 `,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <ContextMenu ref="cm" :model="menuModel" />
         <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct"
diff --git a/doc/datatable/DynamicColumnsDoc.vue b/doc/datatable/DynamicColumnsDoc.vue
index ea6bdca8a..5de5781af 100644
--- a/doc/datatable/DynamicColumnsDoc.vue
+++ b/doc/datatable/DynamicColumnsDoc.vue
@@ -19,10 +19,12 @@ export default {
             products: null,
             columns: null,
             code: {
-                basic: `<DataTable :value="products" tableStyle="min-width: 50rem">
+                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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
@@ -53,7 +55,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
diff --git a/doc/datatable/ExportDoc.vue b/doc/datatable/ExportDoc.vue
index 975dffb2a..6b5474144 100644
--- a/doc/datatable/ExportDoc.vue
+++ b/doc/datatable/ExportDoc.vue
@@ -26,7 +26,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
     <template #header>
         <div style="text-align: left">
             <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
@@ -37,7 +38,8 @@ export default {
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div>
         <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
             <template #header>
@@ -73,7 +75,8 @@ export default {
 }
 <\/script>
 `,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
             <template #header>
diff --git a/doc/datatable/GridLinesDoc.vue b/doc/datatable/GridLinesDoc.vue
index 1eac39e43..a347f0480 100644
--- a/doc/datatable/GridLinesDoc.vue
+++ b/doc/datatable/GridLinesDoc.vue
@@ -21,13 +21,15 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -52,7 +54,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/ImportDoc.vue b/doc/datatable/ImportDoc.vue
index 4fce00b3a..d8cb701e2 100644
--- a/doc/datatable/ImportDoc.vue
+++ b/doc/datatable/ImportDoc.vue
@@ -8,10 +8,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `import DataTable from 'primevue/datatable';
+                basic: `
+import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import ColumnGroup from 'primevue/columngroup';   // optional
-import Row from 'primevue/row';                   // optional`
+import Row from 'primevue/row';                   // optional
+`
             }
         };
     }
diff --git a/doc/datatable/LazyLoadDoc.vue b/doc/datatable/LazyLoadDoc.vue
index 990b0905a..a1fc92717 100644
--- a/doc/datatable/LazyLoadDoc.vue
+++ b/doc/datatable/LazyLoadDoc.vue
@@ -97,7 +97,8 @@ export default {
                 { field: 'representative.name', header: 'Representative' }
             ],
             code: {
-                basic: `<DataTable :value="customers" lazy paginator :first="0" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
+                basic: `
+<DataTable :value="customers" lazy paginator :first="0" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
         :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
         :globalFilterFields="['name','country.name', 'company', 'representative.name']"
         v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
@@ -123,7 +124,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
 	<div class="card p-fluid">
         <DataTable :value="customers" lazy paginator :first="0" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
                 :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
@@ -241,7 +243,8 @@ export default {
 }
 <\/script>
 `,
-                composition: `<template>
+                composition: `
+<template>
 	<div class="card p-fluid">
         <DataTable :value="customers" lazy paginator :first="0" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
             :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
diff --git a/doc/datatable/ReorderDoc.vue b/doc/datatable/ReorderDoc.vue
index 61d185e09..7226c99ca 100644
--- a/doc/datatable/ReorderDoc.vue
+++ b/doc/datatable/ReorderDoc.vue
@@ -24,11 +24,13 @@ export default {
             columns: null,
             products: null,
             code: {
-                basic: `<DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
+                basic: `
+<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>`,
-                options: `<template>
+                options: `
+<template>
 	<div>
         <DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
             <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
@@ -71,7 +73,8 @@ export default {
 }
 <\/script>                  
 `,
-                composition: `<template>
+                composition: `
+<template>
 	<div>
         <DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder" tableStyle="min-width: 50rem">
             <Column rowReorder headerStyle="width: 3rem" :reorderableColumn="false" />
diff --git a/doc/datatable/RowExpansionDoc.vue b/doc/datatable/RowExpansionDoc.vue
index 5c4a75823..6c8075233 100644
--- a/doc/datatable/RowExpansionDoc.vue
+++ b/doc/datatable/RowExpansionDoc.vue
@@ -79,7 +79,8 @@ export default {
             products: null,
             expandedRows: [],
             code: {
-                basic: `<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
+                basic: `
+<DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
         @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
     <template #header>
         <div class="flex flex-wrap justify-content-end gap-2">
@@ -136,7 +137,8 @@ export default {
         </div>
     </template>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
                 @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
@@ -264,7 +266,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id"
                 @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
diff --git a/doc/datatable/SizeDoc.vue b/doc/datatable/SizeDoc.vue
index 4e31b9c1f..632d20d35 100644
--- a/doc/datatable/SizeDoc.vue
+++ b/doc/datatable/SizeDoc.vue
@@ -30,14 +30,16 @@ export default {
                 { label: 'Large', value: 'large', class: 'lg' }
             ],
             code: {
-                basic: `<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
+                basic: `
+<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
 <DataTable :value="products" :class="\`p-datatable-\${size.class}\`" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex justify-content-center mb-4">
             <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
@@ -71,7 +73,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex justify-content-center mb-4">
             <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
diff --git a/doc/datatable/StatefulDoc.vue b/doc/datatable/StatefulDoc.vue
index d5b9dd01f..13fbd2995 100644
--- a/doc/datatable/StatefulDoc.vue
+++ b/doc/datatable/StatefulDoc.vue
@@ -103,7 +103,8 @@ export default {
             ],
             statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
             code: {
-                basic: `<DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
+                basic: `
+<DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
     stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
     selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
     <template #header>
@@ -160,7 +161,8 @@ export default {
     </Column>
     <template #empty> No customers found. </template>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
                 stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
@@ -284,7 +286,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable v-model:filters="filters" v-model:selection="selectedCustomer" :value="customers"
                 stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
diff --git a/doc/datatable/StripedRowsDoc.vue b/doc/datatable/StripedRowsDoc.vue
index f6039237d..d21b38e36 100644
--- a/doc/datatable/StripedRowsDoc.vue
+++ b/doc/datatable/StripedRowsDoc.vue
@@ -21,13 +21,15 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -52,7 +54,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/TemplateDoc.vue b/doc/datatable/TemplateDoc.vue
index 40dfc71ba..11c5cc745 100644
--- a/doc/datatable/TemplateDoc.vue
+++ b/doc/datatable/TemplateDoc.vue
@@ -46,7 +46,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
     <template #header>
         <div class="flex flex-wrap align-items-center justify-content-between gap-2">
             <span class="text-xl text-900 font-bold">Products</span>
@@ -77,7 +78,8 @@ export default {
     </Column>
     <template #footer> In total there are {{ products ? products.length : 0 }} products. </template>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
@@ -147,7 +149,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <template #header>
diff --git a/doc/datatable/colresize/ExpandModeDoc.vue b/doc/datatable/colresize/ExpandModeDoc.vue
index e1f615314..287b6b624 100644
--- a/doc/datatable/colresize/ExpandModeDoc.vue
+++ b/doc/datatable/colresize/ExpandModeDoc.vue
@@ -21,13 +21,15 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -52,7 +54,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" resizableColumns columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/colresize/FitModeDoc.vue b/doc/datatable/colresize/FitModeDoc.vue
index 0e3af94c9..73943c40a 100644
--- a/doc/datatable/colresize/FitModeDoc.vue
+++ b/doc/datatable/colresize/FitModeDoc.vue
@@ -24,13 +24,15 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
@@ -55,7 +57,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" resizableColumns columnResizeMode="fit" showGridlines tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
diff --git a/doc/datatable/edit/CellEditDoc.vue b/doc/datatable/edit/CellEditDoc.vue
index da5d939c5..70a190f01 100644
--- a/doc/datatable/edit/CellEditDoc.vue
+++ b/doc/datatable/edit/CellEditDoc.vue
@@ -36,7 +36,8 @@ export default {
                 { field: 'price', header: 'Price' }
             ],
             code: {
-                basic: `<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
         <template #body="{ data, field }">
             {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -51,7 +52,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card p-fluid">
         <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
@@ -133,7 +135,8 @@ export default {
     padding-bottom: 0;
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid">
         <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
diff --git a/doc/datatable/edit/FilterSortEditDoc.vue b/doc/datatable/edit/FilterSortEditDoc.vue
index 1ea8691aa..ad32e9ab1 100644
--- a/doc/datatable/edit/FilterSortEditDoc.vue
+++ b/doc/datatable/edit/FilterSortEditDoc.vue
@@ -33,7 +33,8 @@ export default {
                 price: { value: null, matchMode: FilterMatchMode.STARTS_WITH }
             },
             code: {
-                basic: `<DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
+                basic: `
+<DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
         @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
         <template #filter="{ filterModel, filterCallback }">
@@ -44,7 +45,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card p-fluid">
         <DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
                 @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
@@ -119,7 +121,8 @@ export default {
     padding-bottom: 0;
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid">
         <DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
                 @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
diff --git a/doc/datatable/edit/RowEditDoc.vue b/doc/datatable/edit/RowEditDoc.vue
index 90a8bdefc..b2699b83b 100644
--- a/doc/datatable/edit/RowEditDoc.vue
+++ b/doc/datatable/edit/RowEditDoc.vue
@@ -57,7 +57,8 @@ export default {
                 { label: 'Out of Stock', value: 'OUTOFSTOCK' }
             ],
             code: {
-                basic: `<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
+                basic: `
+<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
         @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
     <Column field="code" header="Code" style="width: 20%">
         <template #editor="{ data, field }">
@@ -91,7 +92,8 @@ export default {
     </Column>
     <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card p-fluid">
         <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
                 @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
@@ -182,7 +184,8 @@ export default {
     padding-bottom: 0.6rem;
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid">
         <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
                 @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
diff --git a/doc/datatable/filter/AdvancedFilterDoc.vue b/doc/datatable/filter/AdvancedFilterDoc.vue
index f56d46702..a5c018c71 100644
--- a/doc/datatable/filter/AdvancedFilterDoc.vue
+++ b/doc/datatable/filter/AdvancedFilterDoc.vue
@@ -139,7 +139,8 @@ export default {
             statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
             loading: true,
             code: {
-                basic: `<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
+                basic: `
+<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
         filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
     <template #header>
         <div class="flex justify-content-between">
@@ -248,7 +249,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
                 filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
@@ -451,7 +453,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
                 filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
diff --git a/doc/datatable/filter/BasicFilterDoc.vue b/doc/datatable/filter/BasicFilterDoc.vue
index 530cefe7d..d8168b984 100644
--- a/doc/datatable/filter/BasicFilterDoc.vue
+++ b/doc/datatable/filter/BasicFilterDoc.vue
@@ -111,7 +111,8 @@ export default {
             statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
             loading: true,
             code: {
-                basic: `<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
+                basic: `
+<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
         :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
     <template #header>
         <div class="flex justify-content-end">
@@ -181,7 +182,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
                 :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
@@ -333,7 +335,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading"
                 :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
diff --git a/doc/datatable/paginator/PaginatorBasicDoc.vue b/doc/datatable/paginator/PaginatorBasicDoc.vue
index b91e36cba..10b3a3f89 100644
--- a/doc/datatable/paginator/PaginatorBasicDoc.vue
+++ b/doc/datatable/paginator/PaginatorBasicDoc.vue
@@ -21,13 +21,15 @@ export default {
         return {
             customers: null,
             code: {
-                basic: `<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
     <Column field="name" header="Name" style="width: 25%"></Column>
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
             <Column field="name" header="Name" style="width: 25%"></Column>
@@ -52,7 +54,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
             <Column field="name" header="Name" style="width: 25%"></Column>
diff --git a/doc/datatable/paginator/PaginatorTemplateDoc.vue b/doc/datatable/paginator/PaginatorTemplateDoc.vue
index c8964edb6..0f461579f 100644
--- a/doc/datatable/paginator/PaginatorTemplateDoc.vue
+++ b/doc/datatable/paginator/PaginatorTemplateDoc.vue
@@ -38,7 +38,8 @@ export default {
         return {
             customers: null,
             code: {
-                basic: `<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
+                basic: `
+<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
         paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
         currentPageReportTemplate="{first} to {last} of {totalRecords}">
     <template #paginatorstart>
@@ -52,7 +53,8 @@ export default {
     <Column field="company" header="Company" style="width: 25%"></Column>
     <Column field="representative.name" header="Representative" style="width: 25%"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
                 paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
@@ -85,7 +87,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
                 paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
diff --git a/doc/datatable/pt/PTDoc.vue b/doc/datatable/pt/PTDoc.vue
index f4e4ea919..f2f38e4a3 100644
--- a/doc/datatable/pt/PTDoc.vue
+++ b/doc/datatable/pt/PTDoc.vue
@@ -57,7 +57,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable
+                basic: `
+<DataTable
     :value="products"
     sortMode="multiple"
     :pt="{
@@ -101,7 +102,8 @@ export default {
         }"
     />
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable
             :value="products"
@@ -164,7 +166,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable
             :value="products"
diff --git a/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue b/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
index ae47e256a..40e1695b8 100644
--- a/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue
@@ -57,7 +57,8 @@ export default {
             customers: null,
             expandedRowGroups: null,
             code: {
-                basic: `<DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
+                basic: `
+<DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
         expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
         sortMode="single" sortField="representative.name" :sortOrder="1">
     <template #groupheader="slotProps">
@@ -85,7 +86,8 @@ export default {
         <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
     </template>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
                 expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
@@ -173,7 +175,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable v-model:expandedRowGroups="expandedRowGroups" :value="customers" tableStyle="min-width: 50rem"
                 expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
diff --git a/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue b/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
index a2cd22200..6095a6e5b 100644
--- a/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
@@ -47,7 +47,8 @@ export default {
             customers: null,
             expandedRowGroups: null,
             code: {
-                basic: `<DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
     <Column header="#" headerStyle="width:3rem">
         <template #body="slotProps">
             {{ slotProps.index + 1 }}
@@ -78,7 +79,8 @@ export default {
     </Column>
     <Column field="date" header="Date" style="min-width: 100px"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
             <Column header="#" headerStyle="width:3rem">
@@ -148,7 +150,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
             <Column header="#" headerStyle="width:3rem">
diff --git a/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue b/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
index f43e7a442..640179cc0 100644
--- a/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
+++ b/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue
@@ -46,7 +46,8 @@ export default {
         return {
             customers: null,
             code: {
-                basic: `<DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
+                basic: `
+<DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
         sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
     <Column field="representative.name" header="Representative"></Column>
     <Column field="name" header="Name" style="min-width: 200px"></Column>
@@ -75,7 +76,8 @@ export default {
         <div class="flex justify-content-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
     </template>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
                 sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
@@ -156,7 +158,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single"
                 sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
diff --git a/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue b/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
index 4f5270df3..52d678b24 100644
--- a/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
+++ b/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue
@@ -28,14 +28,16 @@ export default {
             selectedProduct: null,
             metaKey: true,
             code: {
-                basic: `<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
     <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
             <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
@@ -63,7 +65,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
             <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
diff --git a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
index 3185dd608..0359e7c66 100644
--- a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
+++ b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue
@@ -30,7 +30,8 @@ export default {
             selectedProduct: null,
             metaKey: true,
             code: {
-                basic: `<InputSwitch v-model="metaKey" inputId="input-metakey" />
+                basic: `
+<InputSwitch v-model="metaKey" inputId="input-metakey" />
 
 <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="multiple" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
@@ -38,7 +39,8 @@ export default {
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
@@ -69,7 +71,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
diff --git a/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue b/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
index 04f63d42f..801920eba 100644
--- a/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
+++ b/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue
@@ -27,14 +27,16 @@ export default {
             selectedProduct: null,
             metaKey: true,
             code: {
-                basic: `<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
     <Column selectionMode="single" headerStyle="width: 3rem"></Column>
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
             <Column selectionMode="single" headerStyle="width: 3rem"></Column>
@@ -62,7 +64,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" dataKey="id" tableStyle="min-width: 50rem">
             <Column selectionMode="single" headerStyle="width: 3rem"></Column>
diff --git a/doc/datatable/rowselection/RowSelectEventsDoc.vue b/doc/datatable/rowselection/RowSelectEventsDoc.vue
index 438afd301..c6cddd283 100644
--- a/doc/datatable/rowselection/RowSelectEventsDoc.vue
+++ b/doc/datatable/rowselection/RowSelectEventsDoc.vue
@@ -23,7 +23,8 @@ export default {
             selectedProduct: null,
             metaKey: true,
             code: {
-                basic: `<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
+                basic: `
+<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
         @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
     <Column selectionMode="single" headerStyle="width: 3rem"></Column>
     <Column field="code" header="Code"></Column>
@@ -31,7 +32,8 @@ export default {
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
                 @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
@@ -67,7 +69,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false"
                 @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" tableStyle="min-width: 50rem">
diff --git a/doc/datatable/rowselection/SingleRowSelectionDoc.vue b/doc/datatable/rowselection/SingleRowSelectionDoc.vue
index 0f09c5d97..fa2633f29 100644
--- a/doc/datatable/rowselection/SingleRowSelectionDoc.vue
+++ b/doc/datatable/rowselection/SingleRowSelectionDoc.vue
@@ -34,7 +34,8 @@ export default {
             selectedProduct: null,
             metaKey: true,
             code: {
-                basic: `<InputSwitch v-model="metaKey" inputId="input-metakey" />
+                basic: `
+<InputSwitch v-model="metaKey" inputId="input-metakey" />
 
 <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :metaKeySelection="metaKey" dataKey="id" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
@@ -42,7 +43,8 @@ export default {
     <Column field="category" header="Category"></Column>
     <Column field="quantity" header="Quantity"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
@@ -73,7 +75,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
diff --git a/doc/datatable/samples/CustomersDoc.vue b/doc/datatable/samples/CustomersDoc.vue
index 4be707562..7a51cc0f4 100644
--- a/doc/datatable/samples/CustomersDoc.vue
+++ b/doc/datatable/samples/CustomersDoc.vue
@@ -126,7 +126,8 @@ export default {
             ],
             statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
             code: {
-                basic: `<DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
+                basic: `
+<DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
     :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
     <template #header>
         <div class="flex justify-content-between">
@@ -222,7 +223,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
             :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
@@ -411,7 +413,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu"
             :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
index 16b83efd0..e38f83b07 100644
--- a/doc/datatable/samples/ProductsDoc.vue
+++ b/doc/datatable/samples/ProductsDoc.vue
@@ -186,7 +186,8 @@ export default {
                 { label: 'OUTOFSTOCK', value: 'outofstock' }
             ],
             code: {
-                basic: `<Toolbar class="mb-4">
+                basic: `
+<Toolbar class="mb-4">
     <template #start>
         <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
         <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
@@ -240,7 +241,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div>
         <div class="card">
             <Toolbar class="mb-4">
@@ -527,7 +529,8 @@ export default {
 }
 <\/script>
 `,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <div class="card">
             <Toolbar class="mb-4">
diff --git a/doc/datatable/scroll/FlexibleScrollDoc.vue b/doc/datatable/scroll/FlexibleScrollDoc.vue
index 663d42a5a..a525a90db 100644
--- a/doc/datatable/scroll/FlexibleScrollDoc.vue
+++ b/doc/datatable/scroll/FlexibleScrollDoc.vue
@@ -32,7 +32,8 @@ export default {
             customers: null,
             dialogVisible: false,
             code: {
-                basic: `<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
     <DataTable :value="customers" scrollable scrollHeight="flex" tableStyle="min-width: 50rem">
         <Column field="name" header="Name"></Column>
@@ -44,7 +45,8 @@ export default {
         <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
     </template>
 </Dialog>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 
@@ -79,7 +81,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 
diff --git a/doc/datatable/scroll/FrozenColumnsDoc.vue b/doc/datatable/scroll/FrozenColumnsDoc.vue
index 32ea42744..c624c2aea 100644
--- a/doc/datatable/scroll/FrozenColumnsDoc.vue
+++ b/doc/datatable/scroll/FrozenColumnsDoc.vue
@@ -34,7 +34,8 @@ export default {
             customers: null,
             balanceFrozen: false,
             code: {
-                basic: `<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
+                basic: `
+<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
 <DataTable :value="customers" scrollable scrollHeight="400px" class="mt-4">
     <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
     <Column field="id" header="Id" style="min-width: 100px"></Column>
@@ -51,7 +52,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
 
@@ -96,7 +98,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
 
diff --git a/doc/datatable/scroll/FrozenRowsDoc.vue b/doc/datatable/scroll/FrozenRowsDoc.vue
index 6cf666a0b..8069dea8d 100644
--- a/doc/datatable/scroll/FrozenRowsDoc.vue
+++ b/doc/datatable/scroll/FrozenRowsDoc.vue
@@ -44,7 +44,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
     <Column field="name" header="Name"></Column>
     <Column field="country.name" header="Country"></Column>
     <Column field="representative.name" header="Representative"></Column>
@@ -55,7 +56,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
             <Column field="name" header="Name"></Column>
@@ -120,7 +122,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
             <Column field="name" header="Name"></Column>
diff --git a/doc/datatable/scroll/HorizontalScrollDoc.vue b/doc/datatable/scroll/HorizontalScrollDoc.vue
index e7cf0b84b..bc0ef3f81 100644
--- a/doc/datatable/scroll/HorizontalScrollDoc.vue
+++ b/doc/datatable/scroll/HorizontalScrollDoc.vue
@@ -30,7 +30,8 @@ export default {
         return {
             customers: null,
             code: {
-                basic: `<DataTable :value="customers" scrollable scrollHeight="400px">
+                basic: `
+<DataTable :value="customers" scrollable scrollHeight="400px">
     <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
     <Column field="name" header="Name" footer="Name" style="min-width: 200px"></Column>
     <Column field="country.name" header="Country" footer="Country" style="min-width: 200px"></Column>
@@ -45,7 +46,8 @@ export default {
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="customers" scrollable scrollHeight="400px">
             <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
@@ -86,7 +88,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="customers" scrollable scrollHeight="400px">
             <Column field="id" header="Id" footer="Id" style="min-width: 100px"></Column>
diff --git a/doc/datatable/scroll/VerticalScrollDoc.vue b/doc/datatable/scroll/VerticalScrollDoc.vue
index a85c79d87..e7c2bd793 100644
--- a/doc/datatable/scroll/VerticalScrollDoc.vue
+++ b/doc/datatable/scroll/VerticalScrollDoc.vue
@@ -21,13 +21,15 @@ export default {
         return {
             customers: null,
             code: {
-                basic: `<DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
     <Column field="name" header="Name"></Column>
     <Column field="country.name" header="Country"></Column>
     <Column field="representative.name" header="Representative"></Column>
     <Column field="company" header="Company"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
             <Column field="name" header="Name"></Column>
@@ -54,7 +56,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="customers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
             <Column field="name" header="Name"></Column>
diff --git a/doc/datatable/sort/MultipleColumnsDoc.vue b/doc/datatable/sort/MultipleColumnsDoc.vue
index 5ce88242e..0d5893bc5 100644
--- a/doc/datatable/sort/MultipleColumnsDoc.vue
+++ b/doc/datatable/sort/MultipleColumnsDoc.vue
@@ -21,13 +21,15 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
     <Column field="code" header="Code" sortable style="width: 25%"></Column>
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
@@ -52,7 +54,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" sortMode="multiple" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
diff --git a/doc/datatable/sort/PresortDoc.vue b/doc/datatable/sort/PresortDoc.vue
index c2c34c873..bbf0c1bde 100644
--- a/doc/datatable/sort/PresortDoc.vue
+++ b/doc/datatable/sort/PresortDoc.vue
@@ -29,7 +29,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
     <Column field="code" header="Code" sortable style="width: 20%"></Column>
     <Column field="name" header="Name" sortable style="width: 20%"></Column>
     <Column field="price" header="Price" :sortable="true">
@@ -40,7 +41,8 @@ export default {
     <Column field="category" header="Category" sortable style="width: 20%"></Column>
     <Column field="quantity" header="Quantity" sortable style="width: 20%"></Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 20%"></Column>
@@ -75,7 +77,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" sortField="price" :sortOrder="-1" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 20%"></Column>
diff --git a/doc/datatable/sort/RemovableSortDoc.vue b/doc/datatable/sort/RemovableSortDoc.vue
index b05afd84b..f20746a03 100644
--- a/doc/datatable/sort/RemovableSortDoc.vue
+++ b/doc/datatable/sort/RemovableSortDoc.vue
@@ -21,13 +21,15 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" removableSort tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" removableSort tableStyle="min-width: 50rem">
     <Column field="code" header="Code" sortable style="width: 25%"></Column>
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" removableSort tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
@@ -52,7 +54,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" removableSort tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
diff --git a/doc/datatable/sort/SingleColumnDoc.vue b/doc/datatable/sort/SingleColumnDoc.vue
index 7a7a6c0ea..b254b882d 100644
--- a/doc/datatable/sort/SingleColumnDoc.vue
+++ b/doc/datatable/sort/SingleColumnDoc.vue
@@ -21,13 +21,15 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataTable :value="products" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
     <Column field="code" header="Code" sortable style="width: 25%"></Column>
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
@@ -52,7 +54,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products" tableStyle="min-width: 50rem">
             <Column field="code" header="Code" sortable style="width: 25%"></Column>
diff --git a/doc/datatable/theming/TailwindDoc.vue b/doc/datatable/theming/TailwindDoc.vue
index de8225cf8..1c3464b76 100644
--- a/doc/datatable/theming/TailwindDoc.vue
+++ b/doc/datatable/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['CustomerService']" embedded />
     </DocSectionText>
@@ -322,7 +322,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
                 filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
diff --git a/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue b/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
index 461e4b6f7..03009ab3a 100644
--- a/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
+++ b/doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
@@ -62,7 +62,8 @@ export default {
             lazyLoading: false,
             loadLazyTimeout: null,
             code: {
-                basic: `<DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
+                basic: `
+<DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
         :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
     <Column field="id" header="Id" style="width: 20%">
         <template #loading>
@@ -100,7 +101,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
                 :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
@@ -184,7 +186,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
                 :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
diff --git a/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue b/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
index aa3a6cbba..5834c6fd5 100644
--- a/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
+++ b/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
@@ -26,14 +26,16 @@ export default {
         return {
             cars: null,
             code: {
-                basic: `<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
+                basic: `
+<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
     <Column field="id" header="Id" style="width: 20%"></Column>
     <Column field="vin" header="Vin" style="width: 20%"></Column>
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
             <Column field="id" header="Id" style="width: 20%"></Column>
@@ -59,7 +61,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
             <Column field="id" header="Id" style="width: 20%"></Column>
diff --git a/doc/dataview/BasicDoc.vue b/doc/dataview/BasicDoc.vue
index 8675d9c1b..d9aaccb0e 100644
--- a/doc/dataview/BasicDoc.vue
+++ b/doc/dataview/BasicDoc.vue
@@ -43,7 +43,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataView :value="products">
+                basic: `
+<DataView :value="products">
     <template #list="slotProps">
         <div class="col-12">
             <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
@@ -69,7 +70,8 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataView :value="products">
             <template #list="slotProps">
@@ -131,7 +133,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataView :value="products">
             <template #list="slotProps">
diff --git a/doc/dataview/ImportDoc.vue b/doc/dataview/ImportDoc.vue
index d7cb032e2..cb88470bf 100644
--- a/doc/dataview/ImportDoc.vue
+++ b/doc/dataview/ImportDoc.vue
@@ -8,8 +8,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `import DataView from 'primevue/dataview';
-import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions'   // optional`
+                basic: `
+import DataView from 'primevue/dataview';
+import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions'   // optional
+`
             }
         };
     }
diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
index accdff940..e4ec92bdf 100644
--- a/doc/dataview/LayoutDoc.vue
+++ b/doc/dataview/LayoutDoc.vue
@@ -74,7 +74,8 @@ export default {
             products: null,
             layout: 'grid',
             code: {
-                basic: `<DataView :value="products" :layout="layout">
+                basic: `
+<DataView :value="products" :layout="layout">
     <template #header>
         <div class="flex justify-content-end">
             <DataViewLayoutOptions v-model="layout" />
@@ -129,7 +130,8 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
@@ -221,7 +223,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
diff --git a/doc/dataview/LoadingDoc.vue b/doc/dataview/LoadingDoc.vue
index fe8159676..3df7ff697 100644
--- a/doc/dataview/LoadingDoc.vue
+++ b/doc/dataview/LoadingDoc.vue
@@ -65,7 +65,8 @@ export default {
             products: null,
             layout: 'grid',
             code: {
-                basic: `<DataView :value="products" :layout="layout">
+                basic: `
+<DataView :value="products" :layout="layout">
     <template #header>
         <div class="flex justify-content-end">
             <DataViewLayoutOptions v-model="layout" />
@@ -114,7 +115,8 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
@@ -200,7 +202,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
diff --git a/doc/dataview/PaginationDoc.vue b/doc/dataview/PaginationDoc.vue
index 6cdab6c9a..353351acd 100644
--- a/doc/dataview/PaginationDoc.vue
+++ b/doc/dataview/PaginationDoc.vue
@@ -41,7 +41,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<DataView :value="products" paginator :rows="5">
+                basic: `
+<DataView :value="products" paginator :rows="5">
     <template #list="slotProps">
         <div class="col-12">
             <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
@@ -67,7 +68,8 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataView :value="products" paginator :rows="5">
             <template #list="slotProps">
@@ -129,7 +131,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataView :value="products" paginator :rows="5">
             <template #list="slotProps">
diff --git a/doc/dataview/PrimeFlexDoc.vue b/doc/dataview/PrimeFlexDoc.vue
index 94f85a516..dff475d5d 100644
--- a/doc/dataview/PrimeFlexDoc.vue
+++ b/doc/dataview/PrimeFlexDoc.vue
@@ -14,7 +14,9 @@ export default {
                 basic: `npm install primeflex`
             },
             code2: {
-                basic: `import 'primeflex/primeflex.css';`
+                basic: `
+import 'primeflex/primeflex.css';
+`
             }
         };
     }
diff --git a/doc/dataview/SortingDoc.vue b/doc/dataview/SortingDoc.vue
index 5200707bc..d40455fa7 100644
--- a/doc/dataview/SortingDoc.vue
+++ b/doc/dataview/SortingDoc.vue
@@ -51,7 +51,8 @@ export default {
                 { label: 'Price Low to High', value: 'price' }
             ],
             code: {
-                basic: `<DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
+                basic: `
+<DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
     <template #header>
         <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
     </template>
@@ -80,7 +81,8 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
             <template #header>
@@ -166,7 +168,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataView :value="products" :sortOrder="sortOrder" :sortField="sortField">
             <template #header>
diff --git a/doc/dataview/pt/PTDoc.vue b/doc/dataview/pt/PTDoc.vue
index f954a340f..cc78717ba 100644
--- a/doc/dataview/pt/PTDoc.vue
+++ b/doc/dataview/pt/PTDoc.vue
@@ -81,7 +81,8 @@ export default {
             products: null,
             layout: 'grid',
             code: {
-                basic: `<DataView
+                basic: `
+<DataView
     :value="products"
     :layout="layout"
     :pt="{
@@ -148,7 +149,8 @@ export default {
         </div>
     </template>
 </DataView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataView
             :value="products"
@@ -252,7 +254,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataView
             :value="products"
diff --git a/doc/dataview/theming/TailwindDoc.vue b/doc/dataview/theming/TailwindDoc.vue
index b4d66d795..81c8bfa1e 100644
--- a/doc/dataview/theming/TailwindDoc.vue
+++ b/doc/dataview/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['ProductService']" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     dataview: {
         content: {
             class: [
@@ -49,7 +48,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataView :value="products" :layout="layout">
             <template #header>
diff --git a/doc/deferredcontent/AccessibilityDoc.vue b/doc/deferredcontent/AccessibilityDoc.vue
index 36995a15f..3dfbf56cd 100644
--- a/doc/deferredcontent/AccessibilityDoc.vue
+++ b/doc/deferredcontent/AccessibilityDoc.vue
@@ -17,7 +17,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
+                basic: `
+<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
     Content
 </DeferredContent>`
             }
diff --git a/doc/deferredcontent/BasicDoc.vue b/doc/deferredcontent/BasicDoc.vue
index c39a960dd..afba64b31 100644
--- a/doc/deferredcontent/BasicDoc.vue
+++ b/doc/deferredcontent/BasicDoc.vue
@@ -17,10 +17,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<DeferredContent @load="onImageLoad">
+                basic: `
+<DeferredContent @load="onImageLoad">
     <img src="/images/nature/nature4.jpg" alt="Nature" />
 </DeferredContent>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Toast />
         <div style="height: 800px">Scroll down to lazy load an image.</div>
@@ -40,7 +42,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Toast />
         <div style="height: 800px">Scroll down to lazy load an image.</div>
diff --git a/doc/deferredcontent/DataTableDoc.vue b/doc/deferredcontent/DataTableDoc.vue
index ec79813e8..dd2acc67a 100644
--- a/doc/deferredcontent/DataTableDoc.vue
+++ b/doc/deferredcontent/DataTableDoc.vue
@@ -23,7 +23,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
+                basic: `
+<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
     <DataTable :value="products">
         <Column field="code" header="Code"></Column>
         <Column field="name" header="Name"></Column>
@@ -31,7 +32,8 @@ export default {
         <Column field="quantity" header="Quantity"></Column>
     </DataTable>
 </DeferredContent>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Toast />
         <div style="height: 800px">Scroll down to lazy load a DataTable.</div>
@@ -64,7 +66,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Toast />
         <div style="height: 800px">Scroll down to lazy load a DataTable.</div>
diff --git a/doc/deferredcontent/ImportDoc.vue b/doc/deferredcontent/ImportDoc.vue
index 41cc9f442..cc9046b0c 100644
--- a/doc/deferredcontent/ImportDoc.vue
+++ b/doc/deferredcontent/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import DeferredContent from 'primevue/deferredcontent';`
+                basic: `
+import DeferredContent from 'primevue/deferredcontent';
+`
             }
         };
     }
diff --git a/doc/dialog/AccessibilityDoc.vue b/doc/dialog/AccessibilityDoc.vue
index 46e464469..4b5d9a99d 100644
--- a/doc/dialog/AccessibilityDoc.vue
+++ b/doc/dialog/AccessibilityDoc.vue
@@ -76,7 +76,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" />
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" />
 
 <Dialog id="dlg" header="Header" v-model:visible="visible" :style="{ width: '50vw' }">
     <p>Content</p>
diff --git a/doc/dialog/BasicDoc.vue b/doc/dialog/BasicDoc.vue
index 82af6368a..a542ee3ee 100644
--- a/doc/dialog/BasicDoc.vue
+++ b/doc/dialog/BasicDoc.vue
@@ -21,7 +21,8 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
     <p>
@@ -29,7 +30,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>
 </Dialog>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
@@ -50,7 +52,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
diff --git a/doc/dialog/FooterDoc.vue b/doc/dialog/FooterDoc.vue
index 65caa6813..304d99753 100644
--- a/doc/dialog/FooterDoc.vue
+++ b/doc/dialog/FooterDoc.vue
@@ -26,7 +26,8 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
     <p>
@@ -38,7 +39,8 @@ export default {
         <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
     </template>
 </Dialog>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
@@ -63,7 +65,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
diff --git a/doc/dialog/ImportDoc.vue b/doc/dialog/ImportDoc.vue
index 51ac1668b..2896cc972 100644
--- a/doc/dialog/ImportDoc.vue
+++ b/doc/dialog/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Dialog from 'primevue/dialog';`
+                basic: `
+import Dialog from 'primevue/dialog';
+`
             }
         };
     }
diff --git a/doc/dialog/LongContentDoc.vue b/doc/dialog/LongContentDoc.vue
index 27e6a9732..7b08d2bd7 100644
--- a/doc/dialog/LongContentDoc.vue
+++ b/doc/dialog/LongContentDoc.vue
@@ -50,7 +50,8 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
     <p class="mb-5">
@@ -86,7 +87,8 @@ export default {
         non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
     </p>
 </Dialog>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
@@ -135,7 +137,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
diff --git a/doc/dialog/MaximizableDoc.vue b/doc/dialog/MaximizableDoc.vue
index 7d3e75441..de44a009f 100644
--- a/doc/dialog/MaximizableDoc.vue
+++ b/doc/dialog/MaximizableDoc.vue
@@ -21,7 +21,8 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50vw' }">
     <p>
@@ -29,7 +30,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>
 </Dialog>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50vw' }">
@@ -50,7 +52,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50vw' }">
diff --git a/doc/dialog/PositionDoc.vue b/doc/dialog/PositionDoc.vue
index 89e9854c1..e68315f38 100644
--- a/doc/dialog/PositionDoc.vue
+++ b/doc/dialog/PositionDoc.vue
@@ -39,7 +39,8 @@ export default {
             position: 'center',
             visible: false,
             code: {
-                basic: `<div class="flex flex-wrap justify-content-center gap-2 mb-2">
+                basic: `
+<div class="flex flex-wrap justify-content-center gap-2 mb-2">
     <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
     <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
 </div>
@@ -64,7 +65,8 @@ export default {
         <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
     </template>
 </Dialog>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
             <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
@@ -110,7 +112,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
             <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
diff --git a/doc/dialog/ResponsiveDoc.vue b/doc/dialog/ResponsiveDoc.vue
index 8a0260484..10c604216 100644
--- a/doc/dialog/ResponsiveDoc.vue
+++ b/doc/dialog/ResponsiveDoc.vue
@@ -25,7 +25,8 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '641px': '100vw' }">
     <p>
@@ -33,7 +34,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>
 </Dialog>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '641px': '100vw' }">
@@ -54,7 +56,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '641px': '100vw' }">
diff --git a/doc/dialog/TemplateDoc.vue b/doc/dialog/TemplateDoc.vue
index 504ecc6b1..686341711 100644
--- a/doc/dialog/TemplateDoc.vue
+++ b/doc/dialog/TemplateDoc.vue
@@ -38,7 +38,8 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
+                basic: `
+<Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '40vw' }">
     <template #container="slotProps">
@@ -63,7 +64,8 @@ export default {
         </div>
     </template>
 </Dialog>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
 
@@ -102,7 +104,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
 
diff --git a/doc/dialog/WithoutModalDoc.vue b/doc/dialog/WithoutModalDoc.vue
index 5aefd4de6..00441f7ca 100644
--- a/doc/dialog/WithoutModalDoc.vue
+++ b/doc/dialog/WithoutModalDoc.vue
@@ -21,7 +21,8 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
 <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }">
     <p>
@@ -29,7 +30,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>
 </Dialog>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }">
@@ -50,7 +52,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }">
diff --git a/doc/dialog/pt/PTDoc.vue b/doc/dialog/pt/PTDoc.vue
index 6bcb289ba..2ab64fe65 100644
--- a/doc/dialog/pt/PTDoc.vue
+++ b/doc/dialog/pt/PTDoc.vue
@@ -26,7 +26,8 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<Dialog
+                basic: `
+<Dialog
     v-model:visible="visible"
     modal
     header="Header"
@@ -36,7 +37,8 @@ export default {
 >
     <p>Lorem ipsum </p>
 </Dialog>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
@@ -65,7 +67,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
 
diff --git a/doc/dialog/theming/TailwindDoc.vue b/doc/dialog/theming/TailwindDoc.vue
index 0ac2a11f1..b583aca02 100644
--- a/doc/dialog/theming/TailwindDoc.vue
+++ b/doc/dialog/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     dialog: {
         root: ({ state }) => ({
             class: [
@@ -102,7 +101,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
diff --git a/doc/divider/BasicDoc.vue b/doc/divider/BasicDoc.vue
index f1e8fc972..bf9a75584 100644
--- a/doc/divider/BasicDoc.vue
+++ b/doc/divider/BasicDoc.vue
@@ -37,7 +37,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<p>
+                basic: `
+<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. 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>
@@ -62,7 +63,8 @@ export default {
     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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <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. Duis
@@ -94,7 +96,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <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. Duis
diff --git a/doc/divider/ContentDoc.vue b/doc/divider/ContentDoc.vue
index 89320e0f9..63aa99c94 100644
--- a/doc/divider/ContentDoc.vue
+++ b/doc/divider/ContentDoc.vue
@@ -46,7 +46,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<p>
+                basic: `
+<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. 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>
@@ -77,7 +78,8 @@ export default {
     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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <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. Duis
@@ -115,7 +117,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <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. Duis
diff --git a/doc/divider/ImportDoc.vue b/doc/divider/ImportDoc.vue
index 3cdf0f21d..8199ce49f 100644
--- a/doc/divider/ImportDoc.vue
+++ b/doc/divider/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Divider from 'primevue/divider';`
+                basic: `
+import Divider from 'primevue/divider';
+`
             }
         };
     }
diff --git a/doc/divider/LoginDoc.vue b/doc/divider/LoginDoc.vue
index cd3fc57e8..2ea41db9e 100644
--- a/doc/divider/LoginDoc.vue
+++ b/doc/divider/LoginDoc.vue
@@ -32,7 +32,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div class="flex flex-column md:flex-row">
+                basic: `
+<div class="flex flex-column md:flex-row">
     <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
         <div class="flex align-items-center gap-2">
             <label>Username</label>
@@ -52,7 +53,8 @@ export default {
         <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
     </div>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex flex-column md:flex-row">
             <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
@@ -79,7 +81,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex flex-column md:flex-row">
             <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
diff --git a/doc/divider/TypeDoc.vue b/doc/divider/TypeDoc.vue
index 60b618fa0..e6c81ae61 100644
--- a/doc/divider/TypeDoc.vue
+++ b/doc/divider/TypeDoc.vue
@@ -37,7 +37,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<p>
+                basic: `
+<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. 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>
@@ -62,7 +63,8 @@ export default {
     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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <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. Duis
@@ -94,7 +96,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <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. Duis
diff --git a/doc/divider/VerticalDoc.vue b/doc/divider/VerticalDoc.vue
index 16469d406..b86039a6d 100644
--- a/doc/divider/VerticalDoc.vue
+++ b/doc/divider/VerticalDoc.vue
@@ -30,7 +30,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<p>
+                basic: `
+<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. 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>
@@ -48,7 +49,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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex">
         <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. Duis
@@ -73,7 +75,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex">
         <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. Duis
diff --git a/doc/divider/pt/PTDoc.vue b/doc/divider/pt/PTDoc.vue
index 4ab5695f3..645974570 100644
--- a/doc/divider/pt/PTDoc.vue
+++ b/doc/divider/pt/PTDoc.vue
@@ -23,7 +23,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<p>
+                basic: `
+<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. 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>
@@ -36,7 +37,8 @@ export default {
     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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <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. Duis
@@ -53,7 +55,8 @@ export default {
         </p>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <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. Duis
diff --git a/doc/divider/theming/TailwindDoc.vue b/doc/divider/theming/TailwindDoc.vue
index 179b46dfa..0e5eddee8 100644
--- a/doc/divider/theming/TailwindDoc.vue
+++ b/doc/divider/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     divider: {
         root: ({ props }) => ({
             class: [
@@ -39,7 +38,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card text-gray-700 dark:text-white/80">
         <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. Duis
diff --git a/doc/dock/AdvancedDoc.vue b/doc/dock/AdvancedDoc.vue
index 120493454..e4be3fee9 100644
--- a/doc/dock/AdvancedDoc.vue
+++ b/doc/dock/AdvancedDoc.vue
@@ -243,14 +243,16 @@ export default {
                 }
             ],
             code: {
-                basic: `<Dock :model="items">
+                basic: `
+<Dock :model="items">
     <template #item="{ item }">
         <a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
             <img :alt="item.label" :src="item.icon" style="width: 100%" />
         </a>
     </template>
 </Dock>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card dock-demo">
         <Toast position="top-center" group="tc" />
         <Menubar :model="menubarItems">
@@ -556,7 +558,8 @@ export default {
     border-radius: 0;
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <div class="card dock-demo">
             <Toast position="top-center" group="tc" />
diff --git a/doc/dock/BasicDoc.vue b/doc/dock/BasicDoc.vue
index 4843abd7d..78e9d79e6 100644
--- a/doc/dock/BasicDoc.vue
+++ b/doc/dock/BasicDoc.vue
@@ -62,12 +62,14 @@ export default {
                 }
             ],
             code: {
-                basic: `<Dock :model="items" :position="position">
+                basic: `
+<Dock :model="items" :position="position">
     <template #icon="{ item }">
         <img :alt="item.label" :src="item.icon" style="width: 100%" />
     </template>
 </Dock>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card dock-demo">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="pos of positions" :key="pos.label" class="flex align-items-center">
@@ -146,7 +148,8 @@ export default {
     z-index: 1000;
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card dock-demo">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="pos of positions" :key="pos.label" class="flex align-items-center">
diff --git a/doc/dock/ImportDoc.vue b/doc/dock/ImportDoc.vue
index e9f230544..8956bb04d 100644
--- a/doc/dock/ImportDoc.vue
+++ b/doc/dock/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Dock from 'primevue/dock';`
+                basic: `
+import Dock from 'primevue/dock';
+`
             }
         };
     }
diff --git a/doc/dock/pt/PTDoc.vue b/doc/dock/pt/PTDoc.vue
index a117dc8e6..1c248193c 100644
--- a/doc/dock/pt/PTDoc.vue
+++ b/doc/dock/pt/PTDoc.vue
@@ -35,7 +35,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Dock :model="items" position="bottom"
+                basic: `
+<Dock :model="items" position="bottom"
     :pt="{ 
         container: {
             style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
@@ -46,7 +47,8 @@ export default {
         <img :alt="item.label" :src="item.icon" style="width: 100%" />
     </template>
 </Dock>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card dock-demo">
         <div class="dock-window">
             <Dock :model="items" position="bottom"
@@ -106,7 +108,8 @@ export default {
     z-index: 1000;
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card dock-demo">
         <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
             <Dock :model="items" position="bottom"
diff --git a/doc/dock/theming/TailwindDoc.vue b/doc/dock/theming/TailwindDoc.vue
index ec248b8d9..e3a1d8afd 100644
--- a/doc/dock/theming/TailwindDoc.vue
+++ b/doc/dock/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     dock: {
         root: ({ props }) => ({
             class: [
@@ -66,7 +65,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card dock-demo">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="pos of positions" :key="pos.label" class="flex items-center">
diff --git a/doc/dropdown/AccessibilityDoc.vue b/doc/dropdown/AccessibilityDoc.vue
index b645fb863..e2573e379 100644
--- a/doc/dropdown/AccessibilityDoc.vue
+++ b/doc/dropdown/AccessibilityDoc.vue
@@ -184,7 +184,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="dd1"></span>Options</span>
+                basic: `
+<span id="dd1"></span>Options</span>
 <Dropdown aria-labelledby="dd1" />
 
 <Dropdown aria-label="Options" />`
diff --git a/doc/dropdown/BasicDoc.vue b/doc/dropdown/BasicDoc.vue
index 52db2bf11..add36a60b 100644
--- a/doc/dropdown/BasicDoc.vue
+++ b/doc/dropdown/BasicDoc.vue
@@ -24,8 +24,10 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
-                options: `<template>
+                basic: `
+<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">
         <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
@@ -47,7 +49,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/dropdown/ClearIconDoc.vue b/doc/dropdown/ClearIconDoc.vue
index 87ffff3e1..9c3b89534 100644
--- a/doc/dropdown/ClearIconDoc.vue
+++ b/doc/dropdown/ClearIconDoc.vue
@@ -21,8 +21,10 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
-                options: `<template>
+                basic: `
+<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">
         <Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
@@ -44,7 +46,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="cities" showClear optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/dropdown/DisabledDoc.vue b/doc/dropdown/DisabledDoc.vue
index 0548d6af8..8a5181708 100644
--- a/doc/dropdown/DisabledDoc.vue
+++ b/doc/dropdown/DisabledDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />`,
-                options: `<template>
+                basic: `
+<Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
@@ -23,7 +25,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown disabled placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/dropdown/EditableDoc.vue b/doc/dropdown/EditableDoc.vue
index eb5a62472..ed6a5be43 100644
--- a/doc/dropdown/EditableDoc.vue
+++ b/doc/dropdown/EditableDoc.vue
@@ -21,8 +21,10 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />`,
-                options: `<template>
+                basic: `
+<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">
         <Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
@@ -44,7 +46,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" editable :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/dropdown/FilterDoc.vue b/doc/dropdown/FilterDoc.vue
index 950e0e1f8..d35c7a533 100644
--- a/doc/dropdown/FilterDoc.vue
+++ b/doc/dropdown/FilterDoc.vue
@@ -42,7 +42,8 @@ export default {
                 { name: 'United States', code: 'US' }
             ],
             code: {
-                basic: `<Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+                basic: `
+<Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
     <template #value="slotProps">
         <div v-if="slotProps.value" class="flex align-items-center">
             <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@@ -59,7 +60,8 @@ export default {
         </div>
     </template>
 </Dropdown>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
@@ -102,7 +104,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCountry" :options="countries" filter optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
diff --git a/doc/dropdown/FloatLabelDoc.vue b/doc/dropdown/FloatLabelDoc.vue
index 46d98fd34..3b02ad5d4 100644
--- a/doc/dropdown/FloatLabelDoc.vue
+++ b/doc/dropdown/FloatLabelDoc.vue
@@ -24,11 +24,13 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<div class="p-float-label">
+                basic: `
+<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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <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" />
@@ -53,7 +55,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <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" />
diff --git a/doc/dropdown/GroupDoc.vue b/doc/dropdown/GroupDoc.vue
index 443033471..10f22aea3 100644
--- a/doc/dropdown/GroupDoc.vue
+++ b/doc/dropdown/GroupDoc.vue
@@ -56,7 +56,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
+                basic: `
+<Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
     <template #optiongroup="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.option.code.toLowerCase()}\`" style="width: 18px" />
@@ -64,7 +65,8 @@ export default {
         </div>
     </template>
 </Dropdown>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
             <template #optiongroup="slotProps">
@@ -118,7 +120,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-14rem">
             <template #optiongroup="slotProps">
diff --git a/doc/dropdown/ImportDoc.vue b/doc/dropdown/ImportDoc.vue
index 285b01560..7d6d94424 100644
--- a/doc/dropdown/ImportDoc.vue
+++ b/doc/dropdown/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Dropdown from 'primevue/dropdown';`
+                basic: `
+import Dropdown from 'primevue/dropdown';
+`
             }
         };
     }
diff --git a/doc/dropdown/InvalidDoc.vue b/doc/dropdown/InvalidDoc.vue
index 4759e1c08..913e048a7 100644
--- a/doc/dropdown/InvalidDoc.vue
+++ b/doc/dropdown/InvalidDoc.vue
@@ -21,8 +21,10 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />`,
-                options: `<template>
+                basic: `
+<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">
         <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />
     </div>
@@ -44,7 +46,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />
     </div>
diff --git a/doc/dropdown/LazyVirtualScrollDoc.vue b/doc/dropdown/LazyVirtualScrollDoc.vue
index 2a67d5ff1..5a1e240c7 100644
--- a/doc/dropdown/LazyVirtualScrollDoc.vue
+++ b/doc/dropdown/LazyVirtualScrollDoc.vue
@@ -22,9 +22,11 @@ export default {
             items: Array.from({ length: 100000 }),
             loading: false,
             code: {
-                basic: `<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-14rem"
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <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" />
@@ -65,7 +67,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <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" />
diff --git a/doc/dropdown/LoadingStateDoc.vue b/doc/dropdown/LoadingStateDoc.vue
index a87b6610a..aaead6d28 100644
--- a/doc/dropdown/LoadingStateDoc.vue
+++ b/doc/dropdown/LoadingStateDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>`,
-                options: `<template>
+                basic: `
+<Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>
     </div>
@@ -22,7 +24,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown placeholder="Loading..." loading class="w-full md:w-14rem"></Dropdown>
     </div>
diff --git a/doc/dropdown/TemplateDoc.vue b/doc/dropdown/TemplateDoc.vue
index 5997db4c1..47986bc1e 100644
--- a/doc/dropdown/TemplateDoc.vue
+++ b/doc/dropdown/TemplateDoc.vue
@@ -42,7 +42,8 @@ export default {
                 { name: 'United States', code: 'US' }
             ],
             code: {
-                basic: `<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
+                basic: `
+<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
     <template #value="slotProps">
         <div v-if="slotProps.value" class="flex align-items-center">
             <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`mr-2 flag flag-\${slotProps.value.code.toLowerCase()}\`" style="width: 18px" />
@@ -59,7 +60,8 @@ export default {
         </div>
     </template>
 </Dropdown>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
@@ -102,7 +104,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full md:w-14rem">
             <template #value="slotProps">
diff --git a/doc/dropdown/VirtualScrollDoc.vue b/doc/dropdown/VirtualScrollDoc.vue
index b936ab8be..da72b8a4a 100644
--- a/doc/dropdown/VirtualScrollDoc.vue
+++ b/doc/dropdown/VirtualScrollDoc.vue
@@ -18,9 +18,11 @@ export default {
             selectedItem: null,
             items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
             code: {
-                basic: `<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+                basic: `
+<Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
     :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
             :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
@@ -37,7 +39,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
             :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item" class="w-full md:w-14rem" />
diff --git a/doc/dropdown/form/VeeValidateDoc.vue b/doc/dropdown/form/VeeValidateDoc.vue
index e882d9f64..3f4ae5489 100644
--- a/doc/dropdown/form/VeeValidateDoc.vue
+++ b/doc/dropdown/form/VeeValidateDoc.vue
@@ -52,7 +52,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
@@ -66,7 +67,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
@@ -121,7 +123,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
diff --git a/doc/dropdown/pt/PTDoc.vue b/doc/dropdown/pt/PTDoc.vue
index 84bac93ea..4618c74e2 100644
--- a/doc/dropdown/pt/PTDoc.vue
+++ b/doc/dropdown/pt/PTDoc.vue
@@ -30,7 +30,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<Dropdown
+                basic: `
+<Dropdown
     v-model="selectedCity"
     :options="cities"
     optionLabel="name"
@@ -42,7 +43,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown
             v-model="selectedCity"
@@ -75,7 +77,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Dropdown
             v-model="selectedCity"
diff --git a/doc/dropdown/theming/TailwindDoc.vue b/doc/dropdown/theming/TailwindDoc.vue
index 8fdfc12c5..180a2fcad 100644
--- a/doc/dropdown/theming/TailwindDoc.vue
+++ b/doc/dropdown/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -92,7 +91,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/dynamicdialog/CloseDialogDoc.vue b/doc/dynamicdialog/CloseDialogDoc.vue
index 3cf7d2bf6..d5a4b4ccd 100644
--- a/doc/dynamicdialog/CloseDialogDoc.vue
+++ b/doc/dynamicdialog/CloseDialogDoc.vue
@@ -10,8 +10,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-export default {
+                basic: `export default {
     inject: ['dialogRef'],
     methods:{
         closeDialog() {
diff --git a/doc/dynamicdialog/CustomizationDoc.vue b/doc/dynamicdialog/CustomizationDoc.vue
index 6e846745e..dd65751a6 100644
--- a/doc/dynamicdialog/CustomizationDoc.vue
+++ b/doc/dynamicdialog/CustomizationDoc.vue
@@ -10,7 +10,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import { markRaw } from 'vue';
+                basic: `
+import { markRaw } from 'vue';
 import ProductListDemo from './ProductListDemo';
 import FooterDemo from './FooterDemo';
 
diff --git a/doc/dynamicdialog/DialogServiceDoc.vue b/doc/dynamicdialog/DialogServiceDoc.vue
index da5573bf3..4c9ca587b 100644
--- a/doc/dynamicdialog/DialogServiceDoc.vue
+++ b/doc/dynamicdialog/DialogServiceDoc.vue
@@ -14,14 +14,16 @@ export default {
     data() {
         return {
             code1: {
-                basic: `import {createApp} from 'vue';
+                basic: `
+import {createApp} from 'vue';
 import DialogService from 'primevue/dialogservice';
 
 const app = createApp(App);
 app.use(DialogService);`
             },
             code2: {
-                basic: `import { useDialog } from 'primevue/usedialog';
+                basic: `
+import { useDialog } from 'primevue/usedialog';
 
 const dialog = useDialog();`,
                 options: `const dialogRef = this.$dialog;`,
diff --git a/doc/dynamicdialog/ImportDoc.vue b/doc/dynamicdialog/ImportDoc.vue
index dc51f860a..6c1e66a18 100644
--- a/doc/dynamicdialog/ImportDoc.vue
+++ b/doc/dynamicdialog/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import DynamicDialog from 'primevue/dynamicdialog';`
+                basic: `
+import DynamicDialog from 'primevue/dynamicdialog';
+`
             }
         };
     }
diff --git a/doc/dynamicdialog/OpenDialogDoc.vue b/doc/dynamicdialog/OpenDialogDoc.vue
index e0db3af1c..a77a96672 100644
--- a/doc/dynamicdialog/OpenDialogDoc.vue
+++ b/doc/dynamicdialog/OpenDialogDoc.vue
@@ -10,7 +10,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import ProductListDemo from './ProductListDemo';
+                basic: `
+import ProductListDemo from './ProductListDemo';
 
 export default {
     methods:{
diff --git a/doc/dynamicdialog/PassingDataDoc.vue b/doc/dynamicdialog/PassingDataDoc.vue
index 778f6af80..39a4babb3 100644
--- a/doc/dynamicdialog/PassingDataDoc.vue
+++ b/doc/dynamicdialog/PassingDataDoc.vue
@@ -24,8 +24,7 @@ this.$dialog.open(ProductListDemo, {
 };`
             },
             code2: {
-                basic: `
-export default {
+                basic: `export default {
     inject: ['dialogRef'],
     mounted:{
         const params = this.dialogRef.data; // {user: 'primetime'}
@@ -41,8 +40,7 @@ this.$dialog.open(ProductListDemo, {
 );`
             },
             code4: {
-                basic: `
-export default {
+                basic: `export default {
     inject: ['dialogRef'],
     methods:{
         closeDialog() {
diff --git a/doc/dynamicdialog/UsageDoc.vue b/doc/dynamicdialog/UsageDoc.vue
index 901bb8ca5..2fa311947 100644
--- a/doc/dynamicdialog/UsageDoc.vue
+++ b/doc/dynamicdialog/UsageDoc.vue
@@ -22,10 +22,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+                basic: `
+<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
 
 <DynamicDialog />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
         <Toast />
@@ -72,7 +74,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
         <Toast />
diff --git a/doc/dynamicdialog/pt/PTDoc.vue b/doc/dynamicdialog/pt/PTDoc.vue
index 27b5a0b49..b58499063 100644
--- a/doc/dynamicdialog/pt/PTDoc.vue
+++ b/doc/dynamicdialog/pt/PTDoc.vue
@@ -8,19 +8,22 @@ export default {
     data() {
         return {
             code: {
-                basic: `<DynamicDialog
+                basic: `
+<DynamicDialog
     :pt="{
         root: { class: 'w-12 sm:w-9 md:w-6' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <DynamicDialog
         :pt="{
             root: { class: 'w-12 sm:w-9 md:w-6' }
         }"
     />
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <DynamicDialog
         :pt="{
             root: { class: 'w-12 sm:w-9 md:w-6' }
diff --git a/doc/dynamicdialog/theming/TailwindDoc.vue b/doc/dynamicdialog/theming/TailwindDoc.vue
index b741fc247..0e3c88f4c 100644
--- a/doc/dynamicdialog/theming/TailwindDoc.vue
+++ b/doc/dynamicdialog/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     dialog: {
         root: ({ state }) => ({
             class: [
@@ -102,7 +101,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
         <Toast />
diff --git a/doc/editor/BasicDoc.vue b/doc/editor/BasicDoc.vue
index c75dff274..fb0567cf4 100644
--- a/doc/editor/BasicDoc.vue
+++ b/doc/editor/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<Editor v-model="value" editorStyle="height: 320px" />`,
-                options: `<template>
+                basic: `
+<Editor v-model="value" editorStyle="height: 320px" />`,
+                options: `
+<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px" />
     </div>
diff --git a/doc/editor/ImportDoc.vue b/doc/editor/ImportDoc.vue
index 25ad028b4..8a776cd52 100644
--- a/doc/editor/ImportDoc.vue
+++ b/doc/editor/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Editor from 'primevue/editor';`
+                basic: `
+import Editor from 'primevue/editor';
+`
             }
         };
     }
diff --git a/doc/editor/ReadOnlyDoc.vue b/doc/editor/ReadOnlyDoc.vue
index 27717f989..fee704c10 100644
--- a/doc/editor/ReadOnlyDoc.vue
+++ b/doc/editor/ReadOnlyDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 'Always bet on Prime',
             code: {
-                basic: `<Editor v-model="value" editorStyle="height: 320px" readonly />`,
-                options: `<template>
+                basic: `
+<Editor v-model="value" editorStyle="height: 320px" readonly />`,
+                options: `
+<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px" readonly />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px" readonly />
     </div>
diff --git a/doc/editor/TemplateDoc.vue b/doc/editor/TemplateDoc.vue
index 87ed1fb7e..cc2411c36 100644
--- a/doc/editor/TemplateDoc.vue
+++ b/doc/editor/TemplateDoc.vue
@@ -22,7 +22,8 @@ export default {
         return {
             value: '<div>Hello World!</div><div>PrimeVue <b>Editor</b> Rocks</div><div><br></div>',
             code: {
-                basic: `<Editor v-model="value" editorStyle="height: 320px">
+                basic: `
+<Editor v-model="value" editorStyle="height: 320px">
     <template v-slot:toolbar>
         <span class="ql-formats">
             <button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
@@ -31,7 +32,8 @@ export default {
         </span>
     </template>
 </Editor>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px">
             <template v-slot:toolbar>
@@ -54,7 +56,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px">
             <template v-slot:toolbar>
diff --git a/doc/editor/form/VeeValidateDoc.vue b/doc/editor/form/VeeValidateDoc.vue
index 2eae7bd36..489924644 100644
--- a/doc/editor/form/VeeValidateDoc.vue
+++ b/doc/editor/form/VeeValidateDoc.vue
@@ -52,7 +52,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card">
         <form @submit="onSubmit">
             <Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
@@ -72,7 +73,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <form @submit="onSubmit">
             <Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
@@ -122,7 +124,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <form @submit="onSubmit">
             <Editor v-model="value" editorStyle="height: 320px" aria-describedby="editor-error">
diff --git a/doc/editor/pt/PTDoc.vue b/doc/editor/pt/PTDoc.vue
index 7806802ba..9bf43877d 100644
--- a/doc/editor/pt/PTDoc.vue
+++ b/doc/editor/pt/PTDoc.vue
@@ -18,14 +18,16 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<Editor
+                basic: `
+<Editor
     v-model="value"
     :pt="{
         content: { style: { height: '320px' } },
         toolbar: { class: 'surface-ground' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Editor
             v-model="value"
@@ -46,7 +48,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Editor
             v-model="value"
diff --git a/doc/editor/theming/TailwindDoc.vue b/doc/editor/theming/TailwindDoc.vue
index 3d183dd14..039a3c137 100644
--- a/doc/editor/theming/TailwindDoc.vue
+++ b/doc/editor/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :dependencies="{ quill: '1.3.7' }" component="Editor" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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']
@@ -32,7 +31,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px" />
     </div>
diff --git a/doc/fieldset/BasicDoc.vue b/doc/fieldset/BasicDoc.vue
index 2367c1bd6..c89bd849f 100644
--- a/doc/fieldset/BasicDoc.vue
+++ b/doc/fieldset/BasicDoc.vue
@@ -18,13 +18,15 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Fieldset legend="Header">
+                basic: `
+<Fieldset legend="Header">
     <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.
         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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Fieldset legend="Header">
             <p>
@@ -37,7 +39,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Fieldset legend="Header">
             <p>
diff --git a/doc/fieldset/ImportDoc.vue b/doc/fieldset/ImportDoc.vue
index 6976d5ba4..25872c23e 100644
--- a/doc/fieldset/ImportDoc.vue
+++ b/doc/fieldset/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Fieldset from 'primevue/fieldset';`
+                basic: `
+import Fieldset from 'primevue/fieldset';
+`
             }
         };
     }
diff --git a/doc/fieldset/TemplateDoc.vue b/doc/fieldset/TemplateDoc.vue
index b3e9c8494..435d76f2b 100644
--- a/doc/fieldset/TemplateDoc.vue
+++ b/doc/fieldset/TemplateDoc.vue
@@ -24,7 +24,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Fieldset>
+                basic: `
+<Fieldset>
     <template #legend>
         <div class="flex align-items-center text-primary">
             <span class="pi pi-user mr-2"></span>
@@ -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>
 </Fieldset>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Fieldset>
             <template #legend>
@@ -55,7 +57,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Fieldset>
             <template #legend>
diff --git a/doc/fieldset/ToggleableDoc.vue b/doc/fieldset/ToggleableDoc.vue
index 512365a3f..d9a617781 100644
--- a/doc/fieldset/ToggleableDoc.vue
+++ b/doc/fieldset/ToggleableDoc.vue
@@ -21,13 +21,15 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Fieldset legend="Header" :toggleable="true">
+                basic: `
+<Fieldset legend="Header" :toggleable="true">
     <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. 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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Fieldset legend="Header" :toggleable="true">
             <p>
@@ -40,7 +42,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Fieldset legend="Header" :toggleable="true">
             <p>
diff --git a/doc/fieldset/pt/PTDoc.vue b/doc/fieldset/pt/PTDoc.vue
index f603530b7..32e523dac 100644
--- a/doc/fieldset/pt/PTDoc.vue
+++ b/doc/fieldset/pt/PTDoc.vue
@@ -16,7 +16,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Fieldset
+                basic: `
+<Fieldset
     legend="Header"
     :toggleable="true"
     :pt="{
@@ -29,7 +30,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>
 </Fieldset>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Fieldset
             legend="Header"
@@ -46,7 +48,8 @@ export default {
         </Fieldset>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Fieldset
             legend="Header"
diff --git a/doc/fieldset/theming/TailwindDoc.vue b/doc/fieldset/theming/TailwindDoc.vue
index 7a175c966..e959f8cfd 100644
--- a/doc/fieldset/theming/TailwindDoc.vue
+++ b/doc/fieldset/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -63,7 +62,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Fieldset legend="Header" :toggleable="true">
             <p>
diff --git a/doc/fileupload/AdvancedDoc.vue b/doc/fileupload/AdvancedDoc.vue
index 1400bb75e..d1830598e 100644
--- a/doc/fileupload/AdvancedDoc.vue
+++ b/doc/fileupload/AdvancedDoc.vue
@@ -17,12 +17,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
+                basic: `
+<FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
     <template #empty>
         <p>Drag and drop files to here to upload.</p>
     </template>
 </FileUpload>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Toast />
         <FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
@@ -42,7 +44,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Toast />
         <FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
diff --git a/doc/fileupload/AutoDoc.vue b/doc/fileupload/AutoDoc.vue
index 13b5a1ba5..37bee4912 100644
--- a/doc/fileupload/AutoDoc.vue
+++ b/doc/fileupload/AutoDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />`,
-                options: `<template>
+                basic: `
+<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">
       <Toast />
       <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
@@ -30,7 +32,8 @@ export default {
   }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
   <div class="card flex justify-content-center">
       <Toast />
       <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
diff --git a/doc/fileupload/BasicDoc.vue b/doc/fileupload/BasicDoc.vue
index efcb4ca40..08a07f926 100644
--- a/doc/fileupload/BasicDoc.vue
+++ b/doc/fileupload/BasicDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />`,
-                options: `<template>
+                basic: `
+<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
diff --git a/doc/fileupload/CustomUploadDoc.vue b/doc/fileupload/CustomUploadDoc.vue
index 788b03157..4ebed84be 100644
--- a/doc/fileupload/CustomUploadDoc.vue
+++ b/doc/fileupload/CustomUploadDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />`,
-                options: `<template>
+                basic: `
+<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
     </div>
@@ -37,7 +39,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
     </div>
diff --git a/doc/fileupload/ImportDoc.vue b/doc/fileupload/ImportDoc.vue
index 9ae8e76c6..40cdfddf5 100644
--- a/doc/fileupload/ImportDoc.vue
+++ b/doc/fileupload/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import FileUpload from 'primevue/fileupload';`
+                basic: `
+import FileUpload from 'primevue/fileupload';
+`
             }
         };
     }
diff --git a/doc/fileupload/TemplateDoc.vue b/doc/fileupload/TemplateDoc.vue
index a0819e921..7daeb8899 100644
--- a/doc/fileupload/TemplateDoc.vue
+++ b/doc/fileupload/TemplateDoc.vue
@@ -66,7 +66,8 @@ export default {
             totalSize: 0,
             totalSizePercent: 0,
             code: {
-                basic: `<FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
+                basic: `
+<FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
     <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
         <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
             <div class="flex gap-2">
@@ -117,7 +118,8 @@ export default {
         </div>
     </template>
 </FileUpload>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Toast />
         <FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
@@ -224,7 +226,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Toast />
         <FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
diff --git a/doc/fileupload/pt/PTDoc.vue b/doc/fileupload/pt/PTDoc.vue
index c41f244f7..39d764391 100644
--- a/doc/fileupload/pt/PTDoc.vue
+++ b/doc/fileupload/pt/PTDoc.vue
@@ -25,7 +25,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<FileUpload
+                basic: `
+<FileUpload
     name="demo[]"
     url="./upload.php"
     @upload="onAdvancedUpload($event)"
@@ -40,7 +41,8 @@ export default {
         <p>Drag and drop files to here to upload.</p>
     </template>
 </FileUpload>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <FileUpload
             name="demo[]"
@@ -70,7 +72,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <FileUpload
             name="demo[]"
diff --git a/doc/fileupload/theming/TailwindDoc.vue b/doc/fileupload/theming/TailwindDoc.vue
index 587e15d7f..b05f66576 100644
--- a/doc/fileupload/theming/TailwindDoc.vue
+++ b/doc/fileupload/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     fileupload: {
         input: 'hidden',
         buttonbar: {
@@ -48,7 +47,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Toast />
         <FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
diff --git a/doc/filterservice/ImportDoc.vue b/doc/filterservice/ImportDoc.vue
index ae4b39a9a..726c2577a 100644
--- a/doc/filterservice/ImportDoc.vue
+++ b/doc/filterservice/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import { FilterService } from 'primevue/api';`
+                basic: `
+import { FilterService } from 'primevue/api';
+`
             }
         };
     }
diff --git a/doc/filterservice/TableIntegrationDoc.vue b/doc/filterservice/TableIntegrationDoc.vue
index 373f07736..b46ec9bc2 100644
--- a/doc/filterservice/TableIntegrationDoc.vue
+++ b/doc/filterservice/TableIntegrationDoc.vue
@@ -48,7 +48,8 @@ export default {
             ],
             loading: true,
             code: {
-                basic: `<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
+                basic: `
+<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
     <template #empty> No customers found. </template>
     <template #loading> Loading customers data. Please wait. </template>
     <Column field="name" header="Name" :filterMatchModeOptions="matchModeOptions">
@@ -69,7 +70,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
             <template #empty> No customers found. </template>
@@ -136,7 +138,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
             <template #empty> No customers found. </template>
diff --git a/doc/focustrap/BasicDoc.vue b/doc/focustrap/BasicDoc.vue
index f90804c77..fa5f032c8 100644
--- a/doc/focustrap/BasicDoc.vue
+++ b/doc/focustrap/BasicDoc.vue
@@ -52,7 +52,8 @@ export default {
             password: null,
             accept: null,
             code: {
-                basic: `<div class="flex justify-content-center p-fluid">
+                basic: `
+<div class="flex justify-content-center p-fluid">
     <div v-focustrap class="card">
         <div class="field">
             <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
@@ -90,7 +91,8 @@ export default {
         <Button type="submit" label="Submit" class="mt-2" />
     </div>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="flex justify-content-center p-fluid">
         <div v-focustrap class="card">
             <div class="field">
@@ -143,7 +145,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="flex justify-content-center p-fluid">
         <div v-focustrap class="card">
             <div class="field">
diff --git a/doc/focustrap/ImportDoc.vue b/doc/focustrap/ImportDoc.vue
index 50a43a30e..70aba55de 100644
--- a/doc/focustrap/ImportDoc.vue
+++ b/doc/focustrap/ImportDoc.vue
@@ -8,7 +8,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import FocusTrap from 'primevue/focustrap';
+                basic: `
+import FocusTrap from 'primevue/focustrap';
 
 app.directive('focustrap', FocusTrap);`
             }
diff --git a/doc/galleria/AdvancedDoc.vue b/doc/galleria/AdvancedDoc.vue
index eeaa544a7..6e39e9342 100644
--- a/doc/galleria/AdvancedDoc.vue
+++ b/doc/galleria/AdvancedDoc.vue
@@ -55,7 +55,8 @@ export default {
             fullScreen: false,
             isAutoPlay: true,
             code: {
-                basic: `<Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
+                basic: `
+<Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
     :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
@@ -78,7 +79,8 @@ export default {
         </div>
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center galleria demo">
         <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
             :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
@@ -256,7 +258,8 @@ export default {
     }
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center galleria demo">
         <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
             :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
diff --git a/doc/galleria/AutoPlayDoc.vue b/doc/galleria/AutoPlayDoc.vue
index 8116c1f65..e9a9b76e6 100644
--- a/doc/galleria/AutoPlayDoc.vue
+++ b/doc/galleria/AutoPlayDoc.vue
@@ -37,7 +37,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
     :circular="true" :autoPlay="true" :transitionInterval="2000">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -46,7 +47,8 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :circular="true" :autoPlay="true" :transitionInterval="2000">
@@ -88,7 +90,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :circular="true" :autoPlay="true" :transitionInterval="2000">
diff --git a/doc/galleria/BasicDoc.vue b/doc/galleria/BasicDoc.vue
index 18e84bdd0..57399a7b8 100644
--- a/doc/galleria/BasicDoc.vue
+++ b/doc/galleria/BasicDoc.vue
@@ -37,7 +37,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
     </template>
@@ -45,7 +46,8 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
@@ -86,7 +88,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
diff --git a/doc/galleria/CaptionDoc.vue b/doc/galleria/CaptionDoc.vue
index 251ded7f2..bf85d7506 100644
--- a/doc/galleria/CaptionDoc.vue
+++ b/doc/galleria/CaptionDoc.vue
@@ -41,7 +41,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -53,7 +54,8 @@ export default {
         <p class="text-white">{{ slotProps.item.alt }}</p>
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
@@ -98,7 +100,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
diff --git a/doc/galleria/ControlledDoc.vue b/doc/galleria/ControlledDoc.vue
index 33a20c8ff..d7fd39fd2 100644
--- a/doc/galleria/ControlledDoc.vue
+++ b/doc/galleria/ControlledDoc.vue
@@ -43,7 +43,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<div>
+                basic: `
+<div>
     <Button icon="pi pi-minus" @click="prev" />
     <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
 </div>
@@ -56,7 +57,8 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column md:align-items-center">
         <div class="mb-3 align-self-center">
             <Button icon="pi pi-minus" @click="prev" />
@@ -111,7 +113,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column md:align-items-center">
         <div class="mb-3 align-self-center">
             <Button icon="pi pi-minus" @click="prev" />
diff --git a/doc/galleria/ImportDoc.vue b/doc/galleria/ImportDoc.vue
index 25ab56fdf..ecc1620aa 100644
--- a/doc/galleria/ImportDoc.vue
+++ b/doc/galleria/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Galleria from 'primevue/galleria';`
+                basic: `
+import Galleria from 'primevue/galleria';
+`
             }
         };
     }
diff --git a/doc/galleria/ResponsiveDoc.vue b/doc/galleria/ResponsiveDoc.vue
index d14be79e0..784783c17 100644
--- a/doc/galleria/ResponsiveDoc.vue
+++ b/doc/galleria/ResponsiveDoc.vue
@@ -39,7 +39,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -47,7 +48,8 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
             <template #item="slotProps">
@@ -88,7 +90,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
             <template #item="slotProps">
diff --git a/doc/galleria/ThumbnailDoc.vue b/doc/galleria/ThumbnailDoc.vue
index 1089193d2..94d4693f2 100644
--- a/doc/galleria/ThumbnailDoc.vue
+++ b/doc/galleria/ThumbnailDoc.vue
@@ -66,7 +66,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -76,7 +77,8 @@ export default {
         </div>
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card card flex flex-column md:align-items-center">
         <div class="flex flex-wrap gap-3 mb-5 align-self-center">
             <div class="flex flex-wrap gap-3 mb-5">
@@ -146,7 +148,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column md:align-items-center">
         <div class="flex flex-wrap gap-3 mb-5 align-self-center">
             <div class="flex flex-wrap gap-3 mb-5">
diff --git a/doc/galleria/fullscreen/CustomContentDoc.vue b/doc/galleria/fullscreen/CustomContentDoc.vue
index 6aa8a6a48..c37d71671 100644
--- a/doc/galleria/fullscreen/CustomContentDoc.vue
+++ b/doc/galleria/fullscreen/CustomContentDoc.vue
@@ -56,7 +56,8 @@ export default {
             ],
             displayCustom: false,
             code: {
-                basic: `<Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
+                basic: `
+<Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
     containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -65,7 +66,8 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
             containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
@@ -121,7 +123,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:activeIndex="activeIndex" v-model:visible="displayCustom" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7"
             containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
diff --git a/doc/galleria/fullscreen/WithThumbnailsDoc.vue b/doc/galleria/fullscreen/WithThumbnailsDoc.vue
index f4d7cf47c..d568805e1 100644
--- a/doc/galleria/fullscreen/WithThumbnailsDoc.vue
+++ b/doc/galleria/fullscreen/WithThumbnailsDoc.vue
@@ -44,7 +44,8 @@ export default {
             ],
             displayBasic: false,
             code: {
-                basic: `<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
+                basic: `
+<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -54,7 +55,8 @@ export default {
 </Galleria>
 
 <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
             <template #item="slotProps">
@@ -102,7 +104,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
             <template #item="slotProps">
diff --git a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
index d3ee15782..65f4a21ec 100644
--- a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
+++ b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue
@@ -44,7 +44,8 @@ export default {
             ],
             displayBasic: false,
             code: {
-                basic: `<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
+                basic: `
+<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -54,7 +55,8 @@ export default {
 </Galleria>
 
 <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
             <template #item="slotProps">
@@ -102,7 +104,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"  :showThumbnails="false">
             <template #item="slotProps">
diff --git a/doc/galleria/indicator/ClickEventDoc.vue b/doc/galleria/indicator/ClickEventDoc.vue
index 2e68984ad..85601ee6d 100644
--- a/doc/galleria/indicator/ClickEventDoc.vue
+++ b/doc/galleria/indicator/ClickEventDoc.vue
@@ -34,13 +34,15 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
     :showThumbnails="false" :showIndicators="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true">
@@ -79,7 +81,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true">
diff --git a/doc/galleria/indicator/HoverEventDoc.vue b/doc/galleria/indicator/HoverEventDoc.vue
index b14d6ddb7..0e19040e5 100644
--- a/doc/galleria/indicator/HoverEventDoc.vue
+++ b/doc/galleria/indicator/HoverEventDoc.vue
@@ -34,13 +34,15 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
     :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
@@ -79,7 +81,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
diff --git a/doc/galleria/indicator/PositionDoc.vue b/doc/galleria/indicator/PositionDoc.vue
index e84d03bde..96c36ab71 100644
--- a/doc/galleria/indicator/PositionDoc.vue
+++ b/doc/galleria/indicator/PositionDoc.vue
@@ -50,13 +50,15 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
+                basic: `
+<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
     :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="inside" :indicatorsPosition="position">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
@@ -110,7 +112,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
diff --git a/doc/galleria/indicator/TemplateDoc.vue b/doc/galleria/indicator/TemplateDoc.vue
index 1fefa5ad9..3ce277aad 100644
--- a/doc/galleria/indicator/TemplateDoc.vue
+++ b/doc/galleria/indicator/TemplateDoc.vue
@@ -37,7 +37,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
+                basic: `
+<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
     :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -46,7 +47,8 @@ export default {
         <span style="color: '#ffffff', cursor: pointer">{{ index + 1 }}</span>
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
             :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
@@ -74,7 +76,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
             :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
diff --git a/doc/galleria/navigator/HoverDoc.vue b/doc/galleria/navigator/HoverDoc.vue
index ce299b9a8..b1354df64 100644
--- a/doc/galleria/navigator/HoverDoc.vue
+++ b/doc/galleria/navigator/HoverDoc.vue
@@ -37,7 +37,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
@@ -45,7 +46,8 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
             <template #item="slotProps">
@@ -86,7 +88,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
             <template #item="slotProps">
diff --git a/doc/galleria/navigator/IndicatorsDoc.vue b/doc/galleria/navigator/IndicatorsDoc.vue
index 242bc4075..c4d352404 100644
--- a/doc/galleria/navigator/IndicatorsDoc.vue
+++ b/doc/galleria/navigator/IndicatorsDoc.vue
@@ -37,7 +37,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
     :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@@ -46,7 +47,8 @@ export default {
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
@@ -88,7 +90,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
diff --git a/doc/galleria/navigator/ItemThumbnailsDoc.vue b/doc/galleria/navigator/ItemThumbnailsDoc.vue
index 5d4a19104..28018a270 100644
--- a/doc/galleria/navigator/ItemThumbnailsDoc.vue
+++ b/doc/galleria/navigator/ItemThumbnailsDoc.vue
@@ -37,7 +37,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
     :showItemNavigators="true">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@@ -46,7 +47,8 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true">
@@ -88,7 +90,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true">
diff --git a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
index 998e845e6..9e0d84334 100644
--- a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
+++ b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
@@ -37,7 +37,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
+                basic: `
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
     :showItemNavigators="true" :showThumbnails="false">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@@ -46,7 +47,8 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false">
@@ -88,7 +90,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false">
diff --git a/doc/galleria/pt/PTDoc.vue b/doc/galleria/pt/PTDoc.vue
index bc310c347..c72f84945 100644
--- a/doc/galleria/pt/PTDoc.vue
+++ b/doc/galleria/pt/PTDoc.vue
@@ -42,7 +42,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Galleria
+                basic: `
+<Galleria
     :value="images"
     :responsiveOptions="responsiveOptions"
     :numVisible="5"
@@ -57,7 +58,8 @@ export default {
         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
     </template>
 </Galleria>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria
             :value="images"
@@ -105,7 +107,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card md:flex md:justify-content-center">
         <Galleria
             :value="images"
diff --git a/doc/galleria/theming/TailwindDoc.vue b/doc/galleria/theming/TailwindDoc.vue
index 3f7480e50..b1c759358 100644
--- a/doc/galleria/theming/TailwindDoc.vue
+++ b/doc/galleria/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded :service="['PhotoService']" />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     galleria: {
         root: 'flex flex-col',
         content: 'flex flex-col',
@@ -108,7 +107,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card md:flex md:justify-center">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
diff --git a/doc/icons/BasicDoc.vue b/doc/icons/BasicDoc.vue
index c8b1045f9..0b217e07f 100644
--- a/doc/icons/BasicDoc.vue
+++ b/doc/icons/BasicDoc.vue
@@ -16,10 +16,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<i class="pi pi-check"></i>
+                basic: `
+<i class="pi pi-check"></i>
 <i class="pi pi-times"></i>
 <span class="pi pi-search"></span>
-<span class="pi pi-user"></span>`
+<span class="pi pi-user"></span>
+`
             }
         };
     }
diff --git a/doc/icons/ColorDoc.vue b/doc/icons/ColorDoc.vue
index 22c597989..46bf73376 100644
--- a/doc/icons/ColorDoc.vue
+++ b/doc/icons/ColorDoc.vue
@@ -16,10 +16,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<i class="pi pi-check" style="color: slateblue"></i>
+                basic: `
+<i class="pi pi-check" style="color: slateblue"></i>
 <i class="pi pi-times" style="color: green"></i>
 <i class="pi pi-search" style="color: 'var(--primary-color)'"></i>
-<i class="pi pi-user" style="color: #708090"></i>`
+<i class="pi pi-user" style="color: #708090"></i>
+`
             }
         };
     }
diff --git a/doc/icons/ConstantsDoc.vue b/doc/icons/ConstantsDoc.vue
index ae947478c..25c48147a 100644
--- a/doc/icons/ConstantsDoc.vue
+++ b/doc/icons/ConstantsDoc.vue
@@ -24,7 +24,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <Menu :model="items" />
     </div>
diff --git a/doc/icons/DownloadDoc.vue b/doc/icons/DownloadDoc.vue
index d9dba02ab..e6f22d7a5 100644
--- a/doc/icons/DownloadDoc.vue
+++ b/doc/icons/DownloadDoc.vue
@@ -10,7 +10,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `npm install primeicons`
+                basic: `
+npm install primeicons
+`
             }
         };
     }
diff --git a/doc/icons/ImportDoc.vue b/doc/icons/ImportDoc.vue
index b96ec6d70..55f9d5bf8 100644
--- a/doc/icons/ImportDoc.vue
+++ b/doc/icons/ImportDoc.vue
@@ -10,7 +10,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import 'primeicons/primeicons.css';`
+                basic: `
+import 'primeicons/primeicons.css';
+`
             }
         };
     }
diff --git a/doc/icons/SizeDoc.vue b/doc/icons/SizeDoc.vue
index 5203beae9..e1d88f5ea 100644
--- a/doc/icons/SizeDoc.vue
+++ b/doc/icons/SizeDoc.vue
@@ -16,10 +16,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<i class="pi pi-check" style="font-size: 1rem"></i>
+                basic: `
+<i class="pi pi-check" style="font-size: 1rem"></i>
 <i class="pi pi-times" style="font-size: 1.5rem"></i>
 <i class="pi pi-search" style="font-size: 2rem"></i>
-<i class="pi pi-user" style="font-size: 2.5rem"></i>`
+<i class="pi pi-user" style="font-size: 2.5rem"></i>
+`
             }
         };
     }
diff --git a/doc/icons/SpinDoc.vue b/doc/icons/SpinDoc.vue
index 89b717440..6c4e686b8 100644
--- a/doc/icons/SpinDoc.vue
+++ b/doc/icons/SpinDoc.vue
@@ -14,8 +14,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
-<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>`
+                basic: `
+<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
+`
             }
         };
     }
diff --git a/doc/image/BasicDoc.vue b/doc/image/BasicDoc.vue
index c32002fba..a2b4af0aa 100644
--- a/doc/image/BasicDoc.vue
+++ b/doc/image/BasicDoc.vue
@@ -13,13 +13,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />`,
-                options: `<template>
+                basic: `
+<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>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
     </div>
diff --git a/doc/image/ImportDoc.vue b/doc/image/ImportDoc.vue
index 0dbeee898..05627211e 100644
--- a/doc/image/ImportDoc.vue
+++ b/doc/image/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Image from 'primevue/image';`
+                basic: `
+import Image from 'primevue/image';
+`
             }
         };
     }
diff --git a/doc/image/PreviewDoc.vue b/doc/image/PreviewDoc.vue
index b4cf95f83..51575a899 100644
--- a/doc/image/PreviewDoc.vue
+++ b/doc/image/PreviewDoc.vue
@@ -14,13 +14,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />`,
-                options: `<template>
+                basic: `
+<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>`,
-                composition: `<template>
+                composition: `
+<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>
diff --git a/doc/image/TemplateDoc.vue b/doc/image/TemplateDoc.vue
index 17bcb919c..cca7a2631 100644
--- a/doc/image/TemplateDoc.vue
+++ b/doc/image/TemplateDoc.vue
@@ -23,7 +23,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Image alt="Image" preview>
+                basic: `
+<Image alt="Image" preview>
     <template #indicatoricon>
         <i class="pi pi-check"></i>
     </template>
@@ -34,7 +35,8 @@ export default {
         <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
     </template>
 </Image>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Image alt="Image" preview>
             <template #indicatoricon>
@@ -49,7 +51,8 @@ export default {
         </Image>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Image alt="Image" preview>
             <template #indicatoricon>
diff --git a/doc/image/pt/PTDoc.vue b/doc/image/pt/PTDoc.vue
index 4be0b6d04..41c2acb34 100644
--- a/doc/image/pt/PTDoc.vue
+++ b/doc/image/pt/PTDoc.vue
@@ -20,7 +20,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Image
+                basic: `
+<Image
     src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
     alt="Image"
     width="250"
@@ -29,7 +30,8 @@ export default {
         image: { class: 'w-15rem' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Image
             src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
@@ -42,7 +44,8 @@ export default {
         />
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Image
             src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
diff --git a/doc/image/theming/TailwindDoc.vue b/doc/image/theming/TailwindDoc.vue
index c5ede7bd9..dfd208480 100644
--- a/doc/image/theming/TailwindDoc.vue
+++ b/doc/image/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     image: {
         root: 'relative inline-block',
         button: {
@@ -88,7 +87,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
diff --git a/doc/inlinemessage/AccessibilityDoc.vue b/doc/inlinemessage/AccessibilityDoc.vue
index 963152f0a..74c7bfdf6 100644
--- a/doc/inlinemessage/AccessibilityDoc.vue
+++ b/doc/inlinemessage/AccessibilityDoc.vue
@@ -44,14 +44,16 @@ export default {
     data() {
         return {
             code1: {
-                basic: `<ConfirmDialog id="confirm" />
+                basic: `
+<ConfirmDialog id="confirm" />
 
 <Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
 
 `
             },
             code2: {
-                basic: `<script setup>
+                basic: `
+<script setup>
 const confirm = useConfirm();
 const isVisible = ref(false);
 
diff --git a/doc/inlinemessage/BasicDoc.vue b/doc/inlinemessage/BasicDoc.vue
index 72032464f..054978027 100644
--- a/doc/inlinemessage/BasicDoc.vue
+++ b/doc/inlinemessage/BasicDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<InlineMessage severity="info">Username is required</InlineMessage>`,
-                options: `<template>
+                basic: `
+<InlineMessage severity="info">Username is required</InlineMessage>`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InlineMessage severity="info">Username is required</InlineMessage>
     </div>
@@ -22,7 +24,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InlineMessage severity="info">Username is required</InlineMessage>
     </div>
diff --git a/doc/inlinemessage/FormDoc.vue b/doc/inlinemessage/FormDoc.vue
index 6e1a035af..b6c34d462 100644
--- a/doc/inlinemessage/FormDoc.vue
+++ b/doc/inlinemessage/FormDoc.vue
@@ -22,7 +22,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div class="flex flex-wrap align-items-center mb-3 gap-2">
+                basic: `
+<div class="flex flex-wrap align-items-center mb-3 gap-2">
     <label for="username" class="p-sr-only">Username</label>
     <InputText id="username" placeholder="Username" class="p-invalid" />
     <InlineMessage>Username is required</InlineMessage>
@@ -32,7 +33,8 @@ export default {
     <InputText id="email" placeholder="Email" class="p-invalid" />
     <InlineMessage />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex flex-wrap align-items-center mb-3 gap-2">
             <label for="username" class="p-sr-only">Username</label>
@@ -49,7 +51,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex flex-wrap align-items-center mb-3 gap-2">
             <label for="username" class="p-sr-only">Username</label>
diff --git a/doc/inlinemessage/ImportDoc.vue b/doc/inlinemessage/ImportDoc.vue
index 1e9746c59..e9dac9dcd 100644
--- a/doc/inlinemessage/ImportDoc.vue
+++ b/doc/inlinemessage/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import InlineMessage from 'primevue/inlinemessage';`
+                basic: `
+import InlineMessage from 'primevue/inlinemessage';
+`
             }
         };
     }
diff --git a/doc/inlinemessage/SeverityDoc.vue b/doc/inlinemessage/SeverityDoc.vue
index 83fa9050f..b26e4b36f 100644
--- a/doc/inlinemessage/SeverityDoc.vue
+++ b/doc/inlinemessage/SeverityDoc.vue
@@ -16,11 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<InlineMessage severity="success">Success Content</InlineMessage>
+                basic: `
+<InlineMessage severity="success">Success Content</InlineMessage>
 <InlineMessage severity="info">Info Content</InlineMessage>
 <InlineMessage severity="warn">Warning Content</InlineMessage>
 <InlineMessage severity="error">Error Content</InlineMessage>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
         <InlineMessage severity="success">Success Content</InlineMessage>
         <InlineMessage severity="info">Info Content</InlineMessage>
@@ -31,7 +33,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
         <InlineMessage severity="success">Success Content</InlineMessage>
         <InlineMessage severity="info">Info Content</InlineMessage>
diff --git a/doc/inlinemessage/TemplateDoc.vue b/doc/inlinemessage/TemplateDoc.vue
index 03214c13a..661eff5be 100644
--- a/doc/inlinemessage/TemplateDoc.vue
+++ b/doc/inlinemessage/TemplateDoc.vue
@@ -26,14 +26,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<InlineMessage :style="{  border: 'solid #696cff', borderWidth: '0 0 0 6px', color: '#696cff' }"
+                basic: `
+<InlineMessage :style="{  border: 'solid #696cff', borderWidth: '0 0 0 6px', color: '#696cff' }"
         severity="info" class="border-primary w-full justify-content-start">
     <div class="flex align-items-center">
         <img alt="logo" src="/images/logo.svg" width="32" />
         <div class="ml-2">Always bet on Prime.</div>
     </div>
 </InlineMessage>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <InlineMessage :style="{  border: 'solid #696cff', borderWidth: '0 0 0 6px', color: '#696cff' }"
                 severity="info" class="border-primary w-full justify-content-start">
@@ -47,7 +49,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <InlineMessage :style="{  border: 'solid #696cff', borderWidth: '0 0 0 6px', color: '#696cff' }"
                 severity="info" class="border-primary w-full justify-content-start">
diff --git a/doc/inlinemessage/pt/PTDoc.vue b/doc/inlinemessage/pt/PTDoc.vue
index 03207de00..b6c0b4ab5 100644
--- a/doc/inlinemessage/pt/PTDoc.vue
+++ b/doc/inlinemessage/pt/PTDoc.vue
@@ -18,7 +18,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<InlineMessage
+                basic: `
+<InlineMessage
     :pt="{
         root: { class: 'bg-yellow-100' },
         icon: { class: 'hidden' }
@@ -26,7 +27,8 @@ export default {
 >
     Username is required
 </InlineMessage>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InlineMessage
             :pt="{
@@ -41,7 +43,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InlineMessage
             :pt="{
diff --git a/doc/inlinemessage/theming/TailwindDoc.vue b/doc/inlinemessage/theming/TailwindDoc.vue
index ea3688039..1ff4ef2ca 100644
--- a/doc/inlinemessage/theming/TailwindDoc.vue
+++ b/doc/inlinemessage/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     inlinemessage: {
         root: ({ props }) => ({
             class: [
@@ -36,7 +35,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap items-center justify-center gap-3">
         <InlineMessage severity="success">Success Content</InlineMessage>
         <InlineMessage severity="info">Info Content</InlineMessage>
diff --git a/doc/inplace/BasicDoc.vue b/doc/inplace/BasicDoc.vue
index 087f0bd39..39cd6c609 100644
--- a/doc/inplace/BasicDoc.vue
+++ b/doc/inplace/BasicDoc.vue
@@ -21,7 +21,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Inplace>
+                basic: `
+<Inplace>
     <template #display> View Content </template>
     <template #content>
         <p class="m-0">
@@ -30,7 +31,8 @@ export default {
         </p>
     </template>
 </Inplace>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Inplace>
             <template #display> View Content </template>
@@ -47,7 +49,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Inplace>
             <template #display> View Content </template>
diff --git a/doc/inplace/ImageDoc.vue b/doc/inplace/ImageDoc.vue
index 8e385d3dd..8e918629e 100644
--- a/doc/inplace/ImageDoc.vue
+++ b/doc/inplace/ImageDoc.vue
@@ -21,7 +21,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Inplace>
+                basic: `
+<Inplace>
     <template #display>
         <span class="pi pi-search" style="vertical-align: middle"></span>
         <span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span>
@@ -30,7 +31,8 @@ export default {
         <img class="w-full" alt="Nature" src="/images/nature/nature1.jpg" />
     </template>
 </Inplace>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Inplace>
             <template #display>
@@ -46,7 +48,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Inplace>
             <template #display>
diff --git a/doc/inplace/ImportDoc.vue b/doc/inplace/ImportDoc.vue
index b623ad48f..e350b493f 100644
--- a/doc/inplace/ImportDoc.vue
+++ b/doc/inplace/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Inplace from 'primevue/inplace';`
+                basic: `
+import Inplace from 'primevue/inplace';
+`
             }
         };
     }
diff --git a/doc/inplace/InputDoc.vue b/doc/inplace/InputDoc.vue
index 99a0b3818..93e7f78e8 100644
--- a/doc/inplace/InputDoc.vue
+++ b/doc/inplace/InputDoc.vue
@@ -21,7 +21,8 @@ export default {
         return {
             text: null,
             code: {
-                basic: `<Inplace :closable="true">
+                basic: `
+<Inplace :closable="true">
     <template #display>
         {{ text || 'Click to Edit' }}
     </template>
@@ -29,7 +30,8 @@ export default {
         <InputText v-model="text" autofocus />
     </template>
 </Inplace>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Inplace :closable="true">
             <template #display>
@@ -51,7 +53,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Inplace :closable="true">
             <template #display>
diff --git a/doc/inplace/LazyDoc.vue b/doc/inplace/LazyDoc.vue
index 6005ec5fd..51a761fce 100644
--- a/doc/inplace/LazyDoc.vue
+++ b/doc/inplace/LazyDoc.vue
@@ -26,7 +26,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<Inplace @open="loadData">
+                basic: `
+<Inplace @open="loadData">
     <template #display> View Data </template>
     <template #content>
         <DataTable :value="products">
@@ -37,7 +38,8 @@ export default {
         </DataTable>
     </template>
 </Inplace>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Inplace @open="loadData">
             <template #display> View Data </template>
@@ -69,7 +71,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Inplace @open="loadData">
             <template #display> View Data </template>
diff --git a/doc/inplace/pt/PTDoc.vue b/doc/inplace/pt/PTDoc.vue
index 010def073..f5757d787 100644
--- a/doc/inplace/pt/PTDoc.vue
+++ b/doc/inplace/pt/PTDoc.vue
@@ -23,7 +23,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Inplace
+                basic: `
+<Inplace
     :pt="{
         display: { class: 'bg-primary' }
     }"
@@ -36,7 +37,8 @@ export default {
         </p>
     </template>
 </Inplace>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Inplace
             :pt="{
@@ -57,7 +59,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Inplace
             :pt="{
diff --git a/doc/inplace/theming/TailwindDoc.vue b/doc/inplace/theming/TailwindDoc.vue
index df016dc86..140e119c6 100644
--- a/doc/inplace/theming/TailwindDoc.vue
+++ b/doc/inplace/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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']
@@ -26,7 +25,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Inplace>
             <template #display>
diff --git a/doc/inputgroup/BasicDoc.vue b/doc/inputgroup/BasicDoc.vue
index d89a2d6d2..d6aafe555 100644
--- a/doc/inputgroup/BasicDoc.vue
+++ b/doc/inputgroup/BasicDoc.vue
@@ -29,7 +29,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div class="p-inputgroup flex-1">
+                basic: `
+<div class="p-inputgroup flex-1">
     <span class="p-inputgroup-addon">
         <i class="pi pi-user"></i>
     </span>
@@ -46,7 +47,8 @@ export default {
     <span class="p-inputgroup-addon">www</span>
     <InputText placeholder="Website" />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <span class="p-inputgroup-addon">
@@ -67,7 +69,8 @@ export default {
         </div>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <span class="p-inputgroup-addon">
diff --git a/doc/inputgroup/ButtonDoc.vue b/doc/inputgroup/ButtonDoc.vue
index d6acb8418..51beacbc6 100644
--- a/doc/inputgroup/ButtonDoc.vue
+++ b/doc/inputgroup/ButtonDoc.vue
@@ -27,7 +27,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div class="p-inputgroup flex-1">
+                basic: `
+<div class="p-inputgroup flex-1">
     <Button label="Search" />
     <InputText placeholder="Keyword" />
 </div>
@@ -42,7 +43,8 @@ export default {
     <InputText placeholder="Vote" />
     <Button icon="pi pi-times" severity="danger" />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <Button label="Search" />
@@ -61,7 +63,8 @@ export default {
         </div>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <Button label="Search" />
diff --git a/doc/inputgroup/CheckboxDoc.vue b/doc/inputgroup/CheckboxDoc.vue
index 972a55a07..01f0b74a7 100644
--- a/doc/inputgroup/CheckboxDoc.vue
+++ b/doc/inputgroup/CheckboxDoc.vue
@@ -39,7 +39,8 @@ export default {
             radioValue1: '',
             radioValue2: '',
             code: {
-                basic: `<div class="p-inputgroup flex-1">
+                basic: `
+<div class="p-inputgroup flex-1">
     <InputText placeholder="Price" />
     <span class="p-inputgroup-addon">
         <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
@@ -62,7 +63,8 @@ export default {
         <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
     </span>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <InputText placeholder="Price" />
@@ -102,7 +104,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column md:flex-row gap-3">
         <div class="p-inputgroup flex-1">
             <InputText placeholder="Price" />
diff --git a/doc/inputgroup/MultipleDoc.vue b/doc/inputgroup/MultipleDoc.vue
index 928d8cfba..e559dd649 100644
--- a/doc/inputgroup/MultipleDoc.vue
+++ b/doc/inputgroup/MultipleDoc.vue
@@ -23,7 +23,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div class="p-inputgroup w-full md:w-30rem">
+                basic: `
+<div class="p-inputgroup w-full md:w-30rem">
     <span class="p-inputgroup-addon">
         <i class="pi pi-clock"></i>
     </span>
@@ -34,7 +35,8 @@ export default {
     <span class="p-inputgroup-addon">$</span>
     <span class="p-inputgroup-addon">.00</span>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <div class="p-inputgroup w-full md:w-30rem">
             <span class="p-inputgroup-addon">
@@ -49,7 +51,8 @@ export default {
         </div>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <div class="p-inputgroup w-full md:w-30rem">
             <span class="p-inputgroup-addon">
diff --git a/doc/inputmask/AccessibilityDoc.vue b/doc/inputmask/AccessibilityDoc.vue
index fdb8af3e9..2128e3620 100644
--- a/doc/inputmask/AccessibilityDoc.vue
+++ b/doc/inputmask/AccessibilityDoc.vue
@@ -32,7 +32,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<label for="date">Date</label>
+                basic: `
+<label for="date">Date</label>
 <InputMask id="date" />
 
 <span id="phone">Phone</span>
diff --git a/doc/inputmask/BasicDoc.vue b/doc/inputmask/BasicDoc.vue
index b2203fc05..950a899a2 100644
--- a/doc/inputmask/BasicDoc.vue
+++ b/doc/inputmask/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />`,
-                options: `<template>
+                basic: `
+<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
     </div>
@@ -31,7 +33,8 @@ export default {
 }
 <\/script>
         `,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
     </div>
diff --git a/doc/inputmask/DisabledDoc.vue b/doc/inputmask/DisabledDoc.vue
index f7903f6c9..a27b6aa28 100644
--- a/doc/inputmask/DisabledDoc.vue
+++ b/doc/inputmask/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<InputMask mask="99-999999" placeholder="99-999999" disabled />`,
-                options: `<template>
+                basic: `
+<InputMask mask="99-999999" placeholder="99-999999" disabled />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask mask="99-999999" placeholder="99-999999" disabled />
     </div>
@@ -31,7 +33,8 @@ export default {
 }
 <\/script>
         `,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask mask="99-999999" placeholder="99-999999" disabled />
     </div>
diff --git a/doc/inputmask/FloatLabelDoc.vue b/doc/inputmask/FloatLabelDoc.vue
index e661675bd..5f73f0407 100644
--- a/doc/inputmask/FloatLabelDoc.vue
+++ b/doc/inputmask/FloatLabelDoc.vue
@@ -17,11 +17,13 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<span class="p-float-label">
+                basic: `
+<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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputMask id="ssn" v-model="value" mask="999-99-9999" placeholder="999-99-9999" />
@@ -40,7 +42,8 @@ export default {
 }
 <\/script>
         `,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputMask id="ssn" v-model="val2" mask="999-99-9999" placeholder="999-99-9999" />
diff --git a/doc/inputmask/ImportDoc.vue b/doc/inputmask/ImportDoc.vue
index 690d5af1e..a1de97e22 100644
--- a/doc/inputmask/ImportDoc.vue
+++ b/doc/inputmask/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import InputMask from 'primevue/inputmask';`
+                basic: `
+import InputMask from 'primevue/inputmask';
+`
             }
         };
     }
diff --git a/doc/inputmask/InvalidDoc.vue b/doc/inputmask/InvalidDoc.vue
index f6d60a50b..90c10ff55 100644
--- a/doc/inputmask/InvalidDoc.vue
+++ b/doc/inputmask/InvalidDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>`,
-                options: `<template>
+                basic: `
+<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>
     </div>
@@ -31,7 +33,8 @@ export default {
 }
 <\/script>
         `,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>
     </div>
diff --git a/doc/inputmask/MaskDoc.vue b/doc/inputmask/MaskDoc.vue
index 15053aeca..4d6b0be08 100644
--- a/doc/inputmask/MaskDoc.vue
+++ b/doc/inputmask/MaskDoc.vue
@@ -32,7 +32,8 @@ export default {
             value2: '',
             value3: '',
             code: {
-                basic: `<div class="flex-auto">
+                basic: `
+<div class="flex-auto">
     <label for="ssn">SSN</label>
     <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
 </div>
@@ -46,7 +47,8 @@ export default {
     <label for="serial">Serial</label>
     <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card p-fluid flex flex-wrap gap-3">
         <div class="flex-auto">
             <label for="ssn">SSN</label>
@@ -77,7 +79,8 @@ export default {
 }
 <\/script>
         `,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card p-fluid flex flex-wrap gap-3">
         <div class="flex-auto">
             <label for="ssn">SSN</label>
diff --git a/doc/inputmask/OptionalDoc.vue b/doc/inputmask/OptionalDoc.vue
index 24f03454e..66ae36a40 100644
--- a/doc/inputmask/OptionalDoc.vue
+++ b/doc/inputmask/OptionalDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />`,
-                options: `<template>
+                basic: `
+<InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask v-model="value" mask="(999) 999-9999? x99999"  placeholder="(999) 999-9999? x99999" />
     </div>
@@ -31,7 +33,8 @@ export default {
 }
 <\/script>
         `,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask v-model="value" mask="(999) 999-9999? x99999"  placeholder="(999) 999-9999? x99999" />
     </div>
diff --git a/doc/inputmask/SlotCharDoc.vue b/doc/inputmask/SlotCharDoc.vue
index d0e8373d1..961c0e97a 100644
--- a/doc/inputmask/SlotCharDoc.vue
+++ b/doc/inputmask/SlotCharDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<InputMask id="basic" v-model="value" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />`,
-                options: `<template>
+                basic: `
+<InputMask id="basic" v-model="value" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask id="basic" v-model="value" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
     </div>
@@ -30,7 +32,8 @@ export default {
   }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask id="basic" v-model="value" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
     </div>
diff --git a/doc/inputmask/form/VeeValidateDoc.vue b/doc/inputmask/form/VeeValidateDoc.vue
index eb18f5503..945ae7a78 100644
--- a/doc/inputmask/form/VeeValidateDoc.vue
+++ b/doc/inputmask/form/VeeValidateDoc.vue
@@ -42,7 +42,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
@@ -53,7 +54,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
@@ -94,7 +96,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <InputMask v-model="value" mask="(999) 999-9999" placeholder="(999) 999-9999"
diff --git a/doc/inputmask/pt/PTDoc.vue b/doc/inputmask/pt/PTDoc.vue
index de595b47a..f6a8a5d42 100644
--- a/doc/inputmask/pt/PTDoc.vue
+++ b/doc/inputmask/pt/PTDoc.vue
@@ -20,7 +20,8 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<InputMask
+                basic: `
+<InputMask
     id="basic"
     v-model="value"
     mask="99-999999"
@@ -29,7 +30,8 @@ export default {
         root: { class: 'border-teal-400' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask
             id="basic"
@@ -53,7 +55,8 @@ export default {
 }
 <\/script>
         `,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputMask
             id="basic"
diff --git a/doc/inputmask/theming/TailwindDoc.vue b/doc/inputmask/theming/TailwindDoc.vue
index 087c21868..daad27270 100644
--- a/doc/inputmask/theming/TailwindDoc.vue
+++ b/doc/inputmask/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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'
     }
@@ -24,7 +23,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
     </div>
diff --git a/doc/inputnumber/AccessibilityDoc.vue b/doc/inputnumber/AccessibilityDoc.vue
index f84b610bd..aed9e34ba 100644
--- a/doc/inputnumber/AccessibilityDoc.vue
+++ b/doc/inputnumber/AccessibilityDoc.vue
@@ -49,7 +49,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<label for="price">Price</label>
+                basic: `
+<label for="price">Price</label>
 <InputNumber inputId="price" />
 
 <span id="label_number">Number</span>
diff --git a/doc/inputnumber/ButtonsDoc.vue b/doc/inputnumber/ButtonsDoc.vue
index fbd2e745c..1649be3eb 100644
--- a/doc/inputnumber/ButtonsDoc.vue
+++ b/doc/inputnumber/ButtonsDoc.vue
@@ -40,12 +40,14 @@ export default {
             value2: 25,
             value3: 10.5,
             code: {
-                basic: `<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
+                basic: `
+<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
 <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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
@@ -76,7 +78,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
diff --git a/doc/inputnumber/CurrencyDoc.vue b/doc/inputnumber/CurrencyDoc.vue
index f12871727..0d1d451d9 100644
--- a/doc/inputnumber/CurrencyDoc.vue
+++ b/doc/inputnumber/CurrencyDoc.vue
@@ -32,11 +32,13 @@ export default {
             value3: 4250,
             value4: 5002,
             code: {
-                basic: `<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
+                basic: `
+<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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="currency-us" class="font-bold block mb-2"> United States </label>
@@ -69,7 +71,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="currency-us" class="font-bold block mb-2"> United States </label>
diff --git a/doc/inputnumber/DisabledDoc.vue b/doc/inputnumber/DisabledDoc.vue
index 93e6bd19a..70706100b 100644
--- a/doc/inputnumber/DisabledDoc.vue
+++ b/doc/inputnumber/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `<InputNumber v-model="value" disabled prefix="%" />`,
-                options: `<template>
+                basic: `
+<InputNumber v-model="value" disabled prefix="%" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputNumber v-model="value" disabled prefix="%" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputNumber v-model="value" disabled prefix="%" />
     </div>
diff --git a/doc/inputnumber/FloatLabelDoc.vue b/doc/inputnumber/FloatLabelDoc.vue
index 5dc9abbd7..c912741de 100644
--- a/doc/inputnumber/FloatLabelDoc.vue
+++ b/doc/inputnumber/FloatLabelDoc.vue
@@ -17,11 +17,13 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<span class="p-float-label">
+                basic: `
+<span class="p-float-label">
     <InputNumber id="number-input" v-model="value" />
     <label for="number-input">Number</label>
 </span>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputNumber id="number-input" v-model="value" />
@@ -39,7 +41,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputNumber id="number-input" v-model="value" />
diff --git a/doc/inputnumber/ImportDoc.vue b/doc/inputnumber/ImportDoc.vue
index 24d91be05..8f5ae5270 100644
--- a/doc/inputnumber/ImportDoc.vue
+++ b/doc/inputnumber/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import InputNumber from 'primevue/inputnumber';`
+                basic: `
+import InputNumber from 'primevue/inputnumber';
+`
             }
         };
     }
diff --git a/doc/inputnumber/InvalidDoc.vue b/doc/inputnumber/InvalidDoc.vue
index 031656e30..f51e0cd65 100644
--- a/doc/inputnumber/InvalidDoc.vue
+++ b/doc/inputnumber/InvalidDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />`,
-                options: `<template>
+                basic: `
+<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />
     </div>
diff --git a/doc/inputnumber/LocaleDoc.vue b/doc/inputnumber/LocaleDoc.vue
index 579c542f2..ad3003d4b 100644
--- a/doc/inputnumber/LocaleDoc.vue
+++ b/doc/inputnumber/LocaleDoc.vue
@@ -32,11 +32,13 @@ export default {
             value3: 635524,
             value4: 732762,
             code: {
-                basic: `<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
+                basic: `
+<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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
@@ -69,7 +71,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
diff --git a/doc/inputnumber/NumeralsDoc.vue b/doc/inputnumber/NumeralsDoc.vue
index 528efe8cc..78e642b3d 100644
--- a/doc/inputnumber/NumeralsDoc.vue
+++ b/doc/inputnumber/NumeralsDoc.vue
@@ -32,11 +32,13 @@ export default {
             value3: 2351.35,
             value4: 50,
             code: {
-                basic: `<InputNumber v-model="value1" inputId="integeronly" />
+                basic: `
+<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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
@@ -69,7 +71,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
diff --git a/doc/inputnumber/PrefixSuffixDoc.vue b/doc/inputnumber/PrefixSuffixDoc.vue
index a66423175..d05ffd9c4 100644
--- a/doc/inputnumber/PrefixSuffixDoc.vue
+++ b/doc/inputnumber/PrefixSuffixDoc.vue
@@ -32,11 +32,13 @@ export default {
             value3: 10,
             value4: 20,
             code: {
-                basic: `<InputNumber v-model="value1" inputId="mile" suffix=" mi" />
+                basic: `
+<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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="mile" class="font-bold block mb-2"> Mile </label>
@@ -69,7 +71,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-3 p-fluid">
         <div class="flex-auto">
             <label for="mile" class="font-bold block mb-2"> Mile </label>
diff --git a/doc/inputnumber/VerticalDoc.vue b/doc/inputnumber/VerticalDoc.vue
index c94dfd201..db3b21b7e 100644
--- a/doc/inputnumber/VerticalDoc.vue
+++ b/doc/inputnumber/VerticalDoc.vue
@@ -23,9 +23,11 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <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" />
@@ -41,7 +43,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <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" />
diff --git a/doc/inputnumber/form/VeeValidateDoc.vue b/doc/inputnumber/form/VeeValidateDoc.vue
index d0f624025..a803ccfd3 100644
--- a/doc/inputnumber/form/VeeValidateDoc.vue
+++ b/doc/inputnumber/form/VeeValidateDoc.vue
@@ -45,7 +45,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="year">Enter a year between 1960-2050.</label>
@@ -56,7 +57,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="year">Enter a year between 1960-2050.</label>
@@ -99,7 +101,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="year">Enter a year between 1960-2050.</label>
diff --git a/doc/inputnumber/pt/PTDoc.vue b/doc/inputnumber/pt/PTDoc.vue
index f8cd4036d..71fb0c16e 100644
--- a/doc/inputnumber/pt/PTDoc.vue
+++ b/doc/inputnumber/pt/PTDoc.vue
@@ -25,7 +25,8 @@ export default {
         return {
             value: 20,
             code: {
-                basic: `<InputNumber
+                basic: `
+<InputNumber
     v-model="value"
     showButtons
     buttonLayout="horizontal"
@@ -39,7 +40,8 @@ export default {
         decrementButton: { class: 'bg-orange-500 border-orange-500' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputNumber
             v-model="value"
@@ -67,7 +69,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputNumber
             v-model="value"
diff --git a/doc/inputnumber/theming/TailwindDoc.vue b/doc/inputnumber/theming/TailwindDoc.vue
index 5d071dc20..1fd2a5450 100644
--- a/doc/inputnumber/theming/TailwindDoc.vue
+++ b/doc/inputnumber/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     inputnumber: {
         root: 'w-full inline-flex',
         input: ({ props }) => ({
@@ -47,7 +46,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap">
         <div class="flex-auto">
             <label for="integeronly" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Integer Only </label>
diff --git a/doc/inputswitch/AccessibilityDoc.vue b/doc/inputswitch/AccessibilityDoc.vue
index afcc4895d..3ebfe393b 100644
--- a/doc/inputswitch/AccessibilityDoc.vue
+++ b/doc/inputswitch/AccessibilityDoc.vue
@@ -36,7 +36,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<label for="switch1">Remember Me</label>
+                basic: `
+<label for="switch1">Remember Me</label>
 <InputSwitch inputId="switch1" />
 
 <span id="switch2">Remember Me</span>
diff --git a/doc/inputswitch/BasicDoc.vue b/doc/inputswitch/BasicDoc.vue
index fc0dc426c..1c8f60ffb 100644
--- a/doc/inputswitch/BasicDoc.vue
+++ b/doc/inputswitch/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<InputSwitch v-model="checked" />`,
-                options: `<template>
+                basic: `
+<InputSwitch v-model="checked" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" />
     </div>
diff --git a/doc/inputswitch/DisabledDoc.vue b/doc/inputswitch/DisabledDoc.vue
index 85785bd5f..cf2624fbb 100644
--- a/doc/inputswitch/DisabledDoc.vue
+++ b/doc/inputswitch/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<InputSwitch v-model="checked" disabled />`,
-                options: `<template>
+                basic: `
+<InputSwitch v-model="checked" disabled />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" disabled />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" disabled />
     </div>
diff --git a/doc/inputswitch/ImportDoc.vue b/doc/inputswitch/ImportDoc.vue
index bd0eed0b4..e955216a4 100644
--- a/doc/inputswitch/ImportDoc.vue
+++ b/doc/inputswitch/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import InputSwitch from 'primevue/inputswitch';`
+                basic: `
+import InputSwitch from 'primevue/inputswitch';
+`
             }
         };
     }
diff --git a/doc/inputswitch/InvalidDoc.vue b/doc/inputswitch/InvalidDoc.vue
index 16dd20178..2319a6c32 100644
--- a/doc/inputswitch/InvalidDoc.vue
+++ b/doc/inputswitch/InvalidDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<InputSwitch v-model="checked" class="p-invalid" />`,
-                options: `<template>
+                basic: `
+<InputSwitch v-model="checked" class="p-invalid" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" class="p-invalid" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" class="p-invalid" />
     </div>
diff --git a/doc/inputswitch/PreselectionDoc.vue b/doc/inputswitch/PreselectionDoc.vue
index 0e7db8224..b7500a593 100644
--- a/doc/inputswitch/PreselectionDoc.vue
+++ b/doc/inputswitch/PreselectionDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             checked: true,
             code: {
-                basic: `<InputSwitch v-model="checked" />`,
-                options: `<template>
+                basic: `
+<InputSwitch v-model="checked" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputSwitch v-model="checked" />
     </div>
diff --git a/doc/inputswitch/form/VeeValidateDoc.vue b/doc/inputswitch/form/VeeValidateDoc.vue
index 2f82f48d4..fd48189f9 100644
--- a/doc/inputswitch/form/VeeValidateDoc.vue
+++ b/doc/inputswitch/form/VeeValidateDoc.vue
@@ -43,7 +43,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
@@ -53,7 +54,8 @@ export default {
         </form>
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
@@ -94,7 +96,8 @@ export default {
     },
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>I've read and accept the terms & conditions.</div>
diff --git a/doc/inputswitch/pt/PTDoc.vue b/doc/inputswitch/pt/PTDoc.vue
index 8a8bfd7da..265551e87 100644
--- a/doc/inputswitch/pt/PTDoc.vue
+++ b/doc/inputswitch/pt/PTDoc.vue
@@ -19,7 +19,8 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<InputSwitch
+                basic: `
+<InputSwitch
     v-model="checked"
     :pt="{
         slider: ({ props }) => ({
@@ -27,7 +28,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputSwitch
             v-model="checked"
@@ -49,7 +51,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputSwitch
             v-model="checked"
diff --git a/doc/inputswitch/theming/TailwindDoc.vue b/doc/inputswitch/theming/TailwindDoc.vue
index b6b58c7d5..874201c67 100644
--- a/doc/inputswitch/theming/TailwindDoc.vue
+++ b/doc/inputswitch/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     inputswitch: {
         root: ({ props }) => ({
             class: [
@@ -44,7 +43,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <InputSwitch v-model="checked" />
     </div>
diff --git a/doc/inputtext/AccessibilityDoc.vue b/doc/inputtext/AccessibilityDoc.vue
index 8a3f1b408..8c36acf55 100644
--- a/doc/inputtext/AccessibilityDoc.vue
+++ b/doc/inputtext/AccessibilityDoc.vue
@@ -35,7 +35,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<label for="firstname">Firstname</label>
+                basic: `
+<label for="firstname">Firstname</label>
 <InputText id="firstname" />
 
 <span id="lastname">Lastname</span>
diff --git a/doc/inputtext/BasicDoc.vue b/doc/inputtext/BasicDoc.vue
index 0aec837e8..a989a9de5 100644
--- a/doc/inputtext/BasicDoc.vue
+++ b/doc/inputtext/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<InputText type="text" v-model="value" />`,
-                options: `<template>
+                basic: `
+<InputText type="text" v-model="value" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputText type="text" v-model="value" />
     </div>
@@ -31,7 +33,8 @@ export default {
 }
 <\/script>
         `,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputText type="text" v-model="value" />
     </div>
diff --git a/doc/inputtext/DisabledDoc.vue b/doc/inputtext/DisabledDoc.vue
index b89f2843a..70e2ef1ae 100644
--- a/doc/inputtext/DisabledDoc.vue
+++ b/doc/inputtext/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<InputText v-model="value" disabled placeholder="Disabled" />`,
-                options: `<template>
+                basic: `
+<InputText v-model="value" disabled placeholder="Disabled" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
diff --git a/doc/inputtext/FloatLabelDoc.vue b/doc/inputtext/FloatLabelDoc.vue
index ea1bb0d55..b2a4ce764 100644
--- a/doc/inputtext/FloatLabelDoc.vue
+++ b/doc/inputtext/FloatLabelDoc.vue
@@ -17,11 +17,13 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<span class="p-float-label">
+                basic: `
+<span class="p-float-label">
     <InputText id="username" v-model="value" />
     <label for="username">Username</label>
 </span>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputText id="username" v-model="value" />
@@ -39,8 +41,9 @@ export default {
     }
 }
 <\/script>
-                `,
-                composition: `<template>
+`,
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <InputText id="username" v-model="value" />
@@ -54,7 +57,7 @@ import { ref } from 'vue';
 
 const value = ref(null);
 <\/script>
-                `
+`
             }
         };
     }
diff --git a/doc/inputtext/HelpTextDoc.vue b/doc/inputtext/HelpTextDoc.vue
index ac3dd59aa..772d3bfa6 100644
--- a/doc/inputtext/HelpTextDoc.vue
+++ b/doc/inputtext/HelpTextDoc.vue
@@ -18,13 +18,14 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<div class="flex flex-column gap-2">
+                basic: `
+<div class="flex flex-column gap-2">
     <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>
-                `,
-                options: `<template>
+</div>`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-2">
             <label for="username">Username</label>
@@ -42,9 +43,9 @@ export default {
         }
     }
 }
-<\/script>
-                `,
-                composition: `<template>
+<\/script>`,
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-2">
             <label for="username">Username</label>
@@ -58,8 +59,7 @@ 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 7a0ae6b64..bdb9e536a 100644
--- a/doc/inputtext/IconsDoc.vue
+++ b/doc/inputtext/IconsDoc.vue
@@ -23,7 +23,8 @@ export default {
             value1: null,
             value2: null,
             code: {
-                basic: `<span class="p-input-icon-left">
+                basic: `
+<span class="p-input-icon-left">
     <i class="pi pi-search" />
     <InputText v-model="value1" placeholder="Search" />
 </span>
@@ -32,7 +33,8 @@ export default {
     <i class="pi pi-spin pi-spinner" />
     <InputText v-model="value2" />
 </span>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-3">
         <span class="p-input-icon-left">
             <i class="pi pi-search" />
@@ -56,7 +58,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-3">
         <span class="p-input-icon-left">
             <i class="pi pi-search" />
diff --git a/doc/inputtext/ImportDoc.vue b/doc/inputtext/ImportDoc.vue
index 1677dcca7..1f5748f9b 100644
--- a/doc/inputtext/ImportDoc.vue
+++ b/doc/inputtext/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import InputText from 'primevue/inputtext';`
+                basic: `
+import InputText from 'primevue/inputtext';
+`
             }
         };
     }
diff --git a/doc/inputtext/InvalidDoc.vue b/doc/inputtext/InvalidDoc.vue
index 61e38b212..08abc6e97 100644
--- a/doc/inputtext/InvalidDoc.vue
+++ b/doc/inputtext/InvalidDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<InputText v-model="value" class="p-invalid" />`,
-                options: `<template>
+                basic: `
+<InputText v-model="value" class="p-invalid" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputText v-model="value" class="p-invalid" />
     </div> 
@@ -30,7 +32,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputText v-model="value" class="p-invalid" />
     </div> 
diff --git a/doc/inputtext/SizesDoc.vue b/doc/inputtext/SizesDoc.vue
index b5f1781a8..c51a79f53 100644
--- a/doc/inputtext/SizesDoc.vue
+++ b/doc/inputtext/SizesDoc.vue
@@ -18,10 +18,12 @@ export default {
             value2: null,
             value3: null,
             code: {
-                basic: `<InputText v-model="value1" type="text" size="small" placeholder="Small" />
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <InputText v-model="value1" type="text" size="small" placeholder="Small" />
         <InputText v-model="value2" type="text" placeholder="Normal" />
@@ -40,7 +42,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <InputText v-model="value1" type="text" size="small" placeholder="Small" />
         <InputText v-model="value2" type="text" placeholder="Normal" />
diff --git a/doc/inputtext/form/VeeValidateDoc.vue b/doc/inputtext/form/VeeValidateDoc.vue
index 55dc13c35..b97820a7d 100644
--- a/doc/inputtext/form/VeeValidateDoc.vue
+++ b/doc/inputtext/form/VeeValidateDoc.vue
@@ -45,7 +45,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
@@ -58,7 +59,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
@@ -101,7 +103,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
diff --git a/doc/inputtext/pt/PTDoc.vue b/doc/inputtext/pt/PTDoc.vue
index 342b9fe1c..0f349a955 100644
--- a/doc/inputtext/pt/PTDoc.vue
+++ b/doc/inputtext/pt/PTDoc.vue
@@ -18,14 +18,16 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<InputText
+                basic: `
+<InputText
     v-model="value"
     type="text"
     :pt="{
         root: { class: 'border-teal-400' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <InputText
             v-model="value"
@@ -47,7 +49,8 @@ export default {
 }
 <\/script>
         `,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <InputText
             v-model="value"
diff --git a/doc/inputtext/theming/TailwindDoc.vue b/doc/inputtext/theming/TailwindDoc.vue
index 34b057169..d850617f2 100644
--- a/doc/inputtext/theming/TailwindDoc.vue
+++ b/doc/inputtext/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     inputtext: {
         root: ({ props, context }) => ({
             class: [
@@ -38,7 +37,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <InputText type="text" v-model="value" />
     </div>
diff --git a/doc/installation/DownloadDoc.vue b/doc/installation/DownloadDoc.vue
index 91701b702..2ee2b59c0 100644
--- a/doc/installation/DownloadDoc.vue
+++ b/doc/installation/DownloadDoc.vue
@@ -10,11 +10,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `// with npm
+                basic: `
+// with npm
 npm install primevue
 
 // with yarn
-yarn add primevue`
+yarn add primevue
+`
             }
         };
     }
diff --git a/doc/installation/NuxtIntegrationDoc.vue b/doc/installation/NuxtIntegrationDoc.vue
index b24315681..03fa3c5c1 100644
--- a/doc/installation/NuxtIntegrationDoc.vue
+++ b/doc/installation/NuxtIntegrationDoc.vue
@@ -19,17 +19,20 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default defineNuxtConfig({
+                basic: `
+export default defineNuxtConfig({
     css: [
         "primevue/resources/themes/lara-light-blue/theme.css"
     ],
 	build: {
 		transpile: ["primevue"]
 	}
-})`
+})
+`
             },
             code2: {
-                basic: `import { defineNuxtPlugin } from "#app";
+                basic: `
+import { defineNuxtPlugin } from "#app";
 import PrimeVue from "primevue/config";
 import Button from "primevue/button";
 
@@ -37,7 +40,8 @@ export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use(PrimeVue, { ripple: true });
     nuxtApp.vueApp.component("Button", Button);
     //other components that you need
-});`
+});
+`
             }
         };
     }
diff --git a/doc/installation/PluginDoc.vue b/doc/installation/PluginDoc.vue
index 38333ac4e..91b343ef9 100644
--- a/doc/installation/PluginDoc.vue
+++ b/doc/installation/PluginDoc.vue
@@ -10,11 +10,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `import { createApp } from 'vue';
+                basic: `
+import { createApp } from 'vue';
 import PrimeVue from 'primevue/config';
 
 const app = createApp(App);
-app.use(PrimeVue);`
+app.use(PrimeVue);
+`
             }
         };
     }
diff --git a/doc/installation/PropCasesDoc.vue b/doc/installation/PropCasesDoc.vue
index 6b6a2436f..f6a16009e 100644
--- a/doc/installation/PropCasesDoc.vue
+++ b/doc/installation/PropCasesDoc.vue
@@ -11,7 +11,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Dialog :showHeader="false"></Dialog>
+                basic: `
+<Dialog :showHeader="false"></Dialog>
 
 <!-- can be written as -->
 
diff --git a/doc/installation/StyledModeDoc.vue b/doc/installation/StyledModeDoc.vue
index 1aa0c1eec..94312750c 100644
--- a/doc/installation/StyledModeDoc.vue
+++ b/doc/installation/StyledModeDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `//theme
-import "primevue/resources/themes/lara-light-indigo/theme.css";`
+                basic: `
+//theme
+import "primevue/resources/themes/lara-light-indigo/theme.css";
+`
             }
         };
     }
diff --git a/doc/installation/UnstyledModeDoc.vue b/doc/installation/UnstyledModeDoc.vue
index 01ef628bf..84c1819c6 100644
--- a/doc/installation/UnstyledModeDoc.vue
+++ b/doc/installation/UnstyledModeDoc.vue
@@ -13,11 +13,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `import { createApp } from "vue";
+                basic: `
+import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, { unstyled: true });`
+app.use(PrimeVue, { unstyled: true });
+`
             }
         };
     }
diff --git a/doc/installation/UsageDoc.vue b/doc/installation/UsageDoc.vue
index 59a04791e..459fca14d 100644
--- a/doc/installation/UsageDoc.vue
+++ b/doc/installation/UsageDoc.vue
@@ -13,16 +13,20 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Button from "primevue/button"
+                basic: `
+import Button from "primevue/button"
 
 const app = createApp(App);
-app.component('Button', Button);`,
-                options: `<template>
+app.component('Button', Button);
+`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Check" icon="pi pi-check" />
     </div>
diff --git a/doc/knob/AccessibilityDoc.vue b/doc/knob/AccessibilityDoc.vue
index d87b26bb6..cbcc88b21 100644
--- a/doc/knob/AccessibilityDoc.vue
+++ b/doc/knob/AccessibilityDoc.vue
@@ -66,7 +66,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="label_number">Number</span>
+                basic: `
+<span id="label_number">Number</span>
 <Knob aria-labelledby="label_number" />
 
 <Knob aria-label="Number" />`
diff --git a/doc/knob/BasicDoc.vue b/doc/knob/BasicDoc.vue
index 5a0d28a8f..074934f19 100644
--- a/doc/knob/BasicDoc.vue
+++ b/doc/knob/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 0,
             code: {
-                basic: `<Knob v-model="value" />`,
-                options: `<template>
+                basic: `
+<Knob v-model="value" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" />
     </div>
diff --git a/doc/knob/ColorDoc.vue b/doc/knob/ColorDoc.vue
index f78414815..01f4759d2 100644
--- a/doc/knob/ColorDoc.vue
+++ b/doc/knob/ColorDoc.vue
@@ -17,8 +17,10 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />`,
-                options: `<template>
+                basic: `
+<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />`,
+                options: `
+<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
   </div>
@@ -33,7 +35,8 @@ export default {
   }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
   </div>
diff --git a/doc/knob/DisabledDoc.vue b/doc/knob/DisabledDoc.vue
index 117436554..38b4be212 100644
--- a/doc/knob/DisabledDoc.vue
+++ b/doc/knob/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `<Knob v-model="value" disabled />`,
-                options: `<template>
+                basic: `
+<Knob v-model="value" disabled />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" disabled />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" disabled />
     </div>
diff --git a/doc/knob/ImportDoc.vue b/doc/knob/ImportDoc.vue
index a078ff520..5224140d4 100644
--- a/doc/knob/ImportDoc.vue
+++ b/doc/knob/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Knob from 'primevue/knob';`
+                basic: `
+import Knob from 'primevue/knob';
+`
             }
         };
     }
diff --git a/doc/knob/MinMaxDoc.vue b/doc/knob/MinMaxDoc.vue
index 7602a21c2..4ff059653 100644
--- a/doc/knob/MinMaxDoc.vue
+++ b/doc/knob/MinMaxDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 10,
             code: {
-                basic: `<Knob v-model="value" :min="-50" :max="10" />`,
-                options: `<template>
+                basic: `
+<Knob v-model="value" :min="-50" :max="10" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" :min="-50" :max="50" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" :min="-50" :max="50" />
     </div>
diff --git a/doc/knob/ReactiveDoc.vue b/doc/knob/ReactiveDoc.vue
index ecc4e9fb6..d1eca3339 100644
--- a/doc/knob/ReactiveDoc.vue
+++ b/doc/knob/ReactiveDoc.vue
@@ -18,12 +18,14 @@ export default {
         return {
             value: 0,
             code: {
-                basic: `<Knob v-model="value" :size="150" readonly />
+                basic: `
+<Knob v-model="value" :size="150" readonly />
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column align-items-center gap-2">
         <Knob v-model="value" :size="150" readonly />
         <div class="flex gap-2">
@@ -42,7 +44,8 @@ export default {
   }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center gap-2">
         <Knob v-model="value" :size="150" readonly />
         <div class="flex gap-2">
diff --git a/doc/knob/ReadOnlyDoc.vue b/doc/knob/ReadOnlyDoc.vue
index 977b301f3..2edf7ceec 100644
--- a/doc/knob/ReadOnlyDoc.vue
+++ b/doc/knob/ReadOnlyDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `<Knob v-model="value" readonly />`,
-                options: `<template>
+                basic: `
+<Knob v-model="value" readonly />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" readonly />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" readonly />
     </div>
diff --git a/doc/knob/SizeDoc.vue b/doc/knob/SizeDoc.vue
index 582025fd2..5b49f6788 100644
--- a/doc/knob/SizeDoc.vue
+++ b/doc/knob/SizeDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 60,
             code: {
-                basic: `<Knob v-model="value" :size="200" />`,
-                options: `<template>
+                basic: `
+<Knob v-model="value" :size="200" />`,
+                options: `
+<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" :size="200" />
   </div>
@@ -30,7 +32,8 @@ export default {
   }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" :size="200" />
   </div>
diff --git a/doc/knob/StepDoc.vue b/doc/knob/StepDoc.vue
index f3b504abf..99f7f86bb 100644
--- a/doc/knob/StepDoc.vue
+++ b/doc/knob/StepDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 40,
             code: {
-                basic: `<Knob v-model="value5" :step="10" />`,
-                options: `<template>
+                basic: `
+<Knob v-model="value5" :step="10" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" :step="10" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" :step="10" />
     </div>
diff --git a/doc/knob/StrokeDoc.vue b/doc/knob/StrokeDoc.vue
index 8d70e0191..7e7636bde 100644
--- a/doc/knob/StrokeDoc.vue
+++ b/doc/knob/StrokeDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 40,
             code: {
-                basic: `<Knob v-model="value" :strokeWidth="5" />`,
-                options: `<template>
+                basic: `
+<Knob v-model="value" :strokeWidth="5" />`,
+                options: `
+<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" :strokeWidth="5" />
   </div>
@@ -30,7 +32,8 @@ export default {
   }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
   <div class="card flex justify-content-center">
       <Knob v-model="value" :strokeWidth="5" />
   </div>
diff --git a/doc/knob/TemplateDoc.vue b/doc/knob/TemplateDoc.vue
index 64b2476f4..2db284b00 100644
--- a/doc/knob/TemplateDoc.vue
+++ b/doc/knob/TemplateDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 60,
             code: {
-                basic: `<Knob v-model="value" valueTemplate="{value}%" />`,
-                options: `<template>
+                basic: `
+<Knob v-model="value" valueTemplate="{value}%" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" valueTemplate="{value}%" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Knob v-model="value" valueTemplate="{value}%" />
     </div>
diff --git a/doc/knob/form/VeeValidateDoc.vue b/doc/knob/form/VeeValidateDoc.vue
index ce10b6319..4a190dd91 100644
--- a/doc/knob/form/VeeValidateDoc.vue
+++ b/doc/knob/form/VeeValidateDoc.vue
@@ -49,7 +49,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Knob v-model="value" aria-describedby="text-error" />
@@ -58,7 +59,8 @@ export default {
         </form>
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Knob v-model="value" aria-describedby="text-error" />
@@ -105,7 +107,8 @@ export default {
     },
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <Knob id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
diff --git a/doc/knob/pt/PTDoc.vue b/doc/knob/pt/PTDoc.vue
index 84b9acd62..869ddf87d 100644
--- a/doc/knob/pt/PTDoc.vue
+++ b/doc/knob/pt/PTDoc.vue
@@ -17,13 +17,15 @@ export default {
         return {
             value: 0,
             code: {
-                basic: `<Knob
+                basic: `
+<Knob
     v-model="value"
     :pt="{
         value: { style: { stroke: 'var(--cyan-500)' } }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Knob
             v-model="value"
@@ -43,7 +45,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Knob
             v-model="value"
diff --git a/doc/knob/theming/TailwindDoc.vue b/doc/knob/theming/TailwindDoc.vue
index c995add66..db2db507a 100644
--- a/doc/knob/theming/TailwindDoc.vue
+++ b/doc/knob/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     knob: {
         root: ({ props }) => ({
             class: [
@@ -34,7 +33,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Knob v-model="value" />
     </div>
diff --git a/doc/listbox/AccessibilityDoc.vue b/doc/listbox/AccessibilityDoc.vue
index f254e906d..528eea360 100644
--- a/doc/listbox/AccessibilityDoc.vue
+++ b/doc/listbox/AccessibilityDoc.vue
@@ -144,7 +144,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="lb"></span>Options</span>
+                basic: `
+<span id="lb"></span>Options</span>
 <Listbox aria-labelledby="lb" />
 
 <Listbox aria-label="City" />`
diff --git a/doc/listbox/BasicDoc.vue b/doc/listbox/BasicDoc.vue
index 445800702..05dce638e 100644
--- a/doc/listbox/BasicDoc.vue
+++ b/doc/listbox/BasicDoc.vue
@@ -24,8 +24,10 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />`,
-                options: `<template>
+                basic: `
+<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
     </div>
@@ -47,7 +49,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/listbox/DisabledDoc.vue b/doc/listbox/DisabledDoc.vue
index 5bee48b88..ee047aeb0 100644
--- a/doc/listbox/DisabledDoc.vue
+++ b/doc/listbox/DisabledDoc.vue
@@ -21,8 +21,10 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />`,
-                options: `<template>
+                basic: `
+<Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />
     </div>
@@ -44,7 +46,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" disabled :options="cities" optionLabel="name" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/listbox/FilterDoc.vue b/doc/listbox/FilterDoc.vue
index 9663a96c0..95dd38d05 100644
--- a/doc/listbox/FilterDoc.vue
+++ b/doc/listbox/FilterDoc.vue
@@ -21,8 +21,10 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />`,
-                options: `<template>
+                basic: `
+<Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />
     </div>
@@ -44,7 +46,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" filter optionLabel="name" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/listbox/GroupDoc.vue b/doc/listbox/GroupDoc.vue
index 9d19c5238..db5d0d597 100644
--- a/doc/listbox/GroupDoc.vue
+++ b/doc/listbox/GroupDoc.vue
@@ -56,7 +56,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
+                basic: `
+<Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
     <template #optiongroup="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -64,7 +65,8 @@ export default {
         </div>
     </template>
 </Listbox>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
             <template #optiongroup="slotProps">
@@ -118,7 +120,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-14rem" listStyle="max-height:250px">
             <template #optiongroup="slotProps">
diff --git a/doc/listbox/ImportDoc.vue b/doc/listbox/ImportDoc.vue
index 62baed653..5f6086a0f 100644
--- a/doc/listbox/ImportDoc.vue
+++ b/doc/listbox/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Listbox from 'primevue/listbox';`
+                basic: `
+import Listbox from 'primevue/listbox';
+`
             }
         };
     }
diff --git a/doc/listbox/InvalidDoc.vue b/doc/listbox/InvalidDoc.vue
index 474eda8ea..34914520b 100644
--- a/doc/listbox/InvalidDoc.vue
+++ b/doc/listbox/InvalidDoc.vue
@@ -21,8 +21,10 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />`,
-                options: `<template>
+                basic: `
+<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">
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />
     </div>
@@ -44,7 +46,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />
     </div>
diff --git a/doc/listbox/MultipleDoc.vue b/doc/listbox/MultipleDoc.vue
index 81b462a04..792e30adf 100644
--- a/doc/listbox/MultipleDoc.vue
+++ b/doc/listbox/MultipleDoc.vue
@@ -24,8 +24,10 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />`,
-                options: `<template>
+                basic: `
+<Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />
     </div>
@@ -47,7 +49,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCity" :options="cities" multiple optionLabel="name" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/listbox/TemplateDoc.vue b/doc/listbox/TemplateDoc.vue
index 9f647e405..45aab3618 100644
--- a/doc/listbox/TemplateDoc.vue
+++ b/doc/listbox/TemplateDoc.vue
@@ -33,7 +33,8 @@ export default {
                 { name: 'United States', code: 'US' }
             ],
             code: {
-                basic: `<Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
+                basic: `
+<Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
     <template #option="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -41,7 +42,8 @@ export default {
         </div>
     </template>
 </Listbox>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
             <template #option="slotProps">
@@ -75,7 +77,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedCountry" :options="countries" optionLabel="name" class="w-full md:w-14rem" listStyle="max-height:250px">
             <template #option="slotProps">
diff --git a/doc/listbox/VirtualScrollDoc.vue b/doc/listbox/VirtualScrollDoc.vue
index 916673e0e..6b62c1014 100644
--- a/doc/listbox/VirtualScrollDoc.vue
+++ b/doc/listbox/VirtualScrollDoc.vue
@@ -18,9 +18,11 @@ export default {
             selectedItem: null,
             items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
             code: {
-                basic: `<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
+                basic: `
+<Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
     :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"    
             :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />
@@ -37,7 +39,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox v-model="selectedItem" :options="items" optionLabel="label" optionValue="value"
             :virtualScrollerOptions="{ itemSize: 38 }" class="w-full md:w-14rem" listStyle="height:250px" />
diff --git a/doc/listbox/form/VeeValidateDoc.vue b/doc/listbox/form/VeeValidateDoc.vue
index 4cf20ffc7..d59948245 100644
--- a/doc/listbox/form/VeeValidateDoc.vue
+++ b/doc/listbox/form/VeeValidateDoc.vue
@@ -49,7 +49,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
@@ -59,7 +60,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
@@ -110,7 +112,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <Listbox v-model="value" :class="{ 'p-invalid': errorMessage }" class="w-full md:w-14rem" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" aria-describedby="text-error" />
diff --git a/doc/listbox/pt/PTDoc.vue b/doc/listbox/pt/PTDoc.vue
index 9820240dc..6432f1a7d 100644
--- a/doc/listbox/pt/PTDoc.vue
+++ b/doc/listbox/pt/PTDoc.vue
@@ -29,7 +29,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<Listbox
+                basic: `
+<Listbox
     v-model="selectedCity"
     :options="cities"
     optionLabel="name"
@@ -40,7 +41,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox
             v-model="selectedCity"
@@ -72,7 +74,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Listbox
             v-model="selectedCity"
diff --git a/doc/listbox/theming/TailwindDoc.vue b/doc/listbox/theming/TailwindDoc.vue
index 621a62601..28ef190d2 100644
--- a/doc/listbox/theming/TailwindDoc.vue
+++ b/doc/listbox/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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']
@@ -59,7 +58,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
     </div>
diff --git a/doc/megamenu/BasicDoc.vue b/doc/megamenu/BasicDoc.vue
index 837cc1839..4cc58c859 100644
--- a/doc/megamenu/BasicDoc.vue
+++ b/doc/megamenu/BasicDoc.vue
@@ -129,8 +129,10 @@ export default {
                 }
             ],
             code: {
-                basic: `<MegaMenu :model="items" />`,
-                options: `<template>
+                basic: `
+<MegaMenu :model="items" />`,
+                options: `
+<template>
     <div class="card">
         <MegaMenu :model="items" />
     </div>
@@ -260,7 +262,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <MegaMenu :model="items" />
     </div>
diff --git a/doc/megamenu/ImportDoc.vue b/doc/megamenu/ImportDoc.vue
index cd8e0819c..1d6de5f2b 100644
--- a/doc/megamenu/ImportDoc.vue
+++ b/doc/megamenu/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import MegaMenu from 'primevue/megamenu';`
+                basic: `
+import MegaMenu from 'primevue/megamenu';
+`
             }
         };
     }
diff --git a/doc/megamenu/RouterDoc.vue b/doc/megamenu/RouterDoc.vue
index bab93c05d..4f2a40380 100644
--- a/doc/megamenu/RouterDoc.vue
+++ b/doc/megamenu/RouterDoc.vue
@@ -151,7 +151,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<MegaMenu :model="items">
+                basic: `
+<MegaMenu :model="items">
     <template #item="{ label, item, props, hasSubmenu }">
         <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
             <a :href="routerProps.href" v-bind="props.action">
@@ -166,7 +167,8 @@ export default {
         </a>
     </template>
 </MegaMenu>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <MegaMenu :model="items">
             <template #item="{ label, item, props, hasSubmenu }">
@@ -315,7 +317,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <MegaMenu :model="items">
             <template #item="{ label, item, props, hasSubmenu }">
diff --git a/doc/megamenu/TemplateDoc.vue b/doc/megamenu/TemplateDoc.vue
index 4f7b55f27..45ef27f32 100644
--- a/doc/megamenu/TemplateDoc.vue
+++ b/doc/megamenu/TemplateDoc.vue
@@ -156,7 +156,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<MegaMenu :model="items" orientation="horizontal">
+                basic: `
+<MegaMenu :model="items" orientation="horizontal">
     <template #start>
         <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
     </template>
@@ -177,7 +178,8 @@ export default {
         <InputText placeholder="Search" type="text" />
     </template>
 </MegaMenu>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <MegaMenu :model="items" orientation="horizontal">
             <template #start>
diff --git a/doc/megamenu/VerticalDoc.vue b/doc/megamenu/VerticalDoc.vue
index 27d0f88c7..1db4789e6 100644
--- a/doc/megamenu/VerticalDoc.vue
+++ b/doc/megamenu/VerticalDoc.vue
@@ -129,8 +129,10 @@ export default {
                 }
             ],
             code: {
-                basic: `<MegaMenu :model="items" orientation="vertical" />`,
-                options: `<template>
+                basic: `
+<MegaMenu :model="items" orientation="vertical" />`,
+                options: `
+<template>
     <div class="card">
         <MegaMenu :model="items" orientation="vertical" />
     </div>
@@ -260,7 +262,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <MegaMenu :model="items" orientation="vertical" />
     </div>
diff --git a/doc/megamenu/pt/PTDoc.vue b/doc/megamenu/pt/PTDoc.vue
index 934c0a9c3..2ae853aca 100644
--- a/doc/megamenu/pt/PTDoc.vue
+++ b/doc/megamenu/pt/PTDoc.vue
@@ -134,7 +134,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<MegaMenu
+                basic: `
+<MegaMenu
     :model="items"
     :pt="{
         action: ({ props, state, context }) => ({
@@ -142,7 +143,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <MegaMenu
             :model="items"
@@ -279,7 +281,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <MegaMenu
             :model="items"
diff --git a/doc/megamenu/theming/TailwindDoc.vue b/doc/megamenu/theming/TailwindDoc.vue
index c62a22d4f..e154c0e7a 100644
--- a/doc/megamenu/theming/TailwindDoc.vue
+++ b/doc/megamenu/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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' }]
@@ -85,7 +84,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <MegaMenu :model="items" />
     </div>
diff --git a/doc/menu/BasicDoc.vue b/doc/menu/BasicDoc.vue
index 75a901333..8b38345d8 100644
--- a/doc/menu/BasicDoc.vue
+++ b/doc/menu/BasicDoc.vue
@@ -17,8 +17,10 @@ export default {
                 { label: 'Delete', icon: 'pi pi-fw pi-trash' }
             ],
             code: {
-                basic: `<Menu :model="items" />`,
-                options: `<template>
+                basic: `
+<Menu :model="items" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Menu :model="items" />
     </div>
@@ -36,7 +38,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Menu :model="items" />
     </div>
diff --git a/doc/menu/GroupDoc.vue b/doc/menu/GroupDoc.vue
index 089a4ba4f..c32cb27c6 100644
--- a/doc/menu/GroupDoc.vue
+++ b/doc/menu/GroupDoc.vue
@@ -34,9 +34,11 @@ export default {
                 }
             ],
             code: {
-                basic: `<Menu :model="items" />
+                basic: `
+<Menu :model="items" />
 <Toast />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Menu :model="items" />
         <Toast />
@@ -72,7 +74,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Menu :model="items" />
         <Toast />
diff --git a/doc/menu/ImportDoc.vue b/doc/menu/ImportDoc.vue
index 07349493b..4f4330da5 100644
--- a/doc/menu/ImportDoc.vue
+++ b/doc/menu/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Menu from 'primevue/menu';`
+                basic: `
+import Menu from 'primevue/menu';
+`
             }
         };
     }
diff --git a/doc/menu/PopupDoc.vue b/doc/menu/PopupDoc.vue
index 8329b4df5..8d9f33e0e 100644
--- a/doc/menu/PopupDoc.vue
+++ b/doc/menu/PopupDoc.vue
@@ -35,10 +35,12 @@ export default {
                 }
             ],
             code: {
-                basic: `<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
+                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 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
         <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
@@ -83,7 +85,8 @@ export default {
     },
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
         <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
diff --git a/doc/menu/RouterDoc.vue b/doc/menu/RouterDoc.vue
index 30a6a1eba..39cf53371 100644
--- a/doc/menu/RouterDoc.vue
+++ b/doc/menu/RouterDoc.vue
@@ -66,7 +66,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Menu :model="items">
+                basic: `
+<Menu :model="items">
     <template #item="{ label, item, props }">
         <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
             <a :href="routerProps.href" v-bind="props.action">
@@ -80,7 +81,8 @@ export default {
         </a>
     </template>
 </Menu>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Menu :model="items">
             <template #item="{ label, item, props }">
@@ -146,7 +148,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Menu :model="items">
             <template #item="{ label, item, props }">
diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index bcee59651..f77767368 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -52,7 +52,8 @@ export default {
                 { separator: true }
             ],
             code: {
-                basic: `<Menu :model="items">
+                basic: `
+<Menu :model="items">
     <template #start>
         <button @click="profileClick" class="w-full p-link flex align-items-center p-2 pl-3 text-color hover:surface-200 border-noround">
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
@@ -76,7 +77,8 @@ export default {
         </button>
     </template>
 </Menu>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Menu :model="items">
             <template #start>
@@ -132,7 +134,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Menu :model="items">
             <template #start>
diff --git a/doc/menu/pt/PTDoc.vue b/doc/menu/pt/PTDoc.vue
index 228b39fdc..c48cc01cc 100644
--- a/doc/menu/pt/PTDoc.vue
+++ b/doc/menu/pt/PTDoc.vue
@@ -55,7 +55,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Menu
+                basic: `
+<Menu
     :model="items"
     :pt="{
         submenuHeader: { class: 'text-surface-900' },
@@ -64,7 +65,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Menu
             :model="items"
@@ -123,7 +125,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Menu
             :model="items"
diff --git a/doc/menu/theming/TailwindDoc.vue b/doc/menu/theming/TailwindDoc.vue
index c8afecffa..0732b00d0 100644
--- a/doc/menu/theming/TailwindDoc.vue
+++ b/doc/menu/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -53,7 +52,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Menu :model="items" />
     </div>
diff --git a/doc/menubar/BasicDoc.vue b/doc/menubar/BasicDoc.vue
index 542cae3c1..db5f53238 100644
--- a/doc/menubar/BasicDoc.vue
+++ b/doc/menubar/BasicDoc.vue
@@ -136,8 +136,10 @@ export default {
                 }
             ],
             code: {
-                basic: `<Menubar :model="items" />`,
-                options: `<template>
+                basic: `
+<Menubar :model="items" />`,
+                options: `
+<template>
     <div class="card relative z-2">
         <Menubar :model="items" />
     </div>
@@ -274,7 +276,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card relative z-2">
         <Menubar :model="items" />
     </div>
diff --git a/doc/menubar/ImportDoc.vue b/doc/menubar/ImportDoc.vue
index 92ed07c66..9c343cde5 100644
--- a/doc/menubar/ImportDoc.vue
+++ b/doc/menubar/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Menubar from 'primevue/menubar';`
+                basic: `
+import Menubar from 'primevue/menubar';
+`
             }
         };
     }
diff --git a/doc/menubar/RouterDoc.vue b/doc/menubar/RouterDoc.vue
index 28caffaf7..7f8a7491c 100644
--- a/doc/menubar/RouterDoc.vue
+++ b/doc/menubar/RouterDoc.vue
@@ -158,7 +158,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Menubar :model="items">
+                basic: `
+<Menubar :model="items">
     <template #item="{ label, item, props, root, hasSubmenu }">
         <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
             <a :href="routerProps.href" v-bind="props.action">
@@ -173,7 +174,8 @@ export default {
         </a>
     </template>
 </Menubar>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card relative z-2">
         <Menubar :model="items">
             <template #item="{ label, item, props, root, hasSubmenu }">
@@ -329,7 +331,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card relative z-2">
         <Menubar :model="items">
             <template #item="{ label, item, props, root, hasSubmenu }">
diff --git a/doc/menubar/TemplateDoc.vue b/doc/menubar/TemplateDoc.vue
index e0d484df1..58a6ac230 100644
--- a/doc/menubar/TemplateDoc.vue
+++ b/doc/menubar/TemplateDoc.vue
@@ -161,7 +161,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Menubar :model="items">
+                basic: `
+<Menubar :model="items">
     <template #start>
         <img alt="logo" src="/images/logo.svg" height="40" class="mr-2" />
     </template>
@@ -182,7 +183,8 @@ export default {
         <InputText placeholder="Search" type="text" />
     </template>
 </Menubar>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card relative z-2">
         <Menubar :model="items">
             <template #start>
@@ -344,7 +346,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card relative z-2">
         <Menubar :model="items">
             <template #start>
diff --git a/doc/menubar/pt/PTDoc.vue b/doc/menubar/pt/PTDoc.vue
index 1e3066fe9..a33dd03bd 100644
--- a/doc/menubar/pt/PTDoc.vue
+++ b/doc/menubar/pt/PTDoc.vue
@@ -141,7 +141,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Menubar
+                basic: `
+<Menubar
     :model="items"
     :pt="{
         action: ({ props, state, context }) => ({
@@ -149,7 +150,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card relative z-2">
         <Menubar
             :model="items"
@@ -293,7 +295,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card relative z-2">
         <Menubar
             :model="items"
diff --git a/doc/menubar/theming/TailwindDoc.vue b/doc/menubar/theming/TailwindDoc.vue
index 131f351f8..e0743d828 100644
--- a/doc/menubar/theming/TailwindDoc.vue
+++ b/doc/menubar/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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']
@@ -98,7 +97,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card relative z-2">
         <Menubar :model="items" />
     </div>
diff --git a/doc/message/AccessibilityDoc.vue b/doc/message/AccessibilityDoc.vue
index 963152f0a..74c7bfdf6 100644
--- a/doc/message/AccessibilityDoc.vue
+++ b/doc/message/AccessibilityDoc.vue
@@ -44,14 +44,16 @@ export default {
     data() {
         return {
             code1: {
-                basic: `<ConfirmDialog id="confirm" />
+                basic: `
+<ConfirmDialog id="confirm" />
 
 <Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
 
 `
             },
             code2: {
-                basic: `<script setup>
+                basic: `
+<script setup>
 const confirm = useConfirm();
 const isVisible = ref(false);
 
diff --git a/doc/message/BasicDoc.vue b/doc/message/BasicDoc.vue
index 20b189cea..6ab2f0fa5 100644
--- a/doc/message/BasicDoc.vue
+++ b/doc/message/BasicDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Message>Message Content</Message>`,
-                options: `<template>
+                basic: `
+<Message>Message Content</Message>`,
+                options: `
+<template>
     <div class="card">
         <Message>Message Content</Message>
     </div>
@@ -22,7 +24,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Message>Message Content</Message>
     </div>
diff --git a/doc/message/ClosableDoc.vue b/doc/message/ClosableDoc.vue
index a70137ca2..cbb655e3e 100644
--- a/doc/message/ClosableDoc.vue
+++ b/doc/message/ClosableDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Message :closable="false">Message Content</Message>`,
-                options: `<template>
+                basic: `
+<Message :closable="false">Message Content</Message>`,
+                options: `
+<template>
     <div class="card">
         <Message :closable="false">Message Content</Message>
     </div>
@@ -22,7 +24,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Message :closable="false">Message Content</Message>
     </div>
diff --git a/doc/message/CustomIconDoc.vue b/doc/message/CustomIconDoc.vue
index 036cba8cf..61089ec1c 100644
--- a/doc/message/CustomIconDoc.vue
+++ b/doc/message/CustomIconDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Message severity="info" icon="pi pi-send">Info Message Content</Message>`,
-                options: `<template>
+                basic: `
+<Message severity="info" icon="pi pi-send">Info Message Content</Message>`,
+                options: `
+<template>
     <div class="card">
         <Message severity="info" icon="pi pi-send">Info Message Content</Message>
     </div>
@@ -22,7 +24,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Message severity="info" icon="pi pi-send">Info Message Content</Message>
     </div>
diff --git a/doc/message/DynamicDoc.vue b/doc/message/DynamicDoc.vue
index 8cdefdf58..72d5ed3ee 100644
--- a/doc/message/DynamicDoc.vue
+++ b/doc/message/DynamicDoc.vue
@@ -19,12 +19,14 @@ export default {
             messages: [],
             count: 0,
             code: {
-                basic: `<Button label="Show" @click="addMessages()" />
+                basic: `
+<Button label="Show" @click="addMessages()" />
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Button label="Show" @click="addMessages()" />
         <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
@@ -57,7 +59,8 @@ export default {
 };
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Button label="Show" @click="addMessages()" />
         <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
diff --git a/doc/message/ImportDoc.vue b/doc/message/ImportDoc.vue
index 4e10a1761..71ebec070 100644
--- a/doc/message/ImportDoc.vue
+++ b/doc/message/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Message from 'primevue/message';`
+                basic: `
+import Message from 'primevue/message';
+`
             }
         };
     }
diff --git a/doc/message/SeverityDoc.vue b/doc/message/SeverityDoc.vue
index d59098dd0..891b41e0e 100644
--- a/doc/message/SeverityDoc.vue
+++ b/doc/message/SeverityDoc.vue
@@ -16,11 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Message severity="success">Success Message Content</Message>
+                basic: `
+<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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Message severity="success">Success Message Content</Message>
         <Message severity="info">Info Message Content</Message>
@@ -31,7 +33,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Message severity="success">Success Message Content</Message>
         <Message severity="info">Info Message Content</Message>
diff --git a/doc/message/StickyDoc.vue b/doc/message/StickyDoc.vue
index c61151e3a..bbc789187 100644
--- a/doc/message/StickyDoc.vue
+++ b/doc/message/StickyDoc.vue
@@ -19,11 +19,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Message severity="success" sticky>Success Message Content</Message>
+                basic: `
+<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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Message severity="success" sticky>Success Message Content</Message>
         <Message severity="info" sticky>Info Message Content</Message>
@@ -34,7 +36,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Message severity="success" sticky>Success Message Content</Message>
         <Message severity="info" sticky>Info Message Content</Message>
diff --git a/doc/message/TemplateDoc.vue b/doc/message/TemplateDoc.vue
index c03f7fe8f..f2f49ed33 100644
--- a/doc/message/TemplateDoc.vue
+++ b/doc/message/TemplateDoc.vue
@@ -48,7 +48,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `<Message
+                basic: `
+<Message
     :style="{
         border: 'solid #696cff',
         borderWidth: '0 0 0 6px',
@@ -62,7 +63,8 @@ export default {
         <div class="ml-2">Always bet on Prime.</div>
     </div>
 </Message>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Message
             :style="{
@@ -80,7 +82,8 @@ export default {
         </Message>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Message
             :style="{
@@ -100,7 +103,8 @@ export default {
 </template>`
             },
             code2: {
-                basic: `<Message style="border: none">
+                basic: `
+<Message style="border: none">
     <template #container>
         <div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
             <div class="flex align-items-start">
@@ -117,7 +121,8 @@ export default {
         </div>
     </template>
 </Message>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Message style="border: none">
             <template #container>
@@ -138,7 +143,8 @@ export default {
         </Message>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Message style="border: none">
             <template #container>
diff --git a/doc/message/pt/PTDoc.vue b/doc/message/pt/PTDoc.vue
index 3adddc6db..5ed425b3b 100644
--- a/doc/message/pt/PTDoc.vue
+++ b/doc/message/pt/PTDoc.vue
@@ -17,14 +17,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Message
+                basic: `
+<Message
     :pt="{
         root: { class: 'bg-yellow-100' }
     }"
 >
     Message Content
 </Message>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Message
             :pt="{
@@ -38,7 +40,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Message
             :pt="{
diff --git a/doc/message/theming/TailwindDoc.vue b/doc/message/theming/TailwindDoc.vue
index 300487652..1791a7a4a 100644
--- a/doc/message/theming/TailwindDoc.vue
+++ b/doc/message/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     message: {
         root: ({ props }) => ({
             class: [
@@ -49,7 +48,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Message severity="success">Success Message Content</Message>
         <Message severity="info">Info Message Content</Message>
diff --git a/doc/multiselect/AccessibilityDoc.vue b/doc/multiselect/AccessibilityDoc.vue
index 5f4e14b36..9f3f5b1ed 100644
--- a/doc/multiselect/AccessibilityDoc.vue
+++ b/doc/multiselect/AccessibilityDoc.vue
@@ -251,7 +251,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="dd1"></span>Options</span>
+                basic: `
+<span id="dd1"></span>Options</span>
 <MultiSelect aria-labelledby="dd1" />
 
 <MultiSelect aria-label="Options" />`
diff --git a/doc/multiselect/BasicDoc.vue b/doc/multiselect/BasicDoc.vue
index 0adb0adc0..959b5b470 100644
--- a/doc/multiselect/BasicDoc.vue
+++ b/doc/multiselect/BasicDoc.vue
@@ -24,9 +24,11 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+                basic: `
+<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
     :maxSelectedLabels="3" class="w-full md:w-20rem" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"  
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
@@ -49,7 +51,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
diff --git a/doc/multiselect/ChipsDoc.vue b/doc/multiselect/ChipsDoc.vue
index 5d024cb36..ad7d3d0d1 100644
--- a/doc/multiselect/ChipsDoc.vue
+++ b/doc/multiselect/ChipsDoc.vue
@@ -21,9 +21,11 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
+                basic: `
+<MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
     :maxSelectedLabels="3" class="w-full md:w-20rem" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
@@ -46,7 +48,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" display="chip" :options="cities" optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
diff --git a/doc/multiselect/DisabledDoc.vue b/doc/multiselect/DisabledDoc.vue
index 4c9d0ae12..9a6c5a57c 100644
--- a/doc/multiselect/DisabledDoc.vue
+++ b/doc/multiselect/DisabledDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />`,
-                options: `<template>
+                basic: `
+<MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />`,
+                options: `
+<template>
     <div class="flex justify-content-center">
         <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />
     </div>
@@ -23,7 +25,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="flex justify-content-center">
         <MultiSelect disabled placeholder="Select Cities" class="w-full md:w-20rem" />
     </div>
diff --git a/doc/multiselect/FilterDoc.vue b/doc/multiselect/FilterDoc.vue
index 49c34eb7e..5ca86a121 100644
--- a/doc/multiselect/FilterDoc.vue
+++ b/doc/multiselect/FilterDoc.vue
@@ -24,9 +24,11 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
+                basic: `
+<MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
     :maxSelectedLabels="3" class="w-full md:w-20rem" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"  
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
@@ -49,7 +51,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" filter optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
diff --git a/doc/multiselect/FloatLabelDoc.vue b/doc/multiselect/FloatLabelDoc.vue
index c39785f94..375249643 100644
--- a/doc/multiselect/FloatLabelDoc.vue
+++ b/doc/multiselect/FloatLabelDoc.vue
@@ -24,11 +24,13 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<span class="p-float-label">
+                basic: `
+<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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
@@ -53,7 +55,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
diff --git a/doc/multiselect/GroupDoc.vue b/doc/multiselect/GroupDoc.vue
index 1eb814b29..b72a854c6 100644
--- a/doc/multiselect/GroupDoc.vue
+++ b/doc/multiselect/GroupDoc.vue
@@ -56,7 +56,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
+                basic: `
+<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
     <template #optiongroup="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -64,7 +65,8 @@ export default {
         </div>
     </template>
 </MultiSelect>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
             <template #optiongroup="slotProps">
@@ -118,7 +120,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-20rem">
             <template #optiongroup="slotProps">
diff --git a/doc/multiselect/ImportDoc.vue b/doc/multiselect/ImportDoc.vue
index d8c718108..3782eb272 100644
--- a/doc/multiselect/ImportDoc.vue
+++ b/doc/multiselect/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import MultiSelect from 'primevue/multiselect';`
+                basic: `
+import MultiSelect from 'primevue/multiselect';
+`
             }
         };
     }
diff --git a/doc/multiselect/InvalidDoc.vue b/doc/multiselect/InvalidDoc.vue
index 75371d78b..6b5fbd0d9 100644
--- a/doc/multiselect/InvalidDoc.vue
+++ b/doc/multiselect/InvalidDoc.vue
@@ -21,9 +21,11 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+                basic: `
+<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
     :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"  
             :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
@@ -46,7 +48,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
diff --git a/doc/multiselect/LoadingStateDoc.vue b/doc/multiselect/LoadingStateDoc.vue
index 88dc6c58b..fad7713dd 100644
--- a/doc/multiselect/LoadingStateDoc.vue
+++ b/doc/multiselect/LoadingStateDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>`,
-                options: `<template>
+                basic: `
+<MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>
     </div>
@@ -22,7 +24,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect placeholder="Loading..." loading class="w-full md:w-20rem"></MultiSelect>
     </div>
diff --git a/doc/multiselect/TemplateDoc.vue b/doc/multiselect/TemplateDoc.vue
index 3e7451d70..836d59b64 100644
--- a/doc/multiselect/TemplateDoc.vue
+++ b/doc/multiselect/TemplateDoc.vue
@@ -41,7 +41,8 @@ export default {
                 { name: 'United States', code: 'US' }
             ],
             code: {
-                basic: `<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
+                basic: `
+<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
     <template #option="slotProps">
         <div class="flex align-items-center">
             <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@@ -54,7 +55,8 @@ export default {
         </div>
     </template>
 </MultiSelect>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
             <template #option="slotProps">
@@ -93,7 +95,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" display="chip" class="w-full md:w-20rem">
             <template #option="slotProps">
diff --git a/doc/multiselect/VirtualScrollDoc.vue b/doc/multiselect/VirtualScrollDoc.vue
index 93d25ebe0..c3c5c68d9 100644
--- a/doc/multiselect/VirtualScrollDoc.vue
+++ b/doc/multiselect/VirtualScrollDoc.vue
@@ -31,9 +31,11 @@ export default {
             selectAll: false,
             items: Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })),
             code: {
-                basic: `<MultiSelect v-model="selectedItems" :options="items" :maxSelectedLabels="3" :selectAll="selectAll" optionLabel="label" optionValue="value"
+                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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <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" />
@@ -60,7 +62,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <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" />
diff --git a/doc/multiselect/form/VeeValidateDoc.vue b/doc/multiselect/form/VeeValidateDoc.vue
index 10afb2504..49235c17f 100644
--- a/doc/multiselect/form/VeeValidateDoc.vue
+++ b/doc/multiselect/form/VeeValidateDoc.vue
@@ -55,7 +55,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
@@ -65,7 +66,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
@@ -122,7 +124,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <MultiSelect v-model="value" :class="{ 'p-invalid': errorMessage }" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" aria-describedby="text-error" />
diff --git a/doc/multiselect/pt/PTDoc.vue b/doc/multiselect/pt/PTDoc.vue
index 71405ba55..712e822e3 100644
--- a/doc/multiselect/pt/PTDoc.vue
+++ b/doc/multiselect/pt/PTDoc.vue
@@ -31,7 +31,8 @@ export default {
                 { name: 'Paris', code: 'PRS' }
             ],
             code: {
-                basic: `<MultiSelect
+                basic: `
+<MultiSelect
     v-model="selectedCities"
     :options="cities"
     optionLabel="name"
@@ -44,7 +45,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect
             v-model="selectedCities"
@@ -78,7 +80,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <MultiSelect
             v-model="selectedCities"
diff --git a/doc/multiselect/theming/TailwindDoc.vue b/doc/multiselect/theming/TailwindDoc.vue
index 07ec029ba..0c3170f5e 100644
--- a/doc/multiselect/theming/TailwindDoc.vue
+++ b/doc/multiselect/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -139,7 +138,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
             :maxSelectedLabels="3" class="w-full md:w-20rem" />
diff --git a/doc/orderlist/AccessibilityDoc.vue b/doc/orderlist/AccessibilityDoc.vue
index 336ead0b2..814dd84e4 100644
--- a/doc/orderlist/AccessibilityDoc.vue
+++ b/doc/orderlist/AccessibilityDoc.vue
@@ -125,7 +125,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="lb">Options</span>
+                basic: `
+<span id="lb">Options</span>
 <OrderList aria-labelledby="lb" />
 
 <OrderList aria-label="City" />`
diff --git a/doc/orderlist/BasicDoc.vue b/doc/orderlist/BasicDoc.vue
index c66a3a0a0..fdc77fba3 100644
--- a/doc/orderlist/BasicDoc.vue
+++ b/doc/orderlist/BasicDoc.vue
@@ -30,7 +30,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<OrderList v-model="products" listStyle="height:auto" dataKey="id">
+                basic: `
+<OrderList v-model="products" listStyle="height:auto" dataKey="id">
     <template #header> List of Products </template>
     <template #item="slotProps">
         <div class="flex flex-wrap p-2 align-items-center gap-3">
@@ -46,7 +47,8 @@ export default {
         </div>
     </template>
 </OrderList>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card xl:flex xl:justify-content-center">
         <OrderList v-model="products" listStyle="height:auto" dataKey="id">
             <template #header> List of Products </template>
@@ -80,7 +82,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card xl:flex xl:justify-content-center">
         <OrderList v-model="products" listStyle="height:auto" dataKey="id">
             <template #header> List of Products </template>
diff --git a/doc/orderlist/ImportDoc.vue b/doc/orderlist/ImportDoc.vue
index d28ed4f7d..b3193fbab 100644
--- a/doc/orderlist/ImportDoc.vue
+++ b/doc/orderlist/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import OrderList from 'primevue/orderlist';`
+                basic: `
+import OrderList from 'primevue/orderlist';
+`
             }
         };
     }
diff --git a/doc/orderlist/pt/PTDoc.vue b/doc/orderlist/pt/PTDoc.vue
index 7469cb0e1..4ff31e60a 100644
--- a/doc/orderlist/pt/PTDoc.vue
+++ b/doc/orderlist/pt/PTDoc.vue
@@ -38,7 +38,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<OrderList
+                basic: `
+<OrderList
     v-model="products"
     dataKey="id"
     :pt="{
@@ -63,7 +64,8 @@ export default {
         </div>
     </template>
 </OrderList>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card xl:flex xl:justify-content-center">
         <OrderList
             v-model="products"
@@ -106,7 +108,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card xl:flex xl:justify-content-center">
         <OrderList
             v-model="products"
diff --git a/doc/orderlist/theming/TailwindDoc.vue b/doc/orderlist/theming/TailwindDoc.vue
index ccde6d281..c70921eeb 100644
--- a/doc/orderlist/theming/TailwindDoc.vue
+++ b/doc/orderlist/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['ProductService']" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     orderlist: {
         root: 'flex',
         controls: 'flex flex-col justify-center p-5',
@@ -115,7 +114,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card xl:flex xl:justify-center">
         <OrderList v-model="products" listStyle="height:auto" dataKey="id">
             <template #header> List of Products </template>
diff --git a/doc/organizationchart/BasicDoc.vue b/doc/organizationchart/BasicDoc.vue
index 1c1c77976..3978c2d87 100644
--- a/doc/organizationchart/BasicDoc.vue
+++ b/doc/organizationchart/BasicDoc.vue
@@ -44,12 +44,14 @@ export default {
                 ]
             },
             code: {
-                basic: `<OrganizationChart :value="data">
+                basic: `
+<OrganizationChart :value="data">
     <template #default="slotProps">
         <span>{{ slotProps.node.label }}</span>
     </template>
 </OrganizationChart>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data">
             <template #default="slotProps">
@@ -94,7 +96,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data">
             <template #default="slotProps">
diff --git a/doc/organizationchart/ColoredDoc.vue b/doc/organizationchart/ColoredDoc.vue
index bafb54362..4149e613c 100644
--- a/doc/organizationchart/ColoredDoc.vue
+++ b/doc/organizationchart/ColoredDoc.vue
@@ -78,7 +78,8 @@ export default {
                 ]
             },
             code: {
-                basic: `<OrganizationChart :value="data" collapsible>
+                basic: `
+<OrganizationChart :value="data" collapsible>
     <template #person="slotProps">
         <div class="flex flex-column">
             <div class="flex flex-column align-items-center">
@@ -92,7 +93,8 @@ export default {
         <span>{{ slotProps.node.label }}</span>
     </template>
 </OrganizationChart>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #person="slotProps">
@@ -171,7 +173,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #person="slotProps">
diff --git a/doc/organizationchart/ImportDoc.vue b/doc/organizationchart/ImportDoc.vue
index 9a5ff5a56..582561191 100644
--- a/doc/organizationchart/ImportDoc.vue
+++ b/doc/organizationchart/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import OrganizationChart from 'primevue/organizationchart';`
+                basic: `
+import OrganizationChart from 'primevue/organizationchart';
+`
             }
         };
     }
diff --git a/doc/organizationchart/SelectionDoc.vue b/doc/organizationchart/SelectionDoc.vue
index b71cbcb36..2bba87b5b 100644
--- a/doc/organizationchart/SelectionDoc.vue
+++ b/doc/organizationchart/SelectionDoc.vue
@@ -79,7 +79,8 @@ export default {
             },
             selection: {},
             code: {
-                basic: `<OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
+                basic: `
+<OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
     <template #person="slotProps">
         <div class="flex flex-column">
             <div class="flex flex-column align-items-center">
@@ -93,7 +94,8 @@ export default {
         <span>{{ slotProps.node.label }}</span>
     </template>
 </OrganizationChart>`,
-                options: `<template>
+                options: `
+<template>
     <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
         <template #person="slotProps">
             <div class="flex flex-column">
@@ -168,7 +170,8 @@ export default {
     },
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <OrganizationChart v-model:selectionKeys="selection" :value="data" collapsible selectionMode="multiple">
         <template #person="slotProps">
             <div class="flex flex-column">
diff --git a/doc/organizationchart/TemplateDoc.vue b/doc/organizationchart/TemplateDoc.vue
index f2b4ca6c5..c98248a79 100644
--- a/doc/organizationchart/TemplateDoc.vue
+++ b/doc/organizationchart/TemplateDoc.vue
@@ -71,7 +71,8 @@ export default {
                 ]
             },
             code: {
-                basic: `<OrganizationChart :value="data" collapsible>
+                basic: `
+<OrganizationChart :value="data" collapsible>
     <template #country="slotProps">
         <div class="flex flex-column align-items-center">
             <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem shadow-2 flag flag-\${slotProps.node.data}\`" />
@@ -82,7 +83,8 @@ export default {
         <span>{{slotProps.node.data.label}}</span>
     </template>
 </OrganizationChart>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
@@ -154,7 +156,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
diff --git a/doc/organizationchart/pt/PTDoc.vue b/doc/organizationchart/pt/PTDoc.vue
index 509fac93f..4e3a27e71 100644
--- a/doc/organizationchart/pt/PTDoc.vue
+++ b/doc/organizationchart/pt/PTDoc.vue
@@ -50,7 +50,8 @@ export default {
                 ]
             },
             code: {
-                basic: `<OrganizationChart
+                basic: `
+<OrganizationChart
     :value="data"
     collapsible
     :pt="{
@@ -63,7 +64,8 @@ export default {
         <span>{{ slotProps.node.label }}</span>
     </template>
 </OrganizationChart>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card overflow-x-auto">
         <OrganizationChart
             :value="data"
@@ -116,7 +118,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card overflow-x-auto">
         <OrganizationChart
             :value="data"
diff --git a/doc/organizationchart/theming/TailwindDoc.vue b/doc/organizationchart/theming/TailwindDoc.vue
index 6720b6cb8..921abff9e 100644
--- a/doc/organizationchart/theming/TailwindDoc.vue
+++ b/doc/organizationchart/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -64,7 +63,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card overflow-x-auto">
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
diff --git a/doc/overlaypanel/BasicDoc.vue b/doc/overlaypanel/BasicDoc.vue
index af0aa9411..add1c5171 100644
--- a/doc/overlaypanel/BasicDoc.vue
+++ b/doc/overlaypanel/BasicDoc.vue
@@ -17,12 +17,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+                basic: `
+<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
 <OverlayPanel ref="op">
     <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
 </OverlayPanel>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
@@ -41,7 +43,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
diff --git a/doc/overlaypanel/DataTableDoc.vue b/doc/overlaypanel/DataTableDoc.vue
index 2d0631113..6bdff550c 100644
--- a/doc/overlaypanel/DataTableDoc.vue
+++ b/doc/overlaypanel/DataTableDoc.vue
@@ -44,7 +44,8 @@ export default {
             products: null,
             selectedProduct: null,
             code: {
-                basic: `<Toast />
+                basic: `
+<Toast />
 <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
 <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
@@ -73,7 +74,8 @@ export default {
         </Column>
     </DataTable>
 </OverlayPanel>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <Toast />
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
@@ -133,7 +135,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <Toast />
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
diff --git a/doc/overlaypanel/ImportDoc.vue b/doc/overlaypanel/ImportDoc.vue
index 92d5c6e27..7420d57f8 100644
--- a/doc/overlaypanel/ImportDoc.vue
+++ b/doc/overlaypanel/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import OverlayPanel from 'primevue/overlaypanel';`
+                basic: `
+import OverlayPanel from 'primevue/overlaypanel';
+`
             }
         };
     }
diff --git a/doc/overlaypanel/pt/PTDoc.vue b/doc/overlaypanel/pt/PTDoc.vue
index 27088e43b..e4d49b42d 100644
--- a/doc/overlaypanel/pt/PTDoc.vue
+++ b/doc/overlaypanel/pt/PTDoc.vue
@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+                basic: `
+<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
 <OverlayPanel ref="op"
     :pt="{
@@ -24,7 +25,8 @@ export default {
 >
     <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
 </OverlayPanel>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
@@ -47,7 +49,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
diff --git a/doc/overlaypanel/theming/TailwindDoc.vue b/doc/overlaypanel/theming/TailwindDoc.vue
index 1e7b28906..185779883 100644
--- a/doc/overlaypanel/theming/TailwindDoc.vue
+++ b/doc/overlaypanel/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -42,7 +41,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
 
diff --git a/doc/paginator/BasicDoc.vue b/doc/paginator/BasicDoc.vue
index 0a3f99906..4770e30ac 100644
--- a/doc/paginator/BasicDoc.vue
+++ b/doc/paginator/BasicDoc.vue
@@ -16,8 +16,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>`,
-                options: `<template>
+                basic: `
+<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>`,
+                options: `
+<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
     </div>
@@ -25,7 +27,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
     </div>
diff --git a/doc/paginator/CurrentPageReportDoc.vue b/doc/paginator/CurrentPageReportDoc.vue
index c9d6cdfd8..d620bd0af 100644
--- a/doc/paginator/CurrentPageReportDoc.vue
+++ b/doc/paginator/CurrentPageReportDoc.vue
@@ -22,9 +22,11 @@ export default {
         return {
             first: 0,
             code: {
-                basic: `<Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                basic: `
+<Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
     currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
             currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
@@ -40,7 +42,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
             currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
diff --git a/doc/paginator/CustomContentDoc.vue b/doc/paginator/CustomContentDoc.vue
index 6bb51121a..f68c5c7b1 100644
--- a/doc/paginator/CustomContentDoc.vue
+++ b/doc/paginator/CustomContentDoc.vue
@@ -18,7 +18,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
+                basic: `
+<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
     <template #start="slotProps">
         Page: {{ slotProps.state.page }}
         First: {{ slotProps.state.first }}
@@ -28,7 +29,8 @@ export default {
         <Button type="button" icon="pi pi-search" />
     </template>
 </Paginator>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
             <template #start="slotProps">
@@ -45,7 +47,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
             <template #start="slotProps">
diff --git a/doc/paginator/ImportDoc.vue b/doc/paginator/ImportDoc.vue
index 7808b8e8d..3a8f18438 100644
--- a/doc/paginator/ImportDoc.vue
+++ b/doc/paginator/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Paginator from 'primevue/paginator';`
+                basic: `
+import Paginator from 'primevue/paginator';
+`
             }
         };
     }
diff --git a/doc/paginator/ResponsiveDoc.vue b/doc/paginator/ResponsiveDoc.vue
index a89c2deb0..32d0a5798 100644
--- a/doc/paginator/ResponsiveDoc.vue
+++ b/doc/paginator/ResponsiveDoc.vue
@@ -25,7 +25,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Paginator
+                basic: `
+<Paginator
     :template="{
         '640px': 'PrevPageLink CurrentPageReport NextPageLink',
         '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
@@ -35,7 +36,8 @@ export default {
     :rows="10"
     :totalRecords="120">
 </Paginator>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Paginator
             :template="{
@@ -52,7 +54,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Paginator
             :template="{
diff --git a/doc/paginator/TemplateDoc.vue b/doc/paginator/TemplateDoc.vue
index 397a822c0..db0fb1266 100644
--- a/doc/paginator/TemplateDoc.vue
+++ b/doc/paginator/TemplateDoc.vue
@@ -32,12 +32,14 @@ export default {
         return {
             first: 0,
             code: {
-                basic: `<Paginator v-model:first="first" :rows="1" :totalRecords="1" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
+                basic: `
+<Paginator v-model:first="first" :rows="1" :totalRecords="1" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
@@ -56,7 +58,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
diff --git a/doc/paginator/pt/PTDoc.vue b/doc/paginator/pt/PTDoc.vue
index 6e602952e..21ccee9d9 100644
--- a/doc/paginator/pt/PTDoc.vue
+++ b/doc/paginator/pt/PTDoc.vue
@@ -19,7 +19,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Paginator
+                basic: `
+<Paginator
     :rows="10"
     :totalRecords="120"
     :pt="{
@@ -28,7 +29,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Paginator
             :rows="10"
@@ -44,7 +46,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Paginator
             :rows="10"
diff --git a/doc/paginator/theming/TailwindDoc.vue b/doc/paginator/theming/TailwindDoc.vue
index 6d8e2adfe..f9b566716 100644
--- a/doc/paginator/theming/TailwindDoc.vue
+++ b/doc/paginator/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     paginator: {
         root: {
             class: [
@@ -198,7 +197,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
     </div>
diff --git a/doc/panel/BasicDoc.vue b/doc/panel/BasicDoc.vue
index bf6688e29..f10b8cdb4 100644
--- a/doc/panel/BasicDoc.vue
+++ b/doc/panel/BasicDoc.vue
@@ -18,13 +18,15 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Panel header="Header">
+                basic: `
+<Panel header="Header">
     <p class="m-0">
         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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Panel header="Header">
             <p class="m-0">
@@ -37,7 +39,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Panel header="Header">
             <p class="m-0">
diff --git a/doc/panel/ImportDoc.vue b/doc/panel/ImportDoc.vue
index 5fcd14f28..3000244fb 100644
--- a/doc/panel/ImportDoc.vue
+++ b/doc/panel/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Panel from 'primevue/panel';`
+                basic: `
+import Panel from 'primevue/panel';
+`
             }
         };
     }
diff --git a/doc/panel/TemplateDoc.vue b/doc/panel/TemplateDoc.vue
index d0a8fbef5..b5e50d7b5 100644
--- a/doc/panel/TemplateDoc.vue
+++ b/doc/panel/TemplateDoc.vue
@@ -60,7 +60,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Panel header="Header" toggleable>
+                basic: `
+<Panel header="Header" toggleable>
     <template #icons>
         <button class="p-panel-header-icon p-link mr-2" @click="toggle">
             <span class="pi pi-cog"></span>
@@ -72,7 +73,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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Toast />
         <Panel header="Header" toggleable>
@@ -142,7 +144,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Toast />
         <Panel header="Header" toggleable>
diff --git a/doc/panel/ToggleableDoc.vue b/doc/panel/ToggleableDoc.vue
index 45253e9c4..401689cb8 100644
--- a/doc/panel/ToggleableDoc.vue
+++ b/doc/panel/ToggleableDoc.vue
@@ -18,13 +18,15 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Panel header="Header" toggleable>
+                basic: `
+<Panel header="Header" toggleable>
     <p class="m-0">
         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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Panel header="Header" toggleable>
             <p class="m-0">
@@ -37,7 +39,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Panel header="Header" toggleable>
             <p class="m-0">
diff --git a/doc/panel/pt/PTDoc.vue b/doc/panel/pt/PTDoc.vue
index 936e34f21..979ddc432 100644
--- a/doc/panel/pt/PTDoc.vue
+++ b/doc/panel/pt/PTDoc.vue
@@ -16,7 +16,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Panel header="Header" toggleable
+                basic: `
+<Panel header="Header" toggleable
     :pt="{
         header: { class: 'bg-primary' },
         title: { class: 'text-white' },
@@ -27,7 +28,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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
@@ -45,7 +47,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
diff --git a/doc/panel/theming/TailwindDoc.vue b/doc/panel/theming/TailwindDoc.vue
index 0a70d337c..33f1f195f 100644
--- a/doc/panel/theming/TailwindDoc.vue
+++ b/doc/panel/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -59,7 +58,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Panel header="Header">
             <p class="m-0">
diff --git a/doc/panelmenu/BasicDoc.vue b/doc/panelmenu/BasicDoc.vue
index 353c02d01..52d09deab 100644
--- a/doc/panelmenu/BasicDoc.vue
+++ b/doc/panelmenu/BasicDoc.vue
@@ -129,8 +129,10 @@ export default {
                 }
             ],
             code: {
-                basic: `<PanelMenu :model="items" />`,
-                options: `<template>
+                basic: `
+<PanelMenu :model="items" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <PanelMenu :model="items" class="w-full md:w-25rem" />
     </div>
@@ -260,7 +262,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <PanelMenu :model="items" class="w-full md:w-25rem" />
     </div>
diff --git a/doc/panelmenu/ImportDoc.vue b/doc/panelmenu/ImportDoc.vue
index eb3bb5937..06491688c 100644
--- a/doc/panelmenu/ImportDoc.vue
+++ b/doc/panelmenu/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import PanelMenu from 'primevue/panelmenu';`
+                basic: `
+import PanelMenu from 'primevue/panelmenu';
+`
             }
         };
     }
diff --git a/doc/panelmenu/MultipleDoc.vue b/doc/panelmenu/MultipleDoc.vue
index c347be55d..4c6e27ecc 100644
--- a/doc/panelmenu/MultipleDoc.vue
+++ b/doc/panelmenu/MultipleDoc.vue
@@ -154,8 +154,10 @@ export default {
                 }
             ],
             code: {
-                basic: `<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />`,
-                options: `<template>
+                basic: `
+<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />`,
+                options: `
+<template>
     <div class="card flex flex-column align-items-center">
         <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-25rem" />
     </div>
@@ -310,7 +312,8 @@ export default {
   },
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center">
         <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-25rem"  />
     </div>
diff --git a/doc/panelmenu/ProgrammaticDoc.vue b/doc/panelmenu/ProgrammaticDoc.vue
index 0b87e00aa..b5f8737d2 100644
--- a/doc/panelmenu/ProgrammaticDoc.vue
+++ b/doc/panelmenu/ProgrammaticDoc.vue
@@ -161,8 +161,10 @@ export default {
                 }
             ],
             code: {
-                basic: `<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />`,
-                options: `<template>
+                basic: `
+<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />`,
+                options: `
+<template>
     <div class="card flex flex-column align-items-center">
         <div class="mb-3">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
@@ -344,7 +346,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center">
         <div class="mb-3">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
diff --git a/doc/panelmenu/pt/PTDoc.vue b/doc/panelmenu/pt/PTDoc.vue
index f15fd3ee2..b04582853 100644
--- a/doc/panelmenu/pt/PTDoc.vue
+++ b/doc/panelmenu/pt/PTDoc.vue
@@ -132,13 +132,15 @@ export default {
                 }
             ],
             code: {
-                basic: `<PanelMenu
+                basic: `
+<PanelMenu
     :model="items"
     :pt="{
         root: { class: 'w-full md:w-25rem' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <PanelMenu
             :model="items"
@@ -273,7 +275,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <PanelMenu
             :model="items"
diff --git a/doc/panelmenu/theming/TailwindDoc.vue b/doc/panelmenu/theming/TailwindDoc.vue
index c82cbcfad..e76053b60 100644
--- a/doc/panelmenu/theming/TailwindDoc.vue
+++ b/doc/panelmenu/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -72,7 +71,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <PanelMenu :model="items" class="w-full md:w-96" />
     </div>
diff --git a/doc/passthrough/BasicDoc.vue b/doc/passthrough/BasicDoc.vue
index 6aacf6e17..e2543637f 100644
--- a/doc/passthrough/BasicDoc.vue
+++ b/doc/passthrough/BasicDoc.vue
@@ -48,7 +48,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Panel header="Header" toggleable
+                basic: `
+<Panel header="Header" toggleable
     :pt="{
         header: (options) => ({
             id: 'myPanelHeader',
@@ -72,7 +73,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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
@@ -103,7 +105,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
diff --git a/doc/passthrough/CustomCSSDoc.vue b/doc/passthrough/CustomCSSDoc.vue
index 5fac9c473..d994dff02 100644
--- a/doc/passthrough/CustomCSSDoc.vue
+++ b/doc/passthrough/CustomCSSDoc.vue
@@ -14,7 +14,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import { createApp } from "vue";
+                basic: `
+import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
@@ -48,7 +49,8 @@ app.use(PrimeVue, {
             \`
         }
     } 
-});`
+});
+`
             }
         };
     }
diff --git a/doc/passthrough/GlobalDoc.vue b/doc/passthrough/GlobalDoc.vue
index e4e5779e9..5586a892b 100644
--- a/doc/passthrough/GlobalDoc.vue
+++ b/doc/passthrough/GlobalDoc.vue
@@ -14,7 +14,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import { createApp } from "vue";
+                basic: `
+import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
@@ -31,7 +32,8 @@ app.use(PrimeVue, {
             }
         }
     } 
-});`
+});
+`
             }
         };
     }
diff --git a/doc/passthrough/LifecycleDoc.vue b/doc/passthrough/LifecycleDoc.vue
index 723f517f5..58acd467f 100644
--- a/doc/passthrough/LifecycleDoc.vue
+++ b/doc/passthrough/LifecycleDoc.vue
@@ -14,10 +14,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Panel header="Header" :pt="panelPT">
+                basic: `
+<Panel header="Header" :pt="panelPT">
     Content
 </Panel>`,
-                options: `<template>
+                options: `
+<template>
     <Panel header="Header" :pt="panelPT">
         Content
     </Panel>
@@ -41,7 +43,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <Panel header="Header" :pt="panelPT">
         Content
     </Panel>
diff --git a/doc/passthrough/UsePassThroughDoc.vue b/doc/passthrough/UsePassThroughDoc.vue
index 9d6427803..0862b2637 100644
--- a/doc/passthrough/UsePassThroughDoc.vue
+++ b/doc/passthrough/UsePassThroughDoc.vue
@@ -21,7 +21,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `import {createApp} from "vue";
+                basic: `
+import {createApp} from "vue";
 import PrimeVue from "primevue/config";
 import { usePassThrough } from "primevue/passthrough";
 import Tailwind from "primevue/passthrough/tailwind";
@@ -43,10 +44,12 @@ const CustomTailwind = usePassThrough(
     }
 );
 
-app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });`
+app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });
+`
             },
             code2: {
-                basic: `const CustomTailwind = usePassThrough(
+                basic: `
+const CustomTailwind = usePassThrough(
     Tailwind,
     {
         panel: {
@@ -58,10 +61,12 @@ app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });`
 
 // Output: 
 // panel.header.class => 'my_panel_header'
-// panel.title.class => Tailwind.panel.title.class`
+// panel.title.class => Tailwind.panel.title.class
+`
             },
             code3: {
-                basic: `const CustomTailwind = usePassThrough(
+                basic: `
+const CustomTailwind = usePassThrough(
     Tailwind,
     {
         panel: {
@@ -73,10 +78,12 @@ app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });`
 
 // Output: 
 // panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
-// panel.title.class => Tailwind.panel.title.class`
+// panel.title.class => Tailwind.panel.title.class
+`
             },
             code4: {
-                basic: `const CustomTailwind = usePassThrough(
+                basic: `
+const CustomTailwind = usePassThrough(
     Tailwind,
     {
         panel: {
@@ -88,7 +95,8 @@ app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });`
 
 // Output: 
 // panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
-// panel.title.class => undefined`
+// panel.title.class => undefined
+`
             },
             code5: {
                 basic: `const CustomTailwind = usePassThrough(
@@ -103,7 +111,8 @@ app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });`
 
 // Output: 
 // panel.header.class => 'my_panel_header'
-// panel.title.class => undefined`
+// panel.title.class => undefined
+`
             }
         };
     }
diff --git a/doc/password/AccessibilityDoc.vue b/doc/password/AccessibilityDoc.vue
index df3155eb6..473beb1a4 100644
--- a/doc/password/AccessibilityDoc.vue
+++ b/doc/password/AccessibilityDoc.vue
@@ -36,7 +36,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<label for="pwd1">Password</label>
+                basic: `
+<label for="pwd1">Password</label>
 <Password inputId="pwd1" />
 
 <span id="pwd2">Password</span>
diff --git a/doc/password/DisabledDoc.vue b/doc/password/DisabledDoc.vue
index 223466d10..c45709d4e 100644
--- a/doc/password/DisabledDoc.vue
+++ b/doc/password/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Password disabled placeholder="Disabled" />`,
-                options: `<template>
+                basic: `
+<Password disabled placeholder="Disabled" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Password disabled placeholder="Disabled" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Password disabled placeholder="Disabled" />
     </div>
diff --git a/doc/password/FloatLabelDoc.vue b/doc/password/FloatLabelDoc.vue
index ae4798184..1da2da3cb 100644
--- a/doc/password/FloatLabelDoc.vue
+++ b/doc/password/FloatLabelDoc.vue
@@ -17,11 +17,13 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<span class="p-float-label">
+                basic: `
+<span class="p-float-label">
     <Password v-model="value" inputId="password" />
     <label for="password">Password</label>
 </span>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Password v-model="value" inputId="password" />
@@ -39,7 +41,8 @@ export default {
   }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Password v-model="value" inputId="password" />
diff --git a/doc/password/ImportDoc.vue b/doc/password/ImportDoc.vue
index 4973a1cd4..104120513 100644
--- a/doc/password/ImportDoc.vue
+++ b/doc/password/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Password from 'primevue/password';`
+                basic: `
+import Password from 'primevue/password';
+`
             }
         };
     }
diff --git a/doc/password/InvalidDoc.vue b/doc/password/InvalidDoc.vue
index c8de27307..aabf7a937 100644
--- a/doc/password/InvalidDoc.vue
+++ b/doc/password/InvalidDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Password class="p-invalid" />`,
-                options: `<template>
+                basic: `
+<Password class="p-invalid" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Password class="p-invalid" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Password class="p-invalid" />
     </div>
diff --git a/doc/password/LocaleDoc.vue b/doc/password/LocaleDoc.vue
index e49af8ec5..ab210f0a3 100644
--- a/doc/password/LocaleDoc.vue
+++ b/doc/password/LocaleDoc.vue
@@ -17,8 +17,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />`,
-                options: `<template>
+                basic: `
+<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">
       <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
   </div>
@@ -33,7 +35,8 @@ export default {
   }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
   <div class="card flex justify-content-center">
       <Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
   </div>
diff --git a/doc/password/MeterDoc.vue b/doc/password/MeterDoc.vue
index af1abd4b5..7e949be19 100644
--- a/doc/password/MeterDoc.vue
+++ b/doc/password/MeterDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Password v-model="value" />`,
-                options: `<template>
+                basic: `
+<Password v-model="value" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Password v-model="value" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Password v-model="value" />
     </div>
diff --git a/doc/password/TemplateDoc.vue b/doc/password/TemplateDoc.vue
index 8b7def0f4..f60293d68 100644
--- a/doc/password/TemplateDoc.vue
+++ b/doc/password/TemplateDoc.vue
@@ -28,7 +28,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Password v-model="value">
+                basic: `
+<Password v-model="value">
     <template #header>
         <h6>Pick a password</h6>
     </template>
@@ -43,7 +44,8 @@ export default {
         </ul>
     </template>
 </Password>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Password v-model="value">
             <template #header>
@@ -72,7 +74,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Password v-model="value">
             <template #header>
diff --git a/doc/password/ToggleMaskDoc.vue b/doc/password/ToggleMaskDoc.vue
index 1aea96587..aa20b4e16 100644
--- a/doc/password/ToggleMaskDoc.vue
+++ b/doc/password/ToggleMaskDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Password v-model="value" toggleMask />`,
-                options: `<template>
+                basic: `
+<Password v-model="value" toggleMask />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Password v-model="value" toggleMask />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Password v-model="value" toggleMask />
     </div>
diff --git a/doc/password/form/VeeValidateDoc.vue b/doc/password/form/VeeValidateDoc.vue
index 547bed75b..1997e4d40 100644
--- a/doc/password/form/VeeValidateDoc.vue
+++ b/doc/password/form/VeeValidateDoc.vue
@@ -43,7 +43,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<template>
+                basic: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="value">Password</label>
@@ -54,7 +55,8 @@ export default {
         <Toast />
     </div>
 </template>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="value">Password</label>
@@ -95,7 +97,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <label for="value">Password</label>
diff --git a/doc/password/pt/PTDoc.vue b/doc/password/pt/PTDoc.vue
index 6bf9ed9a3..4dd3f00db 100644
--- a/doc/password/pt/PTDoc.vue
+++ b/doc/password/pt/PTDoc.vue
@@ -17,13 +17,15 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Password
+                basic: `
+<Password
     v-model="value"
     :pt="{
         info: { class: 'font-bold' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Password
             v-model="value"
@@ -43,7 +45,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Password
             v-model="value"
diff --git a/doc/password/theming/TailwindDoc.vue b/doc/password/theming/TailwindDoc.vue
index 925aa4e8e..31c060362 100644
--- a/doc/password/theming/TailwindDoc.vue
+++ b/doc/password/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -60,7 +59,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Password v-model="value" />
     </div>
diff --git a/doc/picklist/AccessibilityDoc.vue b/doc/picklist/AccessibilityDoc.vue
index d5c2d6b84..59bc9d2d4 100644
--- a/doc/picklist/AccessibilityDoc.vue
+++ b/doc/picklist/AccessibilityDoc.vue
@@ -126,7 +126,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="lb">Options</span>
+                basic: `
+<span id="lb">Options</span>
 <PickList aria-labelledby="lb" />
 
 <PickList aria-label="City" />`
diff --git a/doc/picklist/BasicDoc.vue b/doc/picklist/BasicDoc.vue
index d21397af1..99ef84e6e 100644
--- a/doc/picklist/BasicDoc.vue
+++ b/doc/picklist/BasicDoc.vue
@@ -32,7 +32,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<PickList v-model="products" listStyle="height:342px" dataKey="id">
+                basic: `
+<PickList v-model="products" listStyle="height:342px" dataKey="id">
     <template #sourceheader> Available </template>
     <template #targetheader> Selected </template>
     <template #item="slotProps">
@@ -49,7 +50,8 @@ export default {
         </div>
     </template>
 </PickList>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <PickList v-model="products" listStyle="height:342px" dataKey="id">
             <template #sourceheader> Available </template>
@@ -84,7 +86,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <PickList v-model="products" listStyle="height:342px" dataKey="id">
             <template #sourceheader> Available </template>
diff --git a/doc/picklist/ImportDoc.vue b/doc/picklist/ImportDoc.vue
index 27fe83426..6dd73da57 100644
--- a/doc/picklist/ImportDoc.vue
+++ b/doc/picklist/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import PickList from 'primevue/picklist';`
+                basic: `
+import PickList from 'primevue/picklist';
+`
             }
         };
     }
diff --git a/doc/picklist/pt/PTDoc.vue b/doc/picklist/pt/PTDoc.vue
index 1ed986b6e..03c5d74be 100644
--- a/doc/picklist/pt/PTDoc.vue
+++ b/doc/picklist/pt/PTDoc.vue
@@ -43,7 +43,8 @@ export default {
         return {
             products: null,
             code: {
-                basic: `<PickList
+                basic: `
+<PickList
     v-model="products"
     dataKey="id"
     :pt="{
@@ -73,7 +74,8 @@ export default {
         </div>
     </template>
 </PickList>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <PickList
             v-model="products"
@@ -121,7 +123,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <PickList
             v-model="products"
diff --git a/doc/picklist/theming/TailwindDoc.vue b/doc/picklist/theming/TailwindDoc.vue
index ffe9fb420..374332692 100644
--- a/doc/picklist/theming/TailwindDoc.vue
+++ b/doc/picklist/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['ProductService']" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     picklist: {
         root: 'flex',
         sourcecontrols: 'flex flex-col justify-center p-5',
@@ -265,7 +264,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <PickList v-model="products" listStyle="height:342px" dataKey="id">
             <template #sourceheader> Available </template>
diff --git a/doc/progressbar/AccessibilityDoc.vue b/doc/progressbar/AccessibilityDoc.vue
index 75b96b40d..f6b0fd5b0 100644
--- a/doc/progressbar/AccessibilityDoc.vue
+++ b/doc/progressbar/AccessibilityDoc.vue
@@ -18,7 +18,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="label_status" />
+                basic: `
+<span id="label_status" />
 <ProgressBar aria-labelledby="label_status" />
 
 <ProgressBar aria-label="Status" />`
diff --git a/doc/progressbar/BasicDoc.vue b/doc/progressbar/BasicDoc.vue
index 2f2b15db6..0746096b2 100644
--- a/doc/progressbar/BasicDoc.vue
+++ b/doc/progressbar/BasicDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ProgressBar :value="50"></ProgressBar>`,
-                options: `<template>
+                basic: `
+<ProgressBar :value="50"></ProgressBar>`,
+                options: `
+<template>
     <div class="card">
         <ProgressBar :value="50"></ProgressBar>
     </div>
@@ -23,7 +25,8 @@ export default {
 <script >
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <ProgressBar :value="50"></ProgressBar>
     </div>
diff --git a/doc/progressbar/DynamicDoc.vue b/doc/progressbar/DynamicDoc.vue
index 36d69a64f..865d20557 100644
--- a/doc/progressbar/DynamicDoc.vue
+++ b/doc/progressbar/DynamicDoc.vue
@@ -15,8 +15,10 @@ export default {
             value: 0,
             interval: null,
             code: {
-                basic: `<ProgressBar :value="value"></ProgressBar>`,
-                options: `<template>
+                basic: `
+<ProgressBar :value="value"></ProgressBar>`,
+                options: `
+<template>
     <div class="card">
         <Toast></Toast>
         <ProgressBar :value="value1" />
@@ -57,7 +59,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Toast></Toast>
         <ProgressBar :value="value1" />
diff --git a/doc/progressbar/ImportDoc.vue b/doc/progressbar/ImportDoc.vue
index 0e50f3c08..2c89d48dd 100644
--- a/doc/progressbar/ImportDoc.vue
+++ b/doc/progressbar/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import ProgressBar from 'primevue/progressbar';`
+                basic: `
+import ProgressBar from 'primevue/progressbar';
+`
             }
         };
     }
diff --git a/doc/progressbar/IndeterminateDoc.vue b/doc/progressbar/IndeterminateDoc.vue
index 78ebe49a7..1147217b9 100644
--- a/doc/progressbar/IndeterminateDoc.vue
+++ b/doc/progressbar/IndeterminateDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>`,
-                options: `<template>
+                basic: `
+<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>`,
+                options: `
+<template>
     <div class="card">
         <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
     </div>
@@ -23,7 +25,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
     </div>
diff --git a/doc/progressbar/TemplateDoc.vue b/doc/progressbar/TemplateDoc.vue
index f63c8b6e7..da0d644b9 100644
--- a/doc/progressbar/TemplateDoc.vue
+++ b/doc/progressbar/TemplateDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 40,
             code: {
-                basic: `<ProgressBar :value="40"> {{ value }}/100 </ProgressBar>`,
-                options: `<template>
+                basic: `
+<ProgressBar :value="40"> {{ value }}/100 </ProgressBar>`,
+                options: `
+<template>
     <div class="card">
         <ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
     </div>
diff --git a/doc/progressbar/pt/PTDoc.vue b/doc/progressbar/pt/PTDoc.vue
index 9883bf7c3..b4d5e7b0d 100644
--- a/doc/progressbar/pt/PTDoc.vue
+++ b/doc/progressbar/pt/PTDoc.vue
@@ -16,11 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ProgressBar :value="50"
+                basic: `
+<ProgressBar :value="50"
     :pt="{
         value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
     }" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <ProgressBar :value="50"
             :pt="{
@@ -31,7 +33,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <ProgressBar :value="50"
             :pt="{
diff --git a/doc/progressbar/theming/TailwindDoc.vue b/doc/progressbar/theming/TailwindDoc.vue
index 94bfadb76..fb872a46e 100644
--- a/doc/progressbar/theming/TailwindDoc.vue
+++ b/doc/progressbar/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     global: {
         css: \`
         .progressbar-value-animate::after {
@@ -64,7 +63,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <ProgressBar :value="50"></ProgressBar>
     </div>
diff --git a/doc/progressspinner/AccessibilityDoc.vue b/doc/progressspinner/AccessibilityDoc.vue
index c84944233..927259d77 100644
--- a/doc/progressspinner/AccessibilityDoc.vue
+++ b/doc/progressspinner/AccessibilityDoc.vue
@@ -14,7 +14,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ProgressSpinner aria-label="Loading" />`
+                basic: `
+<ProgressSpinner aria-label="Loading" />`
             }
         };
     }
diff --git a/doc/progressspinner/BasicDoc.vue b/doc/progressspinner/BasicDoc.vue
index 7b9b3e16a..df3d91522 100644
--- a/doc/progressspinner/BasicDoc.vue
+++ b/doc/progressspinner/BasicDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ProgressSpinner />`,
-                options: `<template>
+                basic: `
+<ProgressSpinner />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner />
     </div>
@@ -22,7 +24,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner />
     </div>
diff --git a/doc/progressspinner/CustomDoc.vue b/doc/progressspinner/CustomDoc.vue
index e2d924b80..f85fb66eb 100644
--- a/doc/progressspinner/CustomDoc.vue
+++ b/doc/progressspinner/CustomDoc.vue
@@ -13,9 +13,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
+                basic: `
+<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
     animationDuration=".5s" aria-label="Custom ProgressSpinner" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
             animationDuration=".5s" aria-label="Custom ProgressSpinner" />
@@ -24,7 +26,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
             animationDuration=".5s" aria-label="Custom ProgressSpinner" />
diff --git a/doc/progressspinner/ImportDoc.vue b/doc/progressspinner/ImportDoc.vue
index ddcc0a5fb..50a0bdfc0 100644
--- a/doc/progressspinner/ImportDoc.vue
+++ b/doc/progressspinner/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import ProgressSpinner from 'primevue/progressspinner';`
+                basic: `
+import ProgressSpinner from 'primevue/progressspinner';
+`
             }
         };
     }
diff --git a/doc/progressspinner/pt/PTDoc.vue b/doc/progressspinner/pt/PTDoc.vue
index cddc49fd0..f054fd712 100644
--- a/doc/progressspinner/pt/PTDoc.vue
+++ b/doc/progressspinner/pt/PTDoc.vue
@@ -16,13 +16,15 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ProgressSpinner
+                basic: `
+<ProgressSpinner
     :pt="{
         spinner: { style: { animationDuration: '0s' } },
         circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner
             :pt="{
@@ -35,7 +37,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner
             :pt="{
diff --git a/doc/progressspinner/theming/TailwindDoc.vue b/doc/progressspinner/theming/TailwindDoc.vue
index 492072b22..5b3cec890 100644
--- a/doc/progressspinner/theming/TailwindDoc.vue
+++ b/doc/progressspinner/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     global: {
         css: \`
         .progress-spinner-circle {
@@ -68,7 +67,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ProgressSpinner />
     </div>
diff --git a/doc/radiobutton/AccessibilityDoc.vue b/doc/radiobutton/AccessibilityDoc.vue
index 377d8d736..75fd377e6 100644
--- a/doc/radiobutton/AccessibilityDoc.vue
+++ b/doc/radiobutton/AccessibilityDoc.vue
@@ -54,7 +54,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<label for="rb1">One</label>
+                basic: `
+<label for="rb1">One</label>
 <RadioButton inputId="rb1" />
 
 <span id="rb2">Two</span>
diff --git a/doc/radiobutton/DisabledDoc.vue b/doc/radiobutton/DisabledDoc.vue
index ab2a59c92..5f94cc6c3 100644
--- a/doc/radiobutton/DisabledDoc.vue
+++ b/doc/radiobutton/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             checked: true,
             code: {
-                basic: `<RadioButton v-model="checked" disabled :value="checked" />`,
-                options: `<template>
+                basic: `
+<RadioButton v-model="checked" disabled :value="checked" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <RadioButton v-model="checked" disabled :value="checked" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <RadioButton v-model="checked" disabled :value="checked" />
     </div>
diff --git a/doc/radiobutton/DynamicDoc.vue b/doc/radiobutton/DynamicDoc.vue
index 2abdb12f7..c90482e61 100644
--- a/doc/radiobutton/DynamicDoc.vue
+++ b/doc/radiobutton/DynamicDoc.vue
@@ -25,12 +25,14 @@ export default {
             ],
             selectedCategory: 'Production',
             code: {
-                basic: `<div v-for="category in categories" :key="category.key" class="flex align-items-center">
+                basic: `
+<div v-for="category in categories" :key="category.key" class="flex align-items-center">
     <RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
     <label :for="category.key" class="ml-2">{{ category.name }}</label>
 </div>
 `,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="category in categories" :key="category.key" class="flex align-items-center">
@@ -56,7 +58,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="category in categories" :key="category.key" class="flex align-items-center">
diff --git a/doc/radiobutton/GroupDoc.vue b/doc/radiobutton/GroupDoc.vue
index 3c817c961..2b564755b 100644
--- a/doc/radiobutton/GroupDoc.vue
+++ b/doc/radiobutton/GroupDoc.vue
@@ -31,7 +31,8 @@ export default {
         return {
             ingredient: '',
             code: {
-                basic: `<div class="flex flex-wrap gap-3">
+                basic: `
+<div class="flex flex-wrap gap-3">
     <div class="flex align-items-center">
         <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
         <label for="ingredient1" class="ml-2">Cheese</label>
@@ -49,7 +50,8 @@ export default {
         <label for="ingredient4" class="ml-2">Onion</label>
     </div>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-3">
             <div class="flex align-items-center">
@@ -81,7 +83,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-3">
             <div class="flex align-items-center">
diff --git a/doc/radiobutton/ImportDoc.vue b/doc/radiobutton/ImportDoc.vue
index 02170d754..8fad70341 100644
--- a/doc/radiobutton/ImportDoc.vue
+++ b/doc/radiobutton/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import RadioButton from 'primevue/radiobutton';`
+                basic: `
+import RadioButton from 'primevue/radiobutton';
+`
             }
         };
     }
diff --git a/doc/radiobutton/InvalidDoc.vue b/doc/radiobutton/InvalidDoc.vue
index a5ef61f6a..b17a2194f 100644
--- a/doc/radiobutton/InvalidDoc.vue
+++ b/doc/radiobutton/InvalidDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<RadioButton class="p-invalid" />`,
-                options: `<template>
+                basic: `
+<RadioButton class="p-invalid" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <RadioButton class="p-invalid" />
     </div>
@@ -23,7 +25,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <RadioButton class="p-invalid" />
     </div>
diff --git a/doc/radiobutton/form/VeeValidateDoc.vue b/doc/radiobutton/form/VeeValidateDoc.vue
index d47069ed6..51ac5d7f4 100644
--- a/doc/radiobutton/form/VeeValidateDoc.vue
+++ b/doc/radiobutton/form/VeeValidateDoc.vue
@@ -60,7 +60,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div class="card flex justify-content-center">
+                basic: `
+<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column gap-2">
         <div>Please choose your ingredient.</div>
         <div class="flex flex-wrap gap-3">
@@ -86,7 +87,8 @@ export default {
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>Please choose your ingredient.</div>
@@ -144,7 +146,8 @@ export default {
     },
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <div>Please choose your ingredient.</div>
diff --git a/doc/radiobutton/pt/PTDoc.vue b/doc/radiobutton/pt/PTDoc.vue
index 3b3581348..5be582f90 100644
--- a/doc/radiobutton/pt/PTDoc.vue
+++ b/doc/radiobutton/pt/PTDoc.vue
@@ -33,7 +33,8 @@ export default {
             ],
             selectedCategory: 'Production',
             code: {
-                basic: `<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
+                basic: `
+<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
     <RadioButton
         v-model="selectedCategory"
         :inputId="category.key"
@@ -48,7 +49,8 @@ export default {
     <label :for="category.key" class="ml-2">{{ category.name }}</label>
 </div>
 `,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
@@ -84,7 +86,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
             <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
diff --git a/doc/radiobutton/theming/TailwindDoc.vue b/doc/radiobutton/theming/TailwindDoc.vue
index 7027a3709..a75648adf 100644
--- a/doc/radiobutton/theming/TailwindDoc.vue
+++ b/doc/radiobutton/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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']
@@ -50,7 +49,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <div class="flex flex-wrap gap-3">
             <div class="flex align-items-center">
diff --git a/doc/rating/BasicDoc.vue b/doc/rating/BasicDoc.vue
index d6c8f34ff..e867463bd 100644
--- a/doc/rating/BasicDoc.vue
+++ b/doc/rating/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Rating v-model="value" />`,
-                options: `<template>
+                basic: `
+<Rating v-model="value" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" />
     </div>
diff --git a/doc/rating/DisabledDoc.vue b/doc/rating/DisabledDoc.vue
index 3ff267a4e..36aa18899 100644
--- a/doc/rating/DisabledDoc.vue
+++ b/doc/rating/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 5,
             code: {
-                basic: `<Rating v-model="value" disabled />`,
-                options: `<template>
+                basic: `
+<Rating v-model="value" disabled />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" disabled />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" disabled />
     </div>
diff --git a/doc/rating/ImportDoc.vue b/doc/rating/ImportDoc.vue
index 7cf90416f..e9d7e6efe 100644
--- a/doc/rating/ImportDoc.vue
+++ b/doc/rating/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Rating from 'primevue/rating';`
+                basic: `
+import Rating from 'primevue/rating';
+`
             }
         };
     }
diff --git a/doc/rating/NumberOfStarsDoc.vue b/doc/rating/NumberOfStarsDoc.vue
index ae465e08e..11987f358 100644
--- a/doc/rating/NumberOfStarsDoc.vue
+++ b/doc/rating/NumberOfStarsDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Rating v-model="value" :stars="10" />`,
-                options: `<template>
+                basic: `
+<Rating v-model="value" :stars="10" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" :stars="10" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" :stars="10" />
     </div>
diff --git a/doc/rating/ReadOnlyDoc.vue b/doc/rating/ReadOnlyDoc.vue
index fa3446fe5..1a441bb7f 100644
--- a/doc/rating/ReadOnlyDoc.vue
+++ b/doc/rating/ReadOnlyDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 5,
             code: {
-                basic: `<Rating v-model="value" readonly />`,
-                options: `<template>
+                basic: `
+<Rating v-model="value" readonly />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" readonly />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" readonly />
     </div>
diff --git a/doc/rating/TemplateDoc.vue b/doc/rating/TemplateDoc.vue
index 39c896b75..a58f65112 100644
--- a/doc/rating/TemplateDoc.vue
+++ b/doc/rating/TemplateDoc.vue
@@ -24,7 +24,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Rating v-model="value">
+                basic: `
+<Rating v-model="value">
     <template #cancelicon>
         <img src="/images/rating/cancel.png" height="24" width="24" />
     </template>
@@ -35,7 +36,8 @@ export default {
         <img src="/images/rating/custom-officon.png" height="24" width="24" />
     </template>
 </Rating>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value">
             <template #cancelicon>
@@ -60,7 +62,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value">
             <template #cancelicon>
diff --git a/doc/rating/WithoutCancelDoc.vue b/doc/rating/WithoutCancelDoc.vue
index 08a3124c7..4f43cb18c 100644
--- a/doc/rating/WithoutCancelDoc.vue
+++ b/doc/rating/WithoutCancelDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Rating v-model="value" :cancel="false" />`,
-                options: `<template>
+                basic: `
+<Rating v-model="value" :cancel="false" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" :cancel="false"  />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Rating v-model="value" :cancel="false"  />
     </div>
diff --git a/doc/rating/pt/PTDoc.vue b/doc/rating/pt/PTDoc.vue
index c13d2769d..acdbe9ed7 100644
--- a/doc/rating/pt/PTDoc.vue
+++ b/doc/rating/pt/PTDoc.vue
@@ -17,13 +17,15 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Rating
+                basic: `
+<Rating
     v-model="value"
     :pt="{
         onIcon: { class: 'text-orange-400' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Rating
             v-model="value"
@@ -43,7 +45,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Rating
             v-model="value"
diff --git a/doc/rating/theming/TailwindDoc.vue b/doc/rating/theming/TailwindDoc.vue
index bb86ecdc7..ac980f6d3 100644
--- a/doc/rating/theming/TailwindDoc.vue
+++ b/doc/rating/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     rating: {
         root: ({ props }) => ({
             class: [
@@ -61,7 +60,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Rating v-model="value" />
     </div>
diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue
index 7558e2ac9..f24058d9d 100644
--- a/doc/ripple/CustomDoc.vue
+++ b/doc/ripple/CustomDoc.vue
@@ -15,10 +15,12 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
+                basic: `
+<div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
 <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
 <div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="flex justify-content-center align-items-center">
         <div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
         <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
@@ -41,7 +43,8 @@ export default {
     background: rgba(156, 39, 176, 0.3);
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="flex justify-content-center align-items-center">
         <div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
         <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
diff --git a/doc/ripple/DefaultDoc.vue b/doc/ripple/DefaultDoc.vue
index 17a7a9a70..bf39c697a 100644
--- a/doc/ripple/DefaultDoc.vue
+++ b/doc/ripple/DefaultDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         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>`,
-                options: `<template>
+                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>`,
+                options: `
+<template>
     <div class="card card-container flex justify-content-center align-items-center">
         <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>
@@ -22,7 +24,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card card-container flex justify-content-center align-items-center">
         <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>
diff --git a/doc/ripple/ImportDoc.vue b/doc/ripple/ImportDoc.vue
index e0d223e24..9037e59a0 100644
--- a/doc/ripple/ImportDoc.vue
+++ b/doc/ripple/ImportDoc.vue
@@ -15,14 +15,16 @@ export default {
     data() {
         return {
             code1: {
-                basic: `import { createApp } from 'vue';
+                basic: `
+import { createApp } from 'vue';
 import PrimeVue from 'primevue/config';
 const app = createApp(App);
 
 app.use(PrimeVue, { ripple: true });`
             },
             code2: {
-                basic: `import Ripple from 'primevue/ripple';
+                basic: `
+import Ripple from 'primevue/ripple';
 
 app.directive('ripple', Ripple);`
             }
diff --git a/doc/ripple/pt/PTDoc.vue b/doc/ripple/pt/PTDoc.vue
index 87fb7e458..c03c32f04 100644
--- a/doc/ripple/pt/PTDoc.vue
+++ b/doc/ripple/pt/PTDoc.vue
@@ -20,7 +20,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div
+                basic: `
+<div
     v-ripple="{
         pt: {
             root: 'bg-yellow-400'
@@ -30,7 +31,8 @@ export default {
 >
     Default
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card card-container flex justify-content-center align-items-center">
         <div
             v-ripple="{
@@ -47,7 +49,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card card-container flex justify-content-center align-items-center">
         <div
             v-ripple="{
diff --git a/doc/ripple/theming/TailwindDoc.vue b/doc/ripple/theming/TailwindDoc.vue
index 34cb921e7..8ed86b39a 100644
--- a/doc/ripple/theming/TailwindDoc.vue
+++ b/doc/ripple/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     global: {
         css: \`
         *[data-pd-ripple="true"]{
@@ -46,7 +45,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Button label="Submit" />
     </div>
diff --git a/doc/scrollpanel/BasicDoc.vue b/doc/scrollpanel/BasicDoc.vue
index a70b75752..8cb9425fc 100644
--- a/doc/scrollpanel/BasicDoc.vue
+++ b/doc/scrollpanel/BasicDoc.vue
@@ -26,13 +26,15 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ScrollPanel style="width: 100%; height: 200px">
+                basic: `
+<ScrollPanel style="width: 100%; height: 200px">
     <p>
         Lorem ipsum dolor ...
     </p>
 </ScrollPanel>
                 `,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <ScrollPanel style="width: 100%; height: 200px">
             <p>
@@ -53,7 +55,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <ScrollPanel style="width: 100%; height: 200px">
             <p>
diff --git a/doc/scrollpanel/CustomDoc.vue b/doc/scrollpanel/CustomDoc.vue
index c57db7a3d..5dc52cdc8 100644
--- a/doc/scrollpanel/CustomDoc.vue
+++ b/doc/scrollpanel/CustomDoc.vue
@@ -46,7 +46,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ScrollPanel style="width: 100%; height: 200px" class="custombar1">
+                basic: `
+<ScrollPanel style="width: 100%; height: 200px" class="custombar1">
     <p>
         Lorem ipsum dolor ..
     </p>
@@ -57,7 +58,8 @@ export default {
         Lorem ipsum dolor ..
     </p>
 </ScrollPanel>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex flex-column md:flex-row gap-5">
             <div class="flex-auto">
@@ -126,7 +128,8 @@ export default {
     transition: background-color 0.3s;
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex flex-column md:flex-row gap-5">
             <div class="flex-auto">
diff --git a/doc/scrollpanel/ImportDoc.vue b/doc/scrollpanel/ImportDoc.vue
index bfdd70b54..9d3e2580b 100644
--- a/doc/scrollpanel/ImportDoc.vue
+++ b/doc/scrollpanel/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import ScrollPanel from 'primevue/scrollpanel';`
+                basic: `
+import ScrollPanel from 'primevue/scrollpanel';
+`
             }
         };
     }
diff --git a/doc/scrollpanel/pt/PTDoc.vue b/doc/scrollpanel/pt/PTDoc.vue
index dda33082d..7b1a55081 100644
--- a/doc/scrollpanel/pt/PTDoc.vue
+++ b/doc/scrollpanel/pt/PTDoc.vue
@@ -24,7 +24,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ScrollPanel
+                basic: `
+<ScrollPanel
     :pt="{
         root: { 
             style: { width: '100%', height: '200px' }
@@ -44,7 +45,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>
 </ScrollPanel>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <ScrollPanel
             :pt="{
@@ -68,7 +70,8 @@ export default {
         </ScrollPanel>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <ScrollPanel
             :pt="{
diff --git a/doc/scrollpanel/theming/TailwindDoc.vue b/doc/scrollpanel/theming/TailwindDoc.vue
index 788f91064..cfb3e495f 100644
--- a/doc/scrollpanel/theming/TailwindDoc.vue
+++ b/doc/scrollpanel/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -31,7 +30,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <ScrollPanel style="width: 100%; height: 200px">
             <p class="text-gray-700 dark:text-white/80">
diff --git a/doc/scrolltop/BasicDoc.vue b/doc/scrolltop/BasicDoc.vue
index 6de822c06..fe8fbf48f 100644
--- a/doc/scrolltop/BasicDoc.vue
+++ b/doc/scrolltop/BasicDoc.vue
@@ -15,8 +15,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ScrollTop />`,
-                options: `<template>
+                basic: `
+<ScrollTop />`,
+                options: `
+<template>
     <div class="card flex flex-column align-items-center" style="height: 2000px">
         <p>Scroll down the page to display the ScrollTop component.</p>
         <i class="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite" style="fontsize: 2rem"></i>
@@ -26,7 +28,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center" style="height: 2000px">
         <p>Scroll down the page to display the ScrollTop component.</p>
         <i class="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite" style="fontsize: 2rem"></i>
diff --git a/doc/scrolltop/ElementDoc.vue b/doc/scrolltop/ElementDoc.vue
index efc48f86d..b2019250a 100644
--- a/doc/scrolltop/ElementDoc.vue
+++ b/doc/scrolltop/ElementDoc.vue
@@ -22,8 +22,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />`,
-                options: `<template>
+                basic: `
+<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />`,
+                options: `
+<template>
     <div class="card">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
@@ -58,7 +60,8 @@ export default {
     color: var(--primary-color-text);
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
diff --git a/doc/scrolltop/ImportDoc.vue b/doc/scrolltop/ImportDoc.vue
index 74fad89b5..7e0adf387 100644
--- a/doc/scrolltop/ImportDoc.vue
+++ b/doc/scrolltop/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import ScrollTop from 'primevue/scrolltop';`
+                basic: `
+import ScrollTop from 'primevue/scrolltop';
+`
             }
         };
     }
diff --git a/doc/scrolltop/pt/PTDoc.vue b/doc/scrolltop/pt/PTDoc.vue
index e73e0c1b6..cad334197 100644
--- a/doc/scrolltop/pt/PTDoc.vue
+++ b/doc/scrolltop/pt/PTDoc.vue
@@ -20,13 +20,15 @@ export default {
     data() {
         return {
             code: {
-                basic: `<ScrollTop target="parent"
+                basic: `
+<ScrollTop target="parent"
     :pt="{ 
         root: { class: 'w-2rem h-2rem bg-primary' },
         icon: { class: 'w-1rem h-1rem' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
@@ -45,7 +47,8 @@ export default {
         </ScrollPanel>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
diff --git a/doc/scrolltop/theming/TailwindDoc.vue b/doc/scrolltop/theming/TailwindDoc.vue
index ce43295d1..dc2679f15 100644
--- a/doc/scrolltop/theming/TailwindDoc.vue
+++ b/doc/scrolltop/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     scrolltop: {
         root: ({ props }) => ({
             class: [
@@ -39,7 +38,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
diff --git a/doc/selectbutton/AccessibilityDoc.vue b/doc/selectbutton/AccessibilityDoc.vue
index a0e09b38b..56135f793 100644
--- a/doc/selectbutton/AccessibilityDoc.vue
+++ b/doc/selectbutton/AccessibilityDoc.vue
@@ -54,7 +54,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="label_number">Number</span>
+                basic: `
+<span id="label_number">Number</span>
 <Slider aria-labelledby="label_number" />
 
 <Slider aria-label="Number" />`
diff --git a/doc/selectbutton/BasicDoc.vue b/doc/selectbutton/BasicDoc.vue
index bb12bdda8..71b6d1994 100644
--- a/doc/selectbutton/BasicDoc.vue
+++ b/doc/selectbutton/BasicDoc.vue
@@ -18,8 +18,10 @@ export default {
             value: 'Off',
             options: ['Off', 'On'],
             code: {
-                basic: `<SelectButton v-model="value" :options="options" aria-labelledby="basic" />`,
-                options: `<template>
+                basic: `
+<SelectButton v-model="value" :options="options" aria-labelledby="basic" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
     </div>
@@ -35,7 +37,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
     </div>
diff --git a/doc/selectbutton/DisabledDoc.vue b/doc/selectbutton/DisabledDoc.vue
index 8d4ec351d..77d4e8bc9 100644
--- a/doc/selectbutton/DisabledDoc.vue
+++ b/doc/selectbutton/DisabledDoc.vue
@@ -21,9 +21,11 @@ export default {
                 { name: 'Option 2', value: 2, constant: true }
             ],
             code: {
-                basic: `<SelectButton v-model="value" :options="options" disabled />
+                basic: `
+<SelectButton v-model="value" :options="options" disabled />
 <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center flex-wrap gap-3">
         <SelectButton v-model="value" :options="options" disabled />
         <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
@@ -45,7 +47,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center flex-wrap gap-3">
         <SelectButton v-model="value" :options="options" disabled />
         <SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />
diff --git a/doc/selectbutton/ImportDoc.vue b/doc/selectbutton/ImportDoc.vue
index c5137c847..58c1f7400 100644
--- a/doc/selectbutton/ImportDoc.vue
+++ b/doc/selectbutton/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import SelectButton from 'primevue/selectbutton';`
+                basic: `
+import SelectButton from 'primevue/selectbutton';
+`
             }
         };
     }
diff --git a/doc/selectbutton/InvalidDoc.vue b/doc/selectbutton/InvalidDoc.vue
index fb639aa97..d1b0603ee 100644
--- a/doc/selectbutton/InvalidDoc.vue
+++ b/doc/selectbutton/InvalidDoc.vue
@@ -15,8 +15,10 @@ export default {
             value: 'Off',
             options: ['Off', 'On'],
             code: {
-                basic: `<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />`,
-                options: `<template>
+                basic: `
+<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
     </div>
@@ -32,7 +34,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
     </div>
diff --git a/doc/selectbutton/MultipleDoc.vue b/doc/selectbutton/MultipleDoc.vue
index a042b972d..aa8c521e7 100644
--- a/doc/selectbutton/MultipleDoc.vue
+++ b/doc/selectbutton/MultipleDoc.vue
@@ -19,8 +19,10 @@ export default {
                 { name: 'Option 3', value: 3 }
             ],
             code: {
-                basic: `<SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />`,
-                options: `<template>
+                basic: `
+<SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
     </div>
@@ -40,7 +42,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />
     </div>
diff --git a/doc/selectbutton/TemplateDoc.vue b/doc/selectbutton/TemplateDoc.vue
index 2b3ba38e7..88263ddde 100644
--- a/doc/selectbutton/TemplateDoc.vue
+++ b/doc/selectbutton/TemplateDoc.vue
@@ -24,12 +24,14 @@ export default {
                 { icon: 'pi pi-align-justify', value: 'Justify' }
             ],
             code: {
-                basic: `<SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
+                basic: `
+<SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
     <template #option="slotProps">
         <i :class="slotProps.option.icon"></i>
     </template>
 </SelectButton>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
             <template #option="slotProps">
@@ -54,7 +56,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
             <template #option="slotProps">
diff --git a/doc/selectbutton/form/VeeValidateDoc.vue b/doc/selectbutton/form/VeeValidateDoc.vue
index cf61313a4..54a3e80d4 100644
--- a/doc/selectbutton/form/VeeValidateDoc.vue
+++ b/doc/selectbutton/form/VeeValidateDoc.vue
@@ -43,7 +43,8 @@ export default {
         return {
             options: ['Off', 'On'],
             code: {
-                basic: `<div class="card flex justify-content-center">
+                basic: `
+<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
         <label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
         <SelectButton id="item" v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" :options="options" />
@@ -52,7 +53,8 @@ export default {
     </form>
     <Toast />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
@@ -97,7 +99,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <label for="item" :class="['flex justify-content-center', { 'p-error': errorMessage }]"> Engine State </label>
diff --git a/doc/selectbutton/pt/PTDoc.vue b/doc/selectbutton/pt/PTDoc.vue
index 242118329..9f40b32bd 100644
--- a/doc/selectbutton/pt/PTDoc.vue
+++ b/doc/selectbutton/pt/PTDoc.vue
@@ -22,7 +22,8 @@ export default {
             value: 'Off',
             options: ['Off', 'On'],
             code: {
-                basic: `<SelectButton
+                basic: `
+<SelectButton
     v-model="value"
     :options="options"
     aria-labelledby="basic"
@@ -32,7 +33,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <SelectButton
             v-model="value"
@@ -57,7 +59,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <SelectButton
             v-model="value"
diff --git a/doc/selectbutton/theming/TailwindDoc.vue b/doc/selectbutton/theming/TailwindDoc.vue
index 811481c4b..6c65ed48c 100644
--- a/doc/selectbutton/theming/TailwindDoc.vue
+++ b/doc/selectbutton/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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 }]
@@ -41,7 +40,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
     </div>
diff --git a/doc/sidebar/AccessibilityDoc.vue b/doc/sidebar/AccessibilityDoc.vue
index 79bb2fbfa..84a8d7a2a 100644
--- a/doc/sidebar/AccessibilityDoc.vue
+++ b/doc/sidebar/AccessibilityDoc.vue
@@ -73,7 +73,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/>
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/>
 
 <Sidebar id="sbar" v-model:visible="visible" role="region" >
     <p>Content</p>
diff --git a/doc/sidebar/BasicDoc.vue b/doc/sidebar/BasicDoc.vue
index 21edea17f..f38f62538 100644
--- a/doc/sidebar/BasicDoc.vue
+++ b/doc/sidebar/BasicDoc.vue
@@ -18,14 +18,16 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<div class="card flex justify-content-center">
+                basic: `
+<div class="card flex justify-content-center">
     <Sidebar v-model:visible="visible">
         <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" />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible">
             <h2>Sidebar</h2>
@@ -44,7 +46,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible">
             <h2>Sidebar</h2>
diff --git a/doc/sidebar/FullScreenDoc.vue b/doc/sidebar/FullScreenDoc.vue
index 964829310..737cf3964 100644
--- a/doc/sidebar/FullScreenDoc.vue
+++ b/doc/sidebar/FullScreenDoc.vue
@@ -18,14 +18,16 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<div class="card flex justify-content-center">
+                basic: `
+<div class="card flex justify-content-center">
     <Sidebar v-model:visible="visible" position="full">
         <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" />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible" position="full">
             <h2>Sidebar</h2>
@@ -44,7 +46,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible" position="full">
             <h2>Sidebar</h2>
diff --git a/doc/sidebar/ImportDoc.vue b/doc/sidebar/ImportDoc.vue
index a61a59a27..f2f11f2f3 100644
--- a/doc/sidebar/ImportDoc.vue
+++ b/doc/sidebar/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Sidebar from 'primevue/sidebar';`
+                basic: `
+import Sidebar from 'primevue/sidebar';
+`
             }
         };
     }
diff --git a/doc/sidebar/PositionDoc.vue b/doc/sidebar/PositionDoc.vue
index 9833f19a0..d0f626b3a 100644
--- a/doc/sidebar/PositionDoc.vue
+++ b/doc/sidebar/PositionDoc.vue
@@ -42,7 +42,8 @@ export default {
             visibleTop: false,
             visibleBottom: false,
             code: {
-                basic: `<div class="flex gap-2 justify-content-center">
+                basic: `
+<div class="flex gap-2 justify-content-center">
     <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
     <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
     <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
@@ -68,7 +69,8 @@ export default {
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex gap-2 justify-content-center">
             <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
@@ -111,7 +113,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex gap-2 justify-content-center">
             <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
diff --git a/doc/sidebar/SizeDoc.vue b/doc/sidebar/SizeDoc.vue
index 82d940db7..0d4574dca 100644
--- a/doc/sidebar/SizeDoc.vue
+++ b/doc/sidebar/SizeDoc.vue
@@ -18,14 +18,16 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<div class="card flex justify-content-center">
+                basic: `
+<div class="card flex justify-content-center">
     <Sidebar v-model:visible="visible" class="w-full md:w-20rem lg:w-30rem">
         <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" />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible" class="w-full md:w-20rem lg:w-30rem">
             <h2>Sidebar</h2>
@@ -44,7 +46,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible" class="w-full md:w-20rem lg:w-30rem">
             <h2>Sidebar</h2>
diff --git a/doc/sidebar/TemplateDoc.vue b/doc/sidebar/TemplateDoc.vue
index 67128204c..1c142347e 100644
--- a/doc/sidebar/TemplateDoc.vue
+++ b/doc/sidebar/TemplateDoc.vue
@@ -28,7 +28,8 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<div class="card flex justify-content-center">
+                basic: `
+<div class="card flex justify-content-center">
     <Sidebar v-model:visible="visible">
         <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>
@@ -45,7 +46,8 @@ export default {
     </Sidebar>
     <Button icon="pi pi-plus" @click="visible = true" />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible">
             <h2>Sidebar</h2>
@@ -74,7 +76,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible">
             <h2>Sidebar</h2>
diff --git a/doc/sidebar/pt/PTDoc.vue b/doc/sidebar/pt/PTDoc.vue
index 3af595918..1f583fe13 100644
--- a/doc/sidebar/pt/PTDoc.vue
+++ b/doc/sidebar/pt/PTDoc.vue
@@ -16,7 +16,8 @@ export default {
         return {
             visible: false,
             code: {
-                basic: `<Sidebar v-model:visible="visible"
+                basic: `
+<Sidebar v-model:visible="visible"
     :pt="{
         root: { class: 'w-25rem' }
     }"
@@ -25,7 +26,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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible"
             :pt="{
@@ -48,7 +50,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible"
             :pt="{
diff --git a/doc/sidebar/theming/TailwindDoc.vue b/doc/sidebar/theming/TailwindDoc.vue
index 305a0b2c3..d35dd915c 100644
--- a/doc/sidebar/theming/TailwindDoc.vue
+++ b/doc/sidebar/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     sidebar: {
         root: ({ props }) => ({
             class: [
@@ -82,7 +81,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex gap-2 justify-center">
             <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
diff --git a/doc/skeleton/CardDoc.vue b/doc/skeleton/CardDoc.vue
index b69d69a36..919c655ef 100644
--- a/doc/skeleton/CardDoc.vue
+++ b/doc/skeleton/CardDoc.vue
@@ -27,7 +27,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div class="border-round border-1 surface-border p-4 surface-card">
+                basic: `
+<div class="border-round border-1 surface-border p-4 surface-card">
     <div class="flex mb-3">
         <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
         <div>
@@ -42,7 +43,8 @@ export default {
         <Skeleton width="4rem" height="2rem"></Skeleton>
     </div>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="border-round border-1 surface-border p-4 surface-card">
             <div class="flex mb-3">
@@ -64,7 +66,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="border-round border-1 surface-border p-4 surface-card">
             <div class="flex mb-3">
diff --git a/doc/skeleton/DataTableDoc.vue b/doc/skeleton/DataTableDoc.vue
index ff786ec16..17cf2d3d9 100644
--- a/doc/skeleton/DataTableDoc.vue
+++ b/doc/skeleton/DataTableDoc.vue
@@ -34,7 +34,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<DataTable :value="products">
+                basic: `
+<DataTable :value="products">
     <Column field="code" header="Code">
         <template #body>
             <Skeleton></Skeleton>
@@ -56,7 +57,8 @@ export default {
         </template>
     </Column>
 </DataTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <DataTable :value="products">
             <Column field="code" header="Code">
@@ -92,7 +94,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <DataTable :value="products">
             <Column field="code" header="Code">
diff --git a/doc/skeleton/ImportDoc.vue b/doc/skeleton/ImportDoc.vue
index 2d320d675..2abc2e092 100644
--- a/doc/skeleton/ImportDoc.vue
+++ b/doc/skeleton/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Skeleton from 'primevue/skeleton';`
+                basic: `
+import Skeleton from 'primevue/skeleton';
+`
             }
         };
     }
diff --git a/doc/skeleton/ListDoc.vue b/doc/skeleton/ListDoc.vue
index 1151f7366..4bda762f2 100644
--- a/doc/skeleton/ListDoc.vue
+++ b/doc/skeleton/ListDoc.vue
@@ -52,7 +52,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div class="border-round border-1 surface-border p-4 surface-card">
+                basic: `
+<div class="border-round border-1 surface-border p-4 surface-card">
     <ul class="m-0 p-0 list-none">
         <li class="mb-3">
             <div class="flex">
@@ -92,7 +93,8 @@ export default {
         </li>
     </ul>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="border-round border-1 surface-border p-4 surface-card">
         <ul class="m-0 p-0 list-none">
             <li class="mb-3">
@@ -137,7 +139,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="border-round border-1 surface-border p-4 surface-card">
         <ul class="m-0 p-0 list-none">
             <li class="mb-3">
diff --git a/doc/skeleton/ShapesDoc.vue b/doc/skeleton/ShapesDoc.vue
index 287990c17..ed1f2c396 100644
--- a/doc/skeleton/ShapesDoc.vue
+++ b/doc/skeleton/ShapesDoc.vue
@@ -48,7 +48,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<h5>Rectangle</h5>
+                basic: `
+<h5>Rectangle</h5>
 <Skeleton class="mb-2"></Skeleton>
 <Skeleton width="10rem" class="mb-2"></Skeleton>
 <Skeleton width="5rem" class="mb-2"></Skeleton>
@@ -73,7 +74,8 @@ export default {
 <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
 <Skeleton shape="circle" size="5rem"></Skeleton>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex flex-wrap">
             <div class="w-full md:w-6 p-3">
@@ -116,7 +118,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex flex-wrap">
             <div class="w-full md:w-6 p-3">
diff --git a/doc/skeleton/pt/PTDoc.vue b/doc/skeleton/pt/PTDoc.vue
index f9b3a16ed..41fdaa146 100644
--- a/doc/skeleton/pt/PTDoc.vue
+++ b/doc/skeleton/pt/PTDoc.vue
@@ -11,19 +11,22 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Skeleton
+                basic: `
+<Skeleton
     :pt="{
         root: { class: 'w-3rem h-3rem' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <Skeleton
         :pt="{
             root: { class: 'w-3rem h-3rem' }
         }"
     />
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <Skeleton
         :pt="{
             root: { class: 'w-3rem h-3rem' }
diff --git a/doc/skeleton/theming/TailwindDoc.vue b/doc/skeleton/theming/TailwindDoc.vue
index 5f5156e09..fb155a5cd 100644
--- a/doc/skeleton/theming/TailwindDoc.vue
+++ b/doc/skeleton/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     skeleton: {
         root: ({ props }) => ({
             class: [
@@ -35,7 +34,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card text-gray-700 dark:text-white/80">
         <div class="w-full">
             <h5>Rectangle</h5>
diff --git a/doc/slider/AccessibilityDoc.vue b/doc/slider/AccessibilityDoc.vue
index 14d9463e1..305823b63 100644
--- a/doc/slider/AccessibilityDoc.vue
+++ b/doc/slider/AccessibilityDoc.vue
@@ -67,7 +67,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="label_number">Number</span>
+                basic: `
+<span id="label_number">Number</span>
 <Slider aria-labelledby="label_number" />
 
 <Slider aria-label="Number" />`
diff --git a/doc/slider/BasicDoc.vue b/doc/slider/BasicDoc.vue
index 58834ace7..c80365465 100644
--- a/doc/slider/BasicDoc.vue
+++ b/doc/slider/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Slider v-model="value" class="w-14rem" />`,
-                options: `<template>
+                basic: `
+<Slider v-model="value" class="w-14rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" class="w-14rem" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" class="w-14rem" />
     </div>
diff --git a/doc/slider/ImportDoc.vue b/doc/slider/ImportDoc.vue
index f79be9df2..b4f62b270 100644
--- a/doc/slider/ImportDoc.vue
+++ b/doc/slider/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Slider from 'primevue/slider';`
+                basic: `
+import Slider from 'primevue/slider';
+`
             }
         };
     }
diff --git a/doc/slider/InputDoc.vue b/doc/slider/InputDoc.vue
index 1d1daae32..bf1614d8d 100644
--- a/doc/slider/InputDoc.vue
+++ b/doc/slider/InputDoc.vue
@@ -17,9 +17,11 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `<InputText v-model.number="value" />
+                basic: `
+<InputText v-model.number="value" />
 <Slider v-model="value" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <div class="w-14rem">
             <InputText v-model.number="value" class="w-full" />
@@ -37,7 +39,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <div class="w-14rem">
             <InputText v-model.number="value" class="w-full" />
diff --git a/doc/slider/RangeDoc.vue b/doc/slider/RangeDoc.vue
index 22e077bc3..d6b317fc7 100644
--- a/doc/slider/RangeDoc.vue
+++ b/doc/slider/RangeDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: [20, 80],
             code: {
-                basic: `<Slider v-model="value" range class="w-14rem" />`,
-                options: `<template>
+                basic: `
+<Slider v-model="value" range class="w-14rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" range class="w-14rem" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" range class="w-14rem" />
     </div>
diff --git a/doc/slider/StepDoc.vue b/doc/slider/StepDoc.vue
index 7739caf00..b335fea0b 100644
--- a/doc/slider/StepDoc.vue
+++ b/doc/slider/StepDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 20,
             code: {
-                basic: `<Slider v-model="value" :step="20" class="w-14rem" />`,
-                options: `<template>
+                basic: `
+<Slider v-model="value" :step="20" class="w-14rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" :step="20" class="w-14rem" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" :step="20" class="w-14rem" />
     </div>
diff --git a/doc/slider/VerticalDoc.vue b/doc/slider/VerticalDoc.vue
index 20afb80f8..1477be0e2 100644
--- a/doc/slider/VerticalDoc.vue
+++ b/doc/slider/VerticalDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 50,
             code: {
-                basic: `<Slider v-model="value" orientation="vertical" class="h-14rem" />`,
-                options: `<template>
+                basic: `
+<Slider v-model="value" orientation="vertical" class="h-14rem" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" orientation="vertical" class="h-14rem" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Slider v-model="value" orientation="vertical" class="h-14rem" />
     </div>
diff --git a/doc/slider/pt/PTDoc.vue b/doc/slider/pt/PTDoc.vue
index 048f037fe..7db123da0 100644
--- a/doc/slider/pt/PTDoc.vue
+++ b/doc/slider/pt/PTDoc.vue
@@ -19,7 +19,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<Slider
+                basic: `
+<Slider
     v-model="value"
     :pt="{
         root: { class: 'w-14rem' },
@@ -27,7 +28,8 @@ export default {
         range: { class: 'bg-orange-400' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Slider
             v-model="value"
@@ -49,7 +51,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Slider
             v-model="value"
diff --git a/doc/slider/theming/TailwindDoc.vue b/doc/slider/theming/TailwindDoc.vue
index c33669687..50a7f6b93 100644
--- a/doc/slider/theming/TailwindDoc.vue
+++ b/doc/slider/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     slider: {
         root: ({ props }) => ({
             class: [
@@ -77,7 +76,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Slider v-model="value" class="w-14rem" />
     </div>
diff --git a/doc/speeddial/AccessibilityDoc.vue b/doc/speeddial/AccessibilityDoc.vue
index db2addaf0..816f0eb94 100644
--- a/doc/speeddial/AccessibilityDoc.vue
+++ b/doc/speeddial/AccessibilityDoc.vue
@@ -122,7 +122,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<SpeedDial aria-label="Options" />`
+                basic: `
+<SpeedDial aria-label="Options" />`
             }
         };
     }
diff --git a/doc/speeddial/CircleDoc.vue b/doc/speeddial/CircleDoc.vue
index 90028ea8b..e6ea31839 100644
--- a/doc/speeddial/CircleDoc.vue
+++ b/doc/speeddial/CircleDoc.vue
@@ -52,8 +52,10 @@ export default {
                 }
             ],
             code: {
-                basic: `<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />`,
-                options: `<template>
+                basic: `
+<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />`,
+                options: `
+<template>
     <div class="card">
         <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
             <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
@@ -107,7 +109,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
             <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
diff --git a/doc/speeddial/CustomDoc.vue b/doc/speeddial/CustomDoc.vue
index 8b5606056..8ff6a2616 100644
--- a/doc/speeddial/CustomDoc.vue
+++ b/doc/speeddial/CustomDoc.vue
@@ -52,9 +52,11 @@ export default {
                 }
             ],
             code: {
-                basic: `<Toast />
+                basic: `
+<Toast />
 <SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
             <Toast />
@@ -108,7 +110,8 @@ export default {
   }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
             <Toast />
diff --git a/doc/speeddial/ImportDoc.vue b/doc/speeddial/ImportDoc.vue
index 1a2b08e43..de1cf46a3 100644
--- a/doc/speeddial/ImportDoc.vue
+++ b/doc/speeddial/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import SpeedDial from 'primevue/speeddial';`
+                basic: `
+import SpeedDial from 'primevue/speeddial';
+`
             }
         };
     }
diff --git a/doc/speeddial/LinearDoc.vue b/doc/speeddial/LinearDoc.vue
index dcbfa59dc..f0270a94c 100644
--- a/doc/speeddial/LinearDoc.vue
+++ b/doc/speeddial/LinearDoc.vue
@@ -55,11 +55,13 @@ export default {
                 }
             ],
             code: {
-                basic: `<SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
+                basic: `
+<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 }" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
@@ -116,7 +118,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
diff --git a/doc/speeddial/MaskDoc.vue b/doc/speeddial/MaskDoc.vue
index afc7433a4..cc8a39007 100644
--- a/doc/speeddial/MaskDoc.vue
+++ b/doc/speeddial/MaskDoc.vue
@@ -52,8 +52,10 @@ export default {
                 }
             ],
             code: {
-                basic: `<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />`,
-                options: `<template>
+                basic: `
+<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />`,
+                options: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
@@ -107,7 +109,8 @@ data() {
 }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
diff --git a/doc/speeddial/QuarterCircleDoc.vue b/doc/speeddial/QuarterCircleDoc.vue
index 2841e7f5b..f749a6f91 100644
--- a/doc/speeddial/QuarterCircleDoc.vue
+++ b/doc/speeddial/QuarterCircleDoc.vue
@@ -55,11 +55,13 @@ export default {
                 }
             ],
             code: {
-                basic: `<SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
+                basic: `
+<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 }" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
@@ -116,7 +118,8 @@ data() {
 }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ right: 0, bottom: 0 }" />
diff --git a/doc/speeddial/SemiCircleDoc.vue b/doc/speeddial/SemiCircleDoc.vue
index b166f5809..c95e9fd47 100644
--- a/doc/speeddial/SemiCircleDoc.vue
+++ b/doc/speeddial/SemiCircleDoc.vue
@@ -55,11 +55,13 @@ export default {
                 }
             ],
             code: {
-                basic: `<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
+                basic: `
+<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 }" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
@@ -116,7 +118,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card" :style="{ position: 'relative', height: '500px' }">
         <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 }" />
diff --git a/doc/speeddial/TooltipDoc.vue b/doc/speeddial/TooltipDoc.vue
index c50b47e13..91617e726 100644
--- a/doc/speeddial/TooltipDoc.vue
+++ b/doc/speeddial/TooltipDoc.vue
@@ -53,9 +53,11 @@ export default {
                 }
             ],
             code: {
-                basic: `<SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
+                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' }" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
@@ -110,7 +112,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
             <SpeedDial :model="items" direction="up" class="right-0 bottom-0" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
diff --git a/doc/speeddial/pt/PTDoc.vue b/doc/speeddial/pt/PTDoc.vue
index 450152ea9..89368149d 100644
--- a/doc/speeddial/pt/PTDoc.vue
+++ b/doc/speeddial/pt/PTDoc.vue
@@ -59,14 +59,16 @@ export default {
                 }
             ],
             code: {
-                basic: `<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
+                basic: `
+<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
     :pt="{
         action: ({ props, state, context }) => ({
             class: context.active ? 'bg-primary' : undefined
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '300px' }">
             <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
@@ -126,7 +128,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '300px' }">
             <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
diff --git a/doc/speeddial/theming/TailwindDoc.vue b/doc/speeddial/theming/TailwindDoc.vue
index 6d6358e68..b90308b3c 100644
--- a/doc/speeddial/theming/TailwindDoc.vue
+++ b/doc/speeddial/theming/TailwindDoc.vue
@@ -5,7 +5,7 @@
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
         <div class="overflow-auto" style="max-height: 40rem">
-            <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+            <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         </div>
         <p class="mt-6">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
@@ -17,8 +17,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     speeddial: {
         root: 'absolute flex',
         button: {
@@ -138,7 +137,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }">
             <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
diff --git a/doc/splitbutton/AccessibilityDoc.vue b/doc/splitbutton/AccessibilityDoc.vue
index 0e8772ee6..d77fa734c 100644
--- a/doc/splitbutton/AccessibilityDoc.vue
+++ b/doc/splitbutton/AccessibilityDoc.vue
@@ -139,7 +139,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<SplitButton :buttonProps="{'aria-label': 'Default Action'}" :menuButtonProps="{'aria-label': 'More Options'}" />`
+                basic: `
+<SplitButton :buttonProps="{'aria-label': 'Default Action'}" :menuButtonProps="{'aria-label': 'More Options'}" />`
             }
         };
     }
diff --git a/doc/splitbutton/BasicDoc.vue b/doc/splitbutton/BasicDoc.vue
index 17bf0b9d4..a93c80d03 100644
--- a/doc/splitbutton/BasicDoc.vue
+++ b/doc/splitbutton/BasicDoc.vue
@@ -37,8 +37,10 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />`,
-                options: `<template>
+                basic: `
+<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
@@ -82,7 +84,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" />
diff --git a/doc/splitbutton/DisabledDoc.vue b/doc/splitbutton/DisabledDoc.vue
index 1867472e7..5abeaddd5 100644
--- a/doc/splitbutton/DisabledDoc.vue
+++ b/doc/splitbutton/DisabledDoc.vue
@@ -37,8 +37,10 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />`,
-                options: `<template>
+                basic: `
+<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
@@ -81,7 +83,8 @@ export default {
         }
     }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" disabled />
diff --git a/doc/splitbutton/ImportDoc.vue b/doc/splitbutton/ImportDoc.vue
index ad49d478e..eacd92de6 100644
--- a/doc/splitbutton/ImportDoc.vue
+++ b/doc/splitbutton/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import SplitButton from 'primevue/splitbutton';`
+                basic: `
+import SplitButton from 'primevue/splitbutton';
+`
             }
         };
     }
diff --git a/doc/splitbutton/OutlinedDoc.vue b/doc/splitbutton/OutlinedDoc.vue
index 62225c082..bd4b28baf 100644
--- a/doc/splitbutton/OutlinedDoc.vue
+++ b/doc/splitbutton/OutlinedDoc.vue
@@ -43,14 +43,16 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
+                basic: `
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
@@ -100,7 +102,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/RaisedDoc.vue b/doc/splitbutton/RaisedDoc.vue
index 7227d2297..275cb58b2 100644
--- a/doc/splitbutton/RaisedDoc.vue
+++ b/doc/splitbutton/RaisedDoc.vue
@@ -43,14 +43,16 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
+                basic: `
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
@@ -100,7 +102,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/RaisedTextDoc.vue b/doc/splitbutton/RaisedTextDoc.vue
index c27ecf223..0f716a522 100644
--- a/doc/splitbutton/RaisedTextDoc.vue
+++ b/doc/splitbutton/RaisedTextDoc.vue
@@ -43,14 +43,16 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
+                basic: `
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
@@ -100,7 +102,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/RoundedDoc.vue b/doc/splitbutton/RoundedDoc.vue
index eb5866436..d27a84f2b 100644
--- a/doc/splitbutton/RoundedDoc.vue
+++ b/doc/splitbutton/RoundedDoc.vue
@@ -43,14 +43,16 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
+                basic: `
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
@@ -100,7 +102,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/SeverityDoc.vue b/doc/splitbutton/SeverityDoc.vue
index 92d735d16..69ba1ab79 100644
--- a/doc/splitbutton/SeverityDoc.vue
+++ b/doc/splitbutton/SeverityDoc.vue
@@ -43,14 +43,16 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
+                basic: `
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
@@ -100,7 +102,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/SizesDoc.vue b/doc/splitbutton/SizesDoc.vue
index c6cfa922f..b576739df 100644
--- a/doc/splitbutton/SizesDoc.vue
+++ b/doc/splitbutton/SizesDoc.vue
@@ -39,10 +39,12 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
+                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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
@@ -88,7 +90,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
diff --git a/doc/splitbutton/TemplateDoc.vue b/doc/splitbutton/TemplateDoc.vue
index 07b05d1dd..d28f8e47c 100644
--- a/doc/splitbutton/TemplateDoc.vue
+++ b/doc/splitbutton/TemplateDoc.vue
@@ -42,13 +42,15 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
+                basic: `
+<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
     <Button @click="save">
         <img alt="logo" src="/images/logo.svg" style="width: 1rem" />
         <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
     </Button>
 </SplitButton>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
@@ -97,7 +99,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
diff --git a/doc/splitbutton/TextDoc.vue b/doc/splitbutton/TextDoc.vue
index ba5b89348..79dca4714 100644
--- a/doc/splitbutton/TextDoc.vue
+++ b/doc/splitbutton/TextDoc.vue
@@ -43,14 +43,16 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
+                basic: `
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
@@ -100,7 +102,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
diff --git a/doc/splitbutton/pt/PTDoc.vue b/doc/splitbutton/pt/PTDoc.vue
index e4058b4cc..db9ca20a5 100644
--- a/doc/splitbutton/pt/PTDoc.vue
+++ b/doc/splitbutton/pt/PTDoc.vue
@@ -44,7 +44,8 @@ export default {
                 { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
             ],
             code: {
-                basic: `<SplitButton label="Save"
+                basic: `
+<SplitButton label="Save"
     @click="save"
     :model="items"
     :pt="{
@@ -53,7 +54,8 @@ export default {
         }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <SplitButton
             label="Save"
@@ -107,7 +109,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <SplitButton
             label="Save"
diff --git a/doc/splitbutton/theming/TailwindDoc.vue b/doc/splitbutton/theming/TailwindDoc.vue
index dc7060e76..ce3aae654 100644
--- a/doc/splitbutton/theming/TailwindDoc.vue
+++ b/doc/splitbutton/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -157,7 +157,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center flex-wrap">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
diff --git a/doc/splitter/HorizontalDoc.vue b/doc/splitter/HorizontalDoc.vue
index b676bd51d..b2da03886 100644
--- a/doc/splitter/HorizontalDoc.vue
+++ b/doc/splitter/HorizontalDoc.vue
@@ -16,11 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Splitter style="height: 300px" class="mb-5">
+                basic: `
+<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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Splitter style="height: 300px" class="mb-5">
             <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
@@ -31,7 +33,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Splitter style="height: 300px" class="mb-5">
             <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
diff --git a/doc/splitter/ImportDoc.vue b/doc/splitter/ImportDoc.vue
index ba83331b9..14a91a062 100644
--- a/doc/splitter/ImportDoc.vue
+++ b/doc/splitter/ImportDoc.vue
@@ -8,8 +8,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Splitter from 'primevue/splitter';
-import SplitterPanel from 'primevue/splitterpanel';`
+                basic: `
+import Splitter from 'primevue/splitter';
+import SplitterPanel from 'primevue/splitterpanel';
+`
             }
         };
     }
diff --git a/doc/splitter/NestedDoc.vue b/doc/splitter/NestedDoc.vue
index 56a680f20..3b2718292 100644
--- a/doc/splitter/NestedDoc.vue
+++ b/doc/splitter/NestedDoc.vue
@@ -26,7 +26,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Splitter style="height: 300px">
+                basic: `
+<Splitter style="height: 300px">
     <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
     <SplitterPanel :size="80">
         <Splitter layout="vertical">
@@ -40,7 +41,8 @@ export default {
         </Splitter>
     </SplitterPanel>
 </Splitter>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Splitter style="height: 300px">
             <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
@@ -61,7 +63,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Splitter style="height: 300px">
             <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"> Panel 1 </SplitterPanel>
diff --git a/doc/splitter/SizeDoc.vue b/doc/splitter/SizeDoc.vue
index 9d4af236e..8b2491c31 100644
--- a/doc/splitter/SizeDoc.vue
+++ b/doc/splitter/SizeDoc.vue
@@ -16,11 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Splitter style="height: 300px">
+                basic: `
+<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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Splitter style="height: 300px">
             <SplitterPanel class="flex align-items-center justify-content-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
@@ -31,7 +33,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Splitter style="height: 300px">
             <SplitterPanel class="flex align-items-center justify-content-center" :size="25" :minSize="10"> Panel 1 </SplitterPanel>
diff --git a/doc/splitter/VerticalDoc.vue b/doc/splitter/VerticalDoc.vue
index 02e924e7a..92b2b781a 100644
--- a/doc/splitter/VerticalDoc.vue
+++ b/doc/splitter/VerticalDoc.vue
@@ -16,11 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Splitter style="height: 300px" layout="vertical">
+                basic: `
+<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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Splitter style="height: 300px" layout="vertical">
             <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
@@ -31,7 +33,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Splitter style="height: 300px" layout="vertical">
             <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
diff --git a/doc/splitter/pt/PTDoc.vue b/doc/splitter/pt/PTDoc.vue
index db58e26fd..4ccd5f46b 100644
--- a/doc/splitter/pt/PTDoc.vue
+++ b/doc/splitter/pt/PTDoc.vue
@@ -14,7 +14,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Splitter
+                basic: `
+<Splitter
     :pt="{
         root: { style: { height: '300px' } },
         gutterHandler: { class: 'bg-primary' }
@@ -22,7 +23,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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Splitter
             :pt="{
@@ -34,7 +36,8 @@ export default {
         </Splitter>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Splitter
             :pt="{
diff --git a/doc/splitter/theming/TailwindDoc.vue b/doc/splitter/theming/TailwindDoc.vue
index 7b4cd8055..96cf931d6 100644
--- a/doc/splitter/theming/TailwindDoc.vue
+++ b/doc/splitter/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     splitter: {
         root: ({ context }) => ({
             class: [
@@ -51,7 +50,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Splitter style="height: 300px" class="mb-5">
             <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
diff --git a/doc/steps/BasicDoc.vue b/doc/steps/BasicDoc.vue
index 779fbe257..7646ba5a3 100644
--- a/doc/steps/BasicDoc.vue
+++ b/doc/steps/BasicDoc.vue
@@ -49,7 +49,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false"
+                basic: `
+<Steps :model="items" aria-label="Form Steps" :readonly="false"
     :pt="{
         menuitem: ({ context }) => ({
             class: isActive(context.item) && 'p-highlight p-steps-current'
@@ -68,7 +69,8 @@ export default {
         </span>
     </template>
 </Steps>`,
-                options: `<template>
+                options: `
+<template>
     <div>        
         <div class="card">
             <Steps :model="items" aria-label="Form Steps" :readonly="false"
@@ -125,7 +127,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <div class="card">
             <Steps :model="items" aria-label="Form Steps" :readonly="false"
diff --git a/doc/steps/ImportDoc.vue b/doc/steps/ImportDoc.vue
index 84ea854bd..b683ec33d 100644
--- a/doc/steps/ImportDoc.vue
+++ b/doc/steps/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Steps from 'primevue/steps';`
+                basic: `
+import Steps from 'primevue/steps';
+`
             }
         };
     }
diff --git a/doc/steps/InteractiveDoc.vue b/doc/steps/InteractiveDoc.vue
index 7252102e1..1fb620d6b 100644
--- a/doc/steps/InteractiveDoc.vue
+++ b/doc/steps/InteractiveDoc.vue
@@ -56,7 +56,8 @@ export default {
             ],
             formObject: {},
             code: {
-                basic: `<div class="card">
+                basic: `
+<div class="card">
         <Steps
             :model="items"
             aria-label="Form Steps"
@@ -82,7 +83,8 @@ export default {
         <component :is="Component" />
     </keep-alive>
 </router-view>`,
-                options: `<template>
+                options: `
+<template>
     <div>
         <div class="card">
             <Steps
@@ -169,7 +171,8 @@ export default {
     padding: 2rem;
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <div class="card">
             <Steps
diff --git a/doc/steps/RouterDoc.vue b/doc/steps/RouterDoc.vue
index fa3675add..5670b1fb0 100644
--- a/doc/steps/RouterDoc.vue
+++ b/doc/steps/RouterDoc.vue
@@ -60,7 +60,8 @@ export default {
             //     }
             // ],
             code: {
-                basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false"
+                basic: `
+<Steps :model="items" aria-label="Form Steps" :readonly="false"
     :pt="{
         menuitem: ({ context }) => ({
             class: isActive(context.item) && 'p-highlight p-steps-current'
@@ -79,7 +80,8 @@ export default {
         </a>
     </template>
 </Steps>`,
-                options: `<template>
+                options: `
+<template>
     <div>        
         <div class="card">
             <Steps :model="items" aria-label="Form Steps" :readonly="false"
@@ -140,7 +142,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <div class="card">
             <Steps :model="items" aria-label="Form Steps" :readonly="false"
diff --git a/doc/steps/pt/PTDoc.vue b/doc/steps/pt/PTDoc.vue
index 8a57389e5..ada9b9f59 100644
--- a/doc/steps/pt/PTDoc.vue
+++ b/doc/steps/pt/PTDoc.vue
@@ -35,14 +35,16 @@ export default {
                 }
             ],
             code: {
-                basic: `<Steps
+                basic: `
+<Steps
     :model="items"
     :readonly="false"
     :pt="{
         root: { class: 'w-30rem' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div>        
         <div class="card">
             <Steps
@@ -82,7 +84,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <div class="card">
             <Steps
diff --git a/doc/steps/theming/TailwindDoc.vue b/doc/steps/theming/TailwindDoc.vue
index 14027d55f..3df4dc60a 100644
--- a/doc/steps/theming/TailwindDoc.vue
+++ b/doc/steps/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     steps: {
         root: 'relative',
         menu: 'p-0 m-0 list-none flex',
@@ -41,7 +40,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <div class="card">
             <Steps :model="items" :readonly="false" aria-label="Form Steps" />
diff --git a/doc/styleclass/AnimationDoc.vue b/doc/styleclass/AnimationDoc.vue
index 4eb8afff1..f6545ec4f 100644
--- a/doc/styleclass/AnimationDoc.vue
+++ b/doc/styleclass/AnimationDoc.vue
@@ -22,12 +22,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
+                basic: `
+<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column align-items-center">
         <div>
             <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
@@ -85,7 +87,8 @@ export default {
     animation: my-fadeout 150ms linear;
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center">
         <div>
             <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
diff --git a/doc/styleclass/ImportDoc.vue b/doc/styleclass/ImportDoc.vue
index 4516522fd..6bb554e12 100644
--- a/doc/styleclass/ImportDoc.vue
+++ b/doc/styleclass/ImportDoc.vue
@@ -8,7 +8,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import StyleClass from 'primevue/styleclass';
+                basic: `
+import StyleClass from 'primevue/styleclass';
                 
 app.directive('styleclass', StyleClass);`
             }
diff --git a/doc/styleclass/ToggleClassDoc.vue b/doc/styleclass/ToggleClassDoc.vue
index 70959a851..e25685c95 100644
--- a/doc/styleclass/ToggleClassDoc.vue
+++ b/doc/styleclass/ToggleClassDoc.vue
@@ -14,9 +14,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
+                basic: `
+<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
 <InputText />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
         <InputText />
@@ -25,7 +27,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
         <InputText />
diff --git a/doc/tabmenu/BasicDoc.vue b/doc/tabmenu/BasicDoc.vue
index 99a32cb8b..e6b727f06 100644
--- a/doc/tabmenu/BasicDoc.vue
+++ b/doc/tabmenu/BasicDoc.vue
@@ -31,7 +31,8 @@ export default {
                 { label: 'Settings', icon: 'pi pi-fw pi-cog', route: '/tabmenu/settings' }
             ],
             code: {
-                basic: `<TabMenu v-model:activeIndex="active" :model="items">
+                basic: `
+<TabMenu v-model:activeIndex="active" :model="items">
     <template #item="{ label, item, props }">
         <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
             <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
@@ -42,7 +43,8 @@ export default {
     </template>
 </TabMenu>
 <router-view />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TabMenu v-model:activeIndex="active" :model="items">
             <template #item="{ label, item, props }">
@@ -102,7 +104,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TabMenu v-model:activeIndex="active" :model="items">
             <template #item="{ label, item, props }">
diff --git a/doc/tabmenu/ControlledDoc.vue b/doc/tabmenu/ControlledDoc.vue
index 7981947cb..e182f0f3c 100644
--- a/doc/tabmenu/ControlledDoc.vue
+++ b/doc/tabmenu/ControlledDoc.vue
@@ -37,9 +37,11 @@ export default {
                 }
             ],
             code: {
-                basic: `<Button @click="active = 0" text outlined label="Activate 1st" />
+                basic: `
+<Button @click="active = 0" text outlined label="Activate 1st" />
 <TabMenu v-model:activeIndex="active" :model="items" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Button @click="active = 0" text outlined label="Activate 1st" />
         <TabMenu v-model:activeIndex="active" :model="items" />
@@ -77,7 +79,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Button @click="active = 0" text outlined label="Activate 1st" />
         <TabMenu v-model:activeIndex="active" :model="items" />
diff --git a/doc/tabmenu/ImportDoc.vue b/doc/tabmenu/ImportDoc.vue
index ff9dd3572..b18850310 100644
--- a/doc/tabmenu/ImportDoc.vue
+++ b/doc/tabmenu/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import TabMenu from 'primevue/tabmenu';`
+                basic: `
+import TabMenu from 'primevue/tabmenu';
+`
             }
         };
     }
diff --git a/doc/tabmenu/RouterDoc.vue b/doc/tabmenu/RouterDoc.vue
index 7a934254a..0168d221b 100644
--- a/doc/tabmenu/RouterDoc.vue
+++ b/doc/tabmenu/RouterDoc.vue
@@ -39,7 +39,8 @@ export default {
             //     { label: 'FileUpload', icon: 'pi pi-fw pi-upload', url: '/fileupload' }
             // ],
             code: {
-                basic: `<TabMenu v-model:activeIndex="active" :model="items">
+                basic: `
+<TabMenu v-model:activeIndex="active" :model="items">
     <template #item="{ label, item, props }">
         <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
             <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
@@ -54,7 +55,8 @@ export default {
     </template>
 </TabMenu>
 <router-view />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TabMenu v-model:activeIndex="active" :model="items">
             <template #item="{ label, item, props }">
@@ -123,7 +125,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TabMenu v-model:activeIndex="active" :model="items">
             <template #item="{ label, item, props }">
diff --git a/doc/tabmenu/pt/PTDoc.vue b/doc/tabmenu/pt/PTDoc.vue
index e8ec14a25..d5b5a5b67 100644
--- a/doc/tabmenu/pt/PTDoc.vue
+++ b/doc/tabmenu/pt/PTDoc.vue
@@ -40,7 +40,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<TabMenu
+                basic: `
+<TabMenu
     :model="items"
     :pt="{
         action: ({ props, state, context }) => ({
@@ -48,7 +49,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TabMenu
             :model="items"
@@ -91,7 +93,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TabMenu
             :model="items"
diff --git a/doc/tabmenu/theming/TailwindDoc.vue b/doc/tabmenu/theming/TailwindDoc.vue
index 0578baf65..3314b471e 100644
--- a/doc/tabmenu/theming/TailwindDoc.vue
+++ b/doc/tabmenu/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     tabmenu: {
         root: 'overflow-x-auto',
         menu: {
@@ -41,7 +40,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TabMenu :model="items" />
         <router-view />
diff --git a/doc/tabview/BasicDoc.vue b/doc/tabview/BasicDoc.vue
index 955da8124..b8b9b2a13 100644
--- a/doc/tabview/BasicDoc.vue
+++ b/doc/tabview/BasicDoc.vue
@@ -32,7 +32,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<TabView>
+                basic: `
+<TabView>
     <TabPanel header="Header I">
         <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
@@ -53,7 +54,8 @@ export default {
     </TabPanel>
 </TabView>
                 `,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TabView>
             <TabPanel header="Header I">
@@ -81,7 +83,8 @@ export default {
 <script>
 <\/script>
     `,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TabView>
             <TabPanel header="Header I">
diff --git a/doc/tabview/ControlledDoc.vue b/doc/tabview/ControlledDoc.vue
index da0a6b2d0..6117428b9 100644
--- a/doc/tabview/ControlledDoc.vue
+++ b/doc/tabview/ControlledDoc.vue
@@ -39,7 +39,8 @@ export default {
         return {
             active: 0,
             code: {
-                basic: `<div class="py-2">
+                basic: `
+<div class="py-2">
     <Button @click="active = 0" text label="Activate 1st" />
     <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
     <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
@@ -65,7 +66,8 @@ export default {
         </p>
     </TabPanel>
 </TabView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="py-2">
             <Button @click="active = 0" text label="Activate 1st" />
@@ -105,7 +107,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="py-2">
             <Button @click="active = 0" text label="Activate 1st" />
diff --git a/doc/tabview/DisabledDoc.vue b/doc/tabview/DisabledDoc.vue
index 3fd159393..642f195ec 100644
--- a/doc/tabview/DisabledDoc.vue
+++ b/doc/tabview/DisabledDoc.vue
@@ -33,7 +33,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<TabView>
+                basic: `
+<TabView>
     <TabPanel header="Header I">
         <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
@@ -55,7 +56,8 @@ export default {
     </TabPanel>
     <TabPanel header="Header IV" :disabled="true"></TabPanel>
 </TabView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TabView>
             <TabPanel header="Header I">
@@ -83,7 +85,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TabView>
             <TabPanel header="Header I">
diff --git a/doc/tabview/DynamicDoc.vue b/doc/tabview/DynamicDoc.vue
index 9d956dfa3..508dde470 100644
--- a/doc/tabview/DynamicDoc.vue
+++ b/doc/tabview/DynamicDoc.vue
@@ -22,12 +22,14 @@ export default {
                 { title: 'Tab 3', content: 'Tab 3 Content' }
             ],
             code: {
-                basic: `<TabView>
+                basic: `
+<TabView>
     <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </TabPanel>
 </TabView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TabView>
             <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
@@ -50,7 +52,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TabView>
             <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
diff --git a/doc/tabview/ImportDoc.vue b/doc/tabview/ImportDoc.vue
index c90e378e5..bdde53eec 100644
--- a/doc/tabview/ImportDoc.vue
+++ b/doc/tabview/ImportDoc.vue
@@ -8,8 +8,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `import TabView from 'primevue/tabview';
-import TabPanel from 'primevue/tabpanel';`
+                basic: `
+import TabView from 'primevue/tabview';
+import TabPanel from 'primevue/tabpanel';
+`
             }
         };
     }
diff --git a/doc/tabview/ScrollableDoc.vue b/doc/tabview/ScrollableDoc.vue
index 9544c7a17..1734f2e64 100644
--- a/doc/tabview/ScrollableDoc.vue
+++ b/doc/tabview/ScrollableDoc.vue
@@ -18,12 +18,14 @@ export default {
         return {
             scrollableTabs: Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content` })),
             code: {
-                basic: `<TabView :scrollable="true">
+                basic: `
+<TabView :scrollable="true">
     <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
         <p>{{ tab.content }}</p>
     </TabPanel>
 </TabView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TabView :scrollable="true">
             <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
@@ -42,7 +44,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TabView :scrollable="true">
             <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
diff --git a/doc/tabview/TemplateDoc.vue b/doc/tabview/TemplateDoc.vue
index 5940276df..ac174aaa1 100644
--- a/doc/tabview/TemplateDoc.vue
+++ b/doc/tabview/TemplateDoc.vue
@@ -45,7 +45,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<TabView class="tabview-custom">
+                basic: `
+<TabView class="tabview-custom">
     <TabPanel>
         <template #header>
             <i class="pi pi-calendar mr-2"></i>
@@ -78,7 +79,8 @@ export default {
         </p>
     </TabPanel>
 </TabView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TabView class="tabview-custom">
             <TabPanel>
@@ -118,7 +120,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TabView class="tabview-custom">
             <TabPanel>
diff --git a/doc/tabview/pt/PTDoc.vue b/doc/tabview/pt/PTDoc.vue
index 612c8497c..118f50b61 100644
--- a/doc/tabview/pt/PTDoc.vue
+++ b/doc/tabview/pt/PTDoc.vue
@@ -28,7 +28,8 @@ export default {
                 content: `Tab ${i + 1} Content`
             })),
             code: {
-                basic: `<TabView>
+                basic: `
+<TabView>
     <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
         :pt="{
             headerAction: ({ props, parent }) => ({
@@ -38,7 +39,8 @@ export default {
         <p>{{ tab.content }}</p>
     </TabPanel>
 </TabView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TabView>
             <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
@@ -74,7 +76,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TabView>
             <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
diff --git a/doc/tabview/theming/TailwindDoc.vue b/doc/tabview/theming/TailwindDoc.vue
index ed4ecfa64..e8efe1702 100644
--- a/doc/tabview/theming/TailwindDoc.vue
+++ b/doc/tabview/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     tabview: {
         navContainer: ({ props }) => ({
             class: [
@@ -64,7 +63,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TabView>
             <TabPanel header="Header I">
diff --git a/doc/tag/BasicDoc.vue b/doc/tag/BasicDoc.vue
index 39adc0a03..cd9a6ba87 100644
--- a/doc/tag/BasicDoc.vue
+++ b/doc/tag/BasicDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Tag value="New"></Tag>`,
-                options: `<template>
+                basic: `
+<Tag value="New"></Tag>`,
+                options: `
+<template>
     <div class="flex justify-content-center">
         <Tag value="New"></Tag>
     </div>
@@ -23,7 +25,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="flex justify-content-center">
         <Tag value="New"></Tag>
     </div>
diff --git a/doc/tag/IconDoc.vue b/doc/tag/IconDoc.vue
index 2407bb8f5..59fda5a9d 100644
--- a/doc/tag/IconDoc.vue
+++ b/doc/tag/IconDoc.vue
@@ -17,12 +17,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Tag icon="pi pi-user" value="Primary"></Tag>
+                basic: `
+<Tag icon="pi pi-user" value="Primary"></Tag>
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag icon="pi pi-user" value="Primary"></Tag>
         <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
@@ -35,7 +37,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag icon="pi pi-user" value="Primary"></Tag>
         <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
diff --git a/doc/tag/ImportDoc.vue b/doc/tag/ImportDoc.vue
index 142a96e46..fff521637 100644
--- a/doc/tag/ImportDoc.vue
+++ b/doc/tag/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Tag from 'primevue/tag';`
+                basic: `
+import Tag from 'primevue/tag';
+`
             }
         };
     }
diff --git a/doc/tag/PillDoc.vue b/doc/tag/PillDoc.vue
index ad698aa80..8de58a274 100644
--- a/doc/tag/PillDoc.vue
+++ b/doc/tag/PillDoc.vue
@@ -17,12 +17,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Tag value="Primary" rounded></Tag>
+                basic: `
+<Tag value="Primary" rounded></Tag>
 <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag value="Primary" rounded></Tag>
         <Tag severity="success" value="Success" rounded></Tag>
@@ -35,7 +37,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag value="Primary" rounded></Tag>
         <Tag severity="success" value="Success" rounded></Tag>
diff --git a/doc/tag/SeverityDoc.vue b/doc/tag/SeverityDoc.vue
index e85052ed0..378b1fb26 100644
--- a/doc/tag/SeverityDoc.vue
+++ b/doc/tag/SeverityDoc.vue
@@ -17,12 +17,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Tag value="Primary"></Tag>
+                basic: `
+<Tag value="Primary"></Tag>
 <Tag severity="success" value="Success"></Tag>
 <Tag severity="info" value="Info"></Tag>
 <Tag severity="warning" value="Warning"></Tag>
 <Tag severity="danger" value="Danger"></Tag>`,
-                options: `<template>
+                options: `
+<template>
     <div class="flex flex-wrap justify-content-center gap-2">
         <Tag value="Primary"></Tag>
         <Tag severity="success" value="Success"></Tag>
@@ -35,7 +37,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="flex flex-wrap justify-content-center gap-2">
         <Tag value="Primary"></Tag>
         <Tag severity="success" value="Success"></Tag>
diff --git a/doc/tag/TemplateDoc.vue b/doc/tag/TemplateDoc.vue
index 45c583436..d20517bd7 100644
--- a/doc/tag/TemplateDoc.vue
+++ b/doc/tag/TemplateDoc.vue
@@ -19,14 +19,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Tag :style="{ background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)' }">
+                basic: `
+<Tag :style="{ background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)' }">
     <div class="flex align-items-center gap-2">
         <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
         <span class="text-base">Italia</span>
         <i class="pi pi-times text-xs"></i>
     </div>
 </Tag>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Tag :style="{ background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)' }">
             <div class="flex align-items-center gap-2">
@@ -41,7 +43,8 @@ export default {
 <script>
 
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Tag :style="{ background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)' }">
             <div class="flex align-items-center gap-2">
diff --git a/doc/tag/pt/PTDoc.vue b/doc/tag/pt/PTDoc.vue
index 46ed0100b..2dc739d50 100644
--- a/doc/tag/pt/PTDoc.vue
+++ b/doc/tag/pt/PTDoc.vue
@@ -11,12 +11,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Tag icon="pi pi-user" value="Waiting"
+                basic: `
+<Tag icon="pi pi-user" value="Waiting"
     :pt="{
         root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Tag icon="pi pi-user" value="Waiting"
             :pt="{
@@ -25,7 +27,8 @@ export default {
         />
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Tag icon="pi pi-user" value="Waiting"
             :pt="{
diff --git a/doc/tag/theming/TailwindDoc.vue b/doc/tag/theming/TailwindDoc.vue
index 6f965ffdf..5120b15d2 100644
--- a/doc/tag/theming/TailwindDoc.vue
+++ b/doc/tag/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     tag: {
         root: ({ props }) => ({
             class: [
@@ -41,7 +40,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-center gap-2">
         <Tag value="Primary"></Tag>
         <Tag severity="success" value="Success"></Tag>
diff --git a/doc/tailwind/CustomizationDoc.vue b/doc/tailwind/CustomizationDoc.vue
index fed3073a7..e79ed25c1 100644
--- a/doc/tailwind/CustomizationDoc.vue
+++ b/doc/tailwind/CustomizationDoc.vue
@@ -20,7 +20,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `import {createApp} from "vue";
+                basic: `
+import {createApp} from "vue";
 import PrimeVue from "primevue/config";
 import Tailwind from "primevue/passthrough/tailwind";
 
@@ -60,10 +61,12 @@ const MyDesignSystem = {
     }
 }
 
-app.use(PrimeVue, { unstyled: true, pt: MyDesignSystem });`
+app.use(PrimeVue, { unstyled: true, pt: MyDesignSystem });
+`
             },
             code2: {
-                basic: `import {createApp} from "vue";
+                basic: `
+import {createApp} from "vue";
 import PrimeVue from "primevue/config";
 import { usePassThrough } from "primevue/passthrough";
 import Tailwind from "primevue/passthrough/tailwind";
@@ -86,7 +89,8 @@ const CustomTailwind = usePassThrough(
     }
 );
 
-app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });`
+app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });
+`
             }
         };
     }
diff --git a/doc/tailwind/SetupDoc.vue b/doc/tailwind/SetupDoc.vue
index 795bdaa36..239d61697 100644
--- a/doc/tailwind/SetupDoc.vue
+++ b/doc/tailwind/SetupDoc.vue
@@ -20,16 +20,19 @@ export default {
     data() {
         return {
             code1: {
-                basic: `import {createApp} from "vue";
+                basic: `
+import {createApp} from "vue";
 import PrimeVue from "primevue/config";
 import Tailwind from "primevue/passthrough/tailwind";
 
 const app = createApp(App);
 
-app.use(PrimeVue, { unstyled: true, pt: Tailwind });`
+app.use(PrimeVue, { unstyled: true, pt: Tailwind });
+`
             },
             code2: {
-                basic: `export default {
+                basic: `
+export default {
     ...
     content: [
         "./index.html",
@@ -37,7 +40,8 @@ app.use(PrimeVue, { unstyled: true, pt: Tailwind });`
         "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"
     ],
     ...
-}`
+}
+`
             }
         };
     }
diff --git a/doc/terminal/BasicDoc.vue b/doc/terminal/BasicDoc.vue
index 9ec33221a..58584a5f9 100644
--- a/doc/terminal/BasicDoc.vue
+++ b/doc/terminal/BasicDoc.vue
@@ -19,8 +19,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />`,
-                options: `<template>
+                basic: `
+<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />`,
+                options: `
+<template>
     <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
@@ -86,7 +88,8 @@ p {
     color: #9fa8da;
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
diff --git a/doc/terminal/ImportDoc.vue b/doc/terminal/ImportDoc.vue
index 797be8a05..e8052956f 100644
--- a/doc/terminal/ImportDoc.vue
+++ b/doc/terminal/ImportDoc.vue
@@ -8,7 +8,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Terminal from 'primevue/terminal';
+                basic: `
+import Terminal from 'primevue/terminal';
 import TerminalService from 'primevue/terminalservice'`
             }
         };
diff --git a/doc/terminal/pt/PTDoc.vue b/doc/terminal/pt/PTDoc.vue
index 79ab71d5a..075f3b3fe 100644
--- a/doc/terminal/pt/PTDoc.vue
+++ b/doc/terminal/pt/PTDoc.vue
@@ -23,7 +23,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Terminal
+                basic: `
+<Terminal
     welcomeMessage="Welcome to PrimeVue"
     prompt="primevue $"
     :pt="{
@@ -33,7 +34,8 @@ export default {
         response: { class: 'text-purple-500' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal
@@ -87,7 +89,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal
diff --git a/doc/terminal/theming/TailwindDoc.vue b/doc/terminal/theming/TailwindDoc.vue
index 910485a71..d1388252d 100644
--- a/doc/terminal/theming/TailwindDoc.vue
+++ b/doc/terminal/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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']
@@ -29,7 +28,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <p class="text-gray-700 dark:text-white/80">Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
diff --git a/doc/textarea/AccessibilityDoc.vue b/doc/textarea/AccessibilityDoc.vue
index 51317b842..ad9f05280 100644
--- a/doc/textarea/AccessibilityDoc.vue
+++ b/doc/textarea/AccessibilityDoc.vue
@@ -33,7 +33,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<label for="address1">Address 1</label>
+                basic: `
+<label for="address1">Address 1</label>
 <Textarea id="address1" />
 
 <span id="address2">Address 2</span>
diff --git a/doc/textarea/AutoResizeDoc.vue b/doc/textarea/AutoResizeDoc.vue
index 0bacfb1fc..f03850db8 100644
--- a/doc/textarea/AutoResizeDoc.vue
+++ b/doc/textarea/AutoResizeDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<Textarea v-model="value" autoResize rows="5" cols="30" />`,
-                options: `<template>
+                basic: `
+<Textarea v-model="value" autoResize rows="5" cols="30" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
diff --git a/doc/textarea/BasicDoc.vue b/doc/textarea/BasicDoc.vue
index ddb15fb20..eb9b65e58 100644
--- a/doc/textarea/BasicDoc.vue
+++ b/doc/textarea/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<Textarea v-model="value" rows="5" cols="30" />`,
-                options: `<template>
+                basic: `
+<Textarea v-model="value" rows="5" cols="30" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30" />
     </div>
diff --git a/doc/textarea/DisabledDoc.vue b/doc/textarea/DisabledDoc.vue
index 8d0730a14..dd51f217c 100644
--- a/doc/textarea/DisabledDoc.vue
+++ b/doc/textarea/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: 'Disabled',
             code: {
-                basic: `<Textarea v-model="value" rows="5" cols="30" disabled />`,
-                options: `<template>
+                basic: `
+<Textarea v-model="value" rows="5" cols="30" disabled />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30" disabled />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30" disabled />
     </div>
diff --git a/doc/textarea/FloatLabelDoc.vue b/doc/textarea/FloatLabelDoc.vue
index 507c0b66e..8836f35ae 100644
--- a/doc/textarea/FloatLabelDoc.vue
+++ b/doc/textarea/FloatLabelDoc.vue
@@ -17,11 +17,13 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<span class="p-float-label">
+                basic: `
+<span class="p-float-label">
     <Textarea v-model="value" rows="5" cols="30" />
     <label>Username</label>
 </span>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Textarea v-model="value" rows="5" cols="30" />
@@ -39,7 +41,8 @@ export default {
   }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <Textarea v-model="value" rows="5" cols="30" />
diff --git a/doc/textarea/ImportDoc.vue b/doc/textarea/ImportDoc.vue
index 8d8a5d3ef..1e2257ccd 100644
--- a/doc/textarea/ImportDoc.vue
+++ b/doc/textarea/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Textarea from 'primevue/textarea';`
+                basic: `
+import Textarea from 'primevue/textarea';
+`
             }
         };
     }
diff --git a/doc/textarea/InvalidDoc.vue b/doc/textarea/InvalidDoc.vue
index 93befa1b7..f8295fcce 100644
--- a/doc/textarea/InvalidDoc.vue
+++ b/doc/textarea/InvalidDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<Textarea v-model="value" rows="5" cols="30" />`,
-                options: `<template>
+                basic: `
+<Textarea v-model="value" rows="5" cols="30" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30" class="p-invalid" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Textarea v-model="value" rows="5" cols="30"   class="p-invalid" />
     </div>
diff --git a/doc/textarea/form/VeeValidateDoc.vue b/doc/textarea/form/VeeValidateDoc.vue
index be2ae5250..4b23d2420 100644
--- a/doc/textarea/form/VeeValidateDoc.vue
+++ b/doc/textarea/form/VeeValidateDoc.vue
@@ -44,7 +44,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div class="card flex justify-content-center">
+                basic: `
+<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column gap-2">
         <span class="p-float-label">
             <Textarea id="value" v-model="value" :class="{ 'p-invalid': errorMessage }" rows="4" cols="30" aria-describedby="text-error" />
@@ -55,7 +56,8 @@ export default {
     </form>
     <Toast />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
@@ -97,7 +99,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <span class="p-float-label">
diff --git a/doc/textarea/pt/PTDoc.vue b/doc/textarea/pt/PTDoc.vue
index 1bb660988..7e19c6980 100644
--- a/doc/textarea/pt/PTDoc.vue
+++ b/doc/textarea/pt/PTDoc.vue
@@ -20,7 +20,8 @@ export default {
         return {
             value: '',
             code: {
-                basic: `<Textarea
+                basic: `
+<Textarea
     v-model="value"
     :pt="{
         root: {
@@ -29,7 +30,8 @@ export default {
         }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Textarea
             v-model="value"
@@ -52,7 +54,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Textarea
             v-model="value"
diff --git a/doc/textarea/theming/TailwindDoc.vue b/doc/textarea/theming/TailwindDoc.vue
index 601c5dde4..bb4b9d52a 100644
--- a/doc/textarea/theming/TailwindDoc.vue
+++ b/doc/textarea/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     textarea: {
         root: ({ context }) => ({
             class: [
@@ -31,7 +30,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" />
     </div>
diff --git a/doc/theming/CSSModulesDoc.vue b/doc/theming/CSSModulesDoc.vue
index f2a209c3b..10ee56357 100644
--- a/doc/theming/CSSModulesDoc.vue
+++ b/doc/theming/CSSModulesDoc.vue
@@ -17,21 +17,22 @@ export default {
     data() {
         return {
             code1: {
-                basic: `<style module>
+                basic: `
+<style module>
 .myinput {
     border-radius: 2rem;
     padding: 1rem 2rem;
     border-width: 2px;
 }
 </style>
-        `
+`
             },
 
             code2: {
-                basic: `<template>
+                basic: `
+<template>
     <InputText :class="$style.myinput" placeholder="Search" />
-</template>
-        `
+</template>`
             }
         };
     }
diff --git a/doc/theming/CustomThemeDoc.vue b/doc/theming/CustomThemeDoc.vue
index 713a9ceaa..0f5fecf13 100644
--- a/doc/theming/CustomThemeDoc.vue
+++ b/doc/theming/CustomThemeDoc.vue
@@ -59,7 +59,8 @@ sass --update themes/mytheme/theme.scss:themes/mytheme/theme.css
         `
             },
             code2: {
-                basic: `import './assets/theme.css';
+                basic: `
+import './assets/theme.css';
         `
             }
         };
diff --git a/doc/theming/PrimeFlexDoc.vue b/doc/theming/PrimeFlexDoc.vue
index 4ae0c78af..ea7acf932 100644
--- a/doc/theming/PrimeFlexDoc.vue
+++ b/doc/theming/PrimeFlexDoc.vue
@@ -21,7 +21,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div class="flex flex-column md:flex-row md:justify-content-between row-gap-3">
+                basic: `
+<div class="flex flex-column md:flex-row md:justify-content-between row-gap-3">
     <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>
diff --git a/doc/theming/ScaleDoc.vue b/doc/theming/ScaleDoc.vue
index b8483e059..b7a3d45f9 100644
--- a/doc/theming/ScaleDoc.vue
+++ b/doc/theming/ScaleDoc.vue
@@ -13,9 +13,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `html {
+                basic: `
+html {
     font-size: 14px;
-}`
+}
+`
             }
         };
     }
diff --git a/doc/theming/ScopedCSSDoc.vue b/doc/theming/ScopedCSSDoc.vue
index 95cf5acda..91477b2e5 100644
--- a/doc/theming/ScopedCSSDoc.vue
+++ b/doc/theming/ScopedCSSDoc.vue
@@ -19,7 +19,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `<style scoped>
+                basic: `
+<style scoped>
 :deep(.p-panel .p-panel-header) {
     background-color: var(--teal-500);
     border-color: var(--teal-500);
@@ -34,7 +35,8 @@ export default {
             },
 
             code2: {
-                basic: `<template>
+                basic: `
+<template>
     <Panel header="Scoped Panel">
         <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.
diff --git a/doc/theming/SwitchThemesDoc.vue b/doc/theming/SwitchThemesDoc.vue
index 95e6e6bf8..5e6db2b2c 100644
--- a/doc/theming/SwitchThemesDoc.vue
+++ b/doc/theming/SwitchThemesDoc.vue
@@ -46,8 +46,7 @@ PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {}
         `
             },
             code4: {
-                basic: `<link id="theme-link" rel="stylesheet" href="/themes/lara-light-blue/theme.css">
-        `
+                basic: `<link id="theme-link" rel="stylesheet" href="/themes/lara-light-blue/theme.css">`
             },
             code5: {
                 basic: `
diff --git a/doc/tieredmenu/BasicDoc.vue b/doc/tieredmenu/BasicDoc.vue
index e5c67b971..8c268968b 100644
--- a/doc/tieredmenu/BasicDoc.vue
+++ b/doc/tieredmenu/BasicDoc.vue
@@ -139,8 +139,10 @@ export default {
                 }
             ],
             code: {
-                basic: `<TieredMenu :model="items" />`,
-                options: `<template>
+                basic: `
+<TieredMenu :model="items" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <TieredMenu :model="items" />
     </div>
@@ -280,7 +282,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <TieredMenu :model="items" />
     </div>
diff --git a/doc/tieredmenu/ImportDoc.vue b/doc/tieredmenu/ImportDoc.vue
index 3dfc9c36c..543685554 100644
--- a/doc/tieredmenu/ImportDoc.vue
+++ b/doc/tieredmenu/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import TieredMenu from 'primevue/tieredmenu';`
+                basic: `
+import TieredMenu from 'primevue/tieredmenu';
+`
             }
         };
     }
diff --git a/doc/tieredmenu/PopupDoc.vue b/doc/tieredmenu/PopupDoc.vue
index 8b3aa8001..09ac06b34 100644
--- a/doc/tieredmenu/PopupDoc.vue
+++ b/doc/tieredmenu/PopupDoc.vue
@@ -140,9 +140,11 @@ export default {
                 }
             ],
             code: {
-                basic: `<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
+                basic: `
+<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
 <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
         <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
@@ -288,7 +290,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
         <TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />
diff --git a/doc/tieredmenu/RouterDoc.vue b/doc/tieredmenu/RouterDoc.vue
index 597c49be1..26f955dd4 100644
--- a/doc/tieredmenu/RouterDoc.vue
+++ b/doc/tieredmenu/RouterDoc.vue
@@ -161,8 +161,10 @@ export default {
                 }
             ],
             code: {
-                basic: `<TieredMenu :model="items" />`,
-                options: `<template>
+                basic: `
+<TieredMenu :model="items" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <TieredMenu :model="items" />
     </div>
@@ -307,7 +309,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <TieredMenu :model="items" />
     </div>
diff --git a/doc/tieredmenu/pt/PTDoc.vue b/doc/tieredmenu/pt/PTDoc.vue
index 80987ec1a..45cf18d0d 100644
--- a/doc/tieredmenu/pt/PTDoc.vue
+++ b/doc/tieredmenu/pt/PTDoc.vue
@@ -144,7 +144,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<TieredMenu
+                basic: `
+<TieredMenu
     :model="items"
     :pt="{
         action: ({ props, state, context }) => ({
@@ -152,7 +153,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <TieredMenu
             :model="items"
@@ -299,7 +301,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <TieredMenu
             :model="items"
diff --git a/doc/tieredmenu/theming/TailwindDoc.vue b/doc/tieredmenu/theming/TailwindDoc.vue
index 60ebcd873..6c71cc8b9 100644
--- a/doc/tieredmenu/theming/TailwindDoc.vue
+++ b/doc/tieredmenu/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -68,7 +67,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <TieredMenu :model="items" />
     </div>
diff --git a/doc/timeline/AlignmentDoc.vue b/doc/timeline/AlignmentDoc.vue
index c7a1c2c0e..e08df8ba4 100644
--- a/doc/timeline/AlignmentDoc.vue
+++ b/doc/timeline/AlignmentDoc.vue
@@ -35,7 +35,8 @@ export default {
                 { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
             ],
             code: {
-                basic: `<Timeline :value="events" class="w-full md:w-20rem">
+                basic: `
+<Timeline :value="events" class="w-full md:w-20rem">
     <template #content="slotProps">
         {{ slotProps.item.status }}
     </template>
@@ -52,7 +53,8 @@ export default {
         {{ slotProps.item.status }}
     </template>
 </Timeline>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap gap-6">
         <Timeline :value="events" class="w-full md:w-20rem">
             <template #content="slotProps">
@@ -88,7 +90,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-6">
         <Timeline :value="events" class="w-full md:w-20rem">
             <template #content="slotProps">
diff --git a/doc/timeline/BasicDoc.vue b/doc/timeline/BasicDoc.vue
index d6eab2b27..72950c920 100644
--- a/doc/timeline/BasicDoc.vue
+++ b/doc/timeline/BasicDoc.vue
@@ -23,12 +23,14 @@ export default {
                 { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
             ],
             code: {
-                basic: `<Timeline :value="events">
+                basic: `
+<Timeline :value="events">
     <template #content="slotProps">
         {{ slotProps.item.status }}
     </template>
 </Timeline>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Timeline :value="events">
             <template #content="slotProps">
@@ -52,7 +54,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Timeline :value="events">
             <template #content="slotProps">
diff --git a/doc/timeline/HorizontalDoc.vue b/doc/timeline/HorizontalDoc.vue
index 600a1bb2c..4e77afb35 100644
--- a/doc/timeline/HorizontalDoc.vue
+++ b/doc/timeline/HorizontalDoc.vue
@@ -31,7 +31,8 @@ export default {
         return {
             events: ['2020', '2021', '2022', '2023'],
             code: {
-                basic: `<Timeline :value="events" layout="horizontal" align="top">
+                basic: `
+<Timeline :value="events" layout="horizontal" align="top">
     <template #content="slotProps">
         {{ slotProps.item }}
     </template>
@@ -49,7 +50,8 @@ export default {
         {{ slotProps.item }}
     </template>
 </Timeline>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column gap-3">
         <Timeline :value="events" layout="horizontal" align="top">
             <template #content="slotProps">
@@ -81,7 +83,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column gap-3">
         <Timeline :value="events" layout="horizontal" align="top">
             <template #content="slotProps">
diff --git a/doc/timeline/ImportDoc.vue b/doc/timeline/ImportDoc.vue
index 73957ebe1..62ef958f6 100644
--- a/doc/timeline/ImportDoc.vue
+++ b/doc/timeline/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Timeline from 'primevue/timeline';`
+                basic: `
+import Timeline from 'primevue/timeline';
+`
             }
         };
     }
diff --git a/doc/timeline/OppositeDoc.vue b/doc/timeline/OppositeDoc.vue
index 267d29409..5f199d950 100644
--- a/doc/timeline/OppositeDoc.vue
+++ b/doc/timeline/OppositeDoc.vue
@@ -26,7 +26,8 @@ export default {
                 { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
             ],
             code: {
-                basic: `<Timeline :value="events">
+                basic: `
+<Timeline :value="events">
     <template #opposite="slotProps">
         <small class="p-text-secondary">{{slotProps.item.date}}</small>
     </template>
@@ -34,7 +35,8 @@ export default {
         {{slotProps.item.status}}
     </template>
 </Timeline>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Timeline :value="events">
             <template #opposite="slotProps">
@@ -61,7 +63,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Timeline :value="events">
             <template #opposite="slotProps">
diff --git a/doc/timeline/TemplateDoc.vue b/doc/timeline/TemplateDoc.vue
index 7ae7a6cac..8c1dc7488 100644
--- a/doc/timeline/TemplateDoc.vue
+++ b/doc/timeline/TemplateDoc.vue
@@ -43,7 +43,8 @@ export default {
                 { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
             ],
             code: {
-                basic: `<Timeline :value="events" align="alternate" class="customized-timeline">
+                basic: `
+<Timeline :value="events" align="alternate" class="customized-timeline">
     <template #marker="slotProps">
         <span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" :style="{ backgroundColor: slotProps.item.color }">
             <i :class="slotProps.item.icon"></i>
@@ -68,7 +69,8 @@ export default {
         </Card>
     </template>
 </Timeline>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Timeline :value="events" align="alternate" class="customized-timeline">
             <template #marker="slotProps">
@@ -134,7 +136,8 @@ export default {
     }
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Timeline :value="events" align="alternate" class="customized-timeline">
             <template #marker="slotProps">
diff --git a/doc/timeline/pt/PTDoc.vue b/doc/timeline/pt/PTDoc.vue
index fcd83985e..ce52d4123 100644
--- a/doc/timeline/pt/PTDoc.vue
+++ b/doc/timeline/pt/PTDoc.vue
@@ -26,7 +26,8 @@ export default {
                 { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
             ],
             code: {
-                basic: `<Timeline
+                basic: `
+<Timeline
     :value="events"
     :pt="{
         marker: { class: 'border-orange-400' }
@@ -36,7 +37,8 @@ export default {
         {{ slotProps.item.status }}
     </template>
 </Timeline>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Timeline
             :value="events"
@@ -65,7 +67,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Timeline
             :value="events"
diff --git a/doc/timeline/theming/TailwindDoc.vue b/doc/timeline/theming/TailwindDoc.vue
index 093960e42..51bd0f368 100644
--- a/doc/timeline/theming/TailwindDoc.vue
+++ b/doc/timeline/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     timeline: {
         root: ({ props }) => ({
             class: [
@@ -91,7 +90,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap gap-6">
         <Timeline :value="events" class="w-full md:w-80">
             <template #content="slotProps">
diff --git a/doc/toast/AccessibilityDoc.vue b/doc/toast/AccessibilityDoc.vue
index 25ef9ebb4..8f0ccab7b 100644
--- a/doc/toast/AccessibilityDoc.vue
+++ b/doc/toast/AccessibilityDoc.vue
@@ -41,14 +41,16 @@ export default {
     data() {
         return {
             code1: {
-                basic: `<ConfirmDialog id="confirm" />
+                basic: `
+<ConfirmDialog id="confirm" />
 
 <Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
 
 `
             },
             code2: {
-                basic: `<script setup>
+                basic: `
+<script setup>
 const confirm = useConfirm();
 const isVisible = ref(false);
 
diff --git a/doc/toast/BasicDoc.vue b/doc/toast/BasicDoc.vue
index 06cf12cde..1d605388c 100644
--- a/doc/toast/BasicDoc.vue
+++ b/doc/toast/BasicDoc.vue
@@ -16,9 +16,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Toast />
+                basic: `
+<Toast />
 <Button label="Show" @click="show()" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Button label="Show" @click="show()" />
@@ -34,7 +36,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Button label="Show" @click="show()" />
diff --git a/doc/toast/ImportDoc.vue b/doc/toast/ImportDoc.vue
index 5eddeb789..f0ab4ccb9 100644
--- a/doc/toast/ImportDoc.vue
+++ b/doc/toast/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Toast from 'primevue/toast';`
+                basic: `
+import Toast from 'primevue/toast';
+`
             }
         };
     }
diff --git a/doc/toast/MultipleDoc.vue b/doc/toast/MultipleDoc.vue
index 1106faaad..d0dc27623 100644
--- a/doc/toast/MultipleDoc.vue
+++ b/doc/toast/MultipleDoc.vue
@@ -16,12 +16,14 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Toast />
+                basic: `
+<Toast />
 <div class="flex flex-wrap gap-2">
     <Button label="Multiple" severity="warning" @click="showMultiple()" />
     <Button label="Clear" @click="clear()" />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
@@ -46,7 +48,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
diff --git a/doc/toast/PositionDoc.vue b/doc/toast/PositionDoc.vue
index 1a30a4a83..15b8cedc4 100644
--- a/doc/toast/PositionDoc.vue
+++ b/doc/toast/PositionDoc.vue
@@ -17,7 +17,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Toast position="top-left" group="tl" />
+                basic: `
+<Toast position="top-left" group="tl" />
 <Toast position="bottom-left" group="bl" />
 <Toast position="bottom-right" group="br" />
 
@@ -26,7 +27,8 @@ export default {
     <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
     <Button label="Bottom Right" severity="success" @click="showBottomRight" />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast position="top-left" group="tl" />
         <Toast position="bottom-left" group="bl" />
@@ -55,7 +57,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast position="top-left" group="tl" />
         <Toast position="bottom-left" group="bl" />
diff --git a/doc/toast/SeverityDoc.vue b/doc/toast/SeverityDoc.vue
index f65cd1834..327443c65 100644
--- a/doc/toast/SeverityDoc.vue
+++ b/doc/toast/SeverityDoc.vue
@@ -18,14 +18,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Toast />
+                basic: `
+<Toast />
 <div class="flex flex-wrap gap-2">
     <Button label="Success" severity="success" @click="showSuccess" />
     <Button label="Info" severity="info" @click="showInfo" />
     <Button label="Warn" severity="warning" @click="showWarn" />
     <Button label="Error" severity="danger" @click="showError" />
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
@@ -55,7 +57,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
diff --git a/doc/toast/StickyDoc.vue b/doc/toast/StickyDoc.vue
index 62e7c6361..3797a91d6 100644
--- a/doc/toast/StickyDoc.vue
+++ b/doc/toast/StickyDoc.vue
@@ -13,9 +13,11 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Toast />
+                basic: `
+<Toast />
 <Button @click="showSticky" label="Sticky" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Button @click="showSticky" label="Sticky" />
@@ -31,7 +33,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Button @click="showSticky" label="Sticky" />
diff --git a/doc/toast/TemplateDoc.vue b/doc/toast/TemplateDoc.vue
index 423e229c9..4cad53d9b 100644
--- a/doc/toast/TemplateDoc.vue
+++ b/doc/toast/TemplateDoc.vue
@@ -27,7 +27,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Toast position="bottom-center" group="bc">
+                basic: `
+<Toast position="bottom-center" group="bc">
     <template #message="slotProps">
         <div class="flex flex-column align-items-center" style="flex: 1">
             <div class="text-center">
@@ -42,7 +43,8 @@ export default {
     </template>
 </Toast>
 <Button @click="showTemplate" label="Confirm" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast position="bottom-center" group="bc">
             <template #message="slotProps">
@@ -71,7 +73,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast position="bottom-center" group="bc">
             <template #message="slotProps">
diff --git a/doc/toast/ToastServiceDoc.vue b/doc/toast/ToastServiceDoc.vue
index ca831156c..1ff9475ba 100644
--- a/doc/toast/ToastServiceDoc.vue
+++ b/doc/toast/ToastServiceDoc.vue
@@ -14,14 +14,16 @@ export default {
     data() {
         return {
             code1: {
-                basic: `import {createApp} from 'vue';
+                basic: `
+import {createApp} from 'vue';
 import ToastService from 'primevue/toastservice';
 
 const app = createApp(App);
 app.use(ToastService);`
             },
             code2: {
-                basic: `import { useToast } from 'primevue/usetoast';
+                basic: `
+import { useToast } from 'primevue/usetoast';
 
 const toast = useToast();`
             }
diff --git a/doc/toast/pt/PTDoc.vue b/doc/toast/pt/PTDoc.vue
index b632b6ef3..89a043eec 100644
--- a/doc/toast/pt/PTDoc.vue
+++ b/doc/toast/pt/PTDoc.vue
@@ -17,14 +17,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Toast
+                basic: `
+<Toast
     group="pt"
     :pt="{
         container: { class: 'bg-yellow-100' }
     }"
 />
 <Button label="Show" @click="show()" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast
             group="pt"
@@ -45,7 +47,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast
             group="pt"
diff --git a/doc/toast/theming/TailwindDoc.vue b/doc/toast/theming/TailwindDoc.vue
index 4a355e969..61e4cf80f 100644
--- a/doc/toast/theming/TailwindDoc.vue
+++ b/doc/toast/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     toast: {
         root: {
             class: ['w-96', 'opacity-90']
@@ -54,7 +53,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
diff --git a/doc/togglebutton/AccessibilityDoc.vue b/doc/togglebutton/AccessibilityDoc.vue
index c5d054652..5b60891f2 100644
--- a/doc/togglebutton/AccessibilityDoc.vue
+++ b/doc/togglebutton/AccessibilityDoc.vue
@@ -39,7 +39,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="rememberme">Remember Me</span>
+                basic: `
+<span id="rememberme">Remember Me</span>
 <ToggleButton aria-labelledby="rememberme" />
 
 <ToggleButton aria-label="Remember Me" />`
diff --git a/doc/togglebutton/BasicDoc.vue b/doc/togglebutton/BasicDoc.vue
index b101ad878..b1950e185 100644
--- a/doc/togglebutton/BasicDoc.vue
+++ b/doc/togglebutton/BasicDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<ToggleButton v-model="checked" />`,
-                options: `<template>
+                basic: `
+<ToggleButton v-model="checked" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" class="w-8rem" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" class="w-8rem" />
     </div>
diff --git a/doc/togglebutton/CustomizedDoc.vue b/doc/togglebutton/CustomizedDoc.vue
index 46b0f7896..e3e866c90 100644
--- a/doc/togglebutton/CustomizedDoc.vue
+++ b/doc/togglebutton/CustomizedDoc.vue
@@ -14,9 +14,11 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<ToggleButton v-model="checked1" onLabel="I confirm" offLabel="I reject"
+                basic: `
+<ToggleButton v-model="checked1" onLabel="I confirm" offLabel="I reject"
     onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject"
             onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />
@@ -32,7 +34,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject"
             onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />
diff --git a/doc/togglebutton/DisabledDoc.vue b/doc/togglebutton/DisabledDoc.vue
index d707022af..2bd9929a0 100644
--- a/doc/togglebutton/DisabledDoc.vue
+++ b/doc/togglebutton/DisabledDoc.vue
@@ -14,9 +14,11 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
+                basic: `
+<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
     class="w-full sm:w-10rem" aria-label="Confirmation" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
             class="w-full sm:w-10rem" aria-label="Confirmation" />
@@ -32,7 +34,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
             class="w-full sm:w-10rem" aria-label="Confirmation" />
diff --git a/doc/togglebutton/ImportDoc.vue b/doc/togglebutton/ImportDoc.vue
index a535d1525..0bc9c7ed7 100644
--- a/doc/togglebutton/ImportDoc.vue
+++ b/doc/togglebutton/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import ToggleButton from 'primevue/togglebutton';`
+                basic: `
+import ToggleButton from 'primevue/togglebutton';
+`
             }
         };
     }
diff --git a/doc/togglebutton/InvalidDoc.vue b/doc/togglebutton/InvalidDoc.vue
index 427a88d3e..a794086e5 100644
--- a/doc/togglebutton/InvalidDoc.vue
+++ b/doc/togglebutton/InvalidDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             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" />`,
-                options: `<template>
+                basic: `
+<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">
         <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
     </div>
@@ -30,7 +32,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
     </div>
diff --git a/doc/togglebutton/form/VeeValidateDoc.vue b/doc/togglebutton/form/VeeValidateDoc.vue
index eb83a50c2..864d0873f 100644
--- a/doc/togglebutton/form/VeeValidateDoc.vue
+++ b/doc/togglebutton/form/VeeValidateDoc.vue
@@ -42,14 +42,16 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<div class="card flex justify-content-center">
+                basic: `
+<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column gap-2">
         <ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
         <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
@@ -89,7 +91,8 @@ export default {
     },
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column gap-2">
             <ToggleButton v-model="value" :class="['w-8rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" />
diff --git a/doc/togglebutton/pt/PTDoc.vue b/doc/togglebutton/pt/PTDoc.vue
index 55daca9b2..d9f43a558 100644
--- a/doc/togglebutton/pt/PTDoc.vue
+++ b/doc/togglebutton/pt/PTDoc.vue
@@ -19,7 +19,8 @@ export default {
         return {
             checked: false,
             code: {
-                basic: `<ToggleButton
+                basic: `
+<ToggleButton
     v-model="checked"
     :pt="{
         root: {
@@ -27,7 +28,8 @@ export default {
         }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <ToggleButton
             v-model="checked"
@@ -49,7 +51,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <ToggleButton
             v-model="checked"
diff --git a/doc/togglebutton/theming/TailwindDoc.vue b/doc/togglebutton/theming/TailwindDoc.vue
index 4a64a5cae..2bde458d9 100644
--- a/doc/togglebutton/theming/TailwindDoc.vue
+++ b/doc/togglebutton/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     togglebutton: {
         root: ({ props, context }) => ({
             class: [
@@ -49,7 +48,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <ToggleButton v-model="checked" class="w-8rem" />
     </div>
diff --git a/doc/toolbar/BasicDoc.vue b/doc/toolbar/BasicDoc.vue
index 5798791e3..18abf17e3 100644
--- a/doc/toolbar/BasicDoc.vue
+++ b/doc/toolbar/BasicDoc.vue
@@ -50,7 +50,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Toolbar>
+                basic: `
+<Toolbar>
     <template #start>
         <Button label="New" icon="pi pi-plus" class="mr-2" />
         <Button label="Upload" icon="pi pi-upload" severity="success" />
@@ -64,7 +65,8 @@ export default {
         <Button icon="pi pi-times" severity="danger" />
     </template>
 </Toolbar>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Toolbar>
             <template #start>
@@ -115,7 +117,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Toolbar>
             <template #start>
diff --git a/doc/toolbar/ImportDoc.vue b/doc/toolbar/ImportDoc.vue
index aa2c68fba..ba5d2f39b 100644
--- a/doc/toolbar/ImportDoc.vue
+++ b/doc/toolbar/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Toolbar from 'primevue/toolbar';`
+                basic: `
+import Toolbar from 'primevue/toolbar';
+`
             }
         };
     }
diff --git a/doc/toolbar/pt/PTDoc.vue b/doc/toolbar/pt/PTDoc.vue
index 66fa901d9..0ccfd78eb 100644
--- a/doc/toolbar/pt/PTDoc.vue
+++ b/doc/toolbar/pt/PTDoc.vue
@@ -20,7 +20,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<TabView>
+                basic: `
+<TabView>
     <Toolbar
         :pt="{
             root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
@@ -35,7 +36,8 @@ export default {
         </template>
     </Toolbar>
 </TabView>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Toolbar
             :pt="{
@@ -52,7 +54,8 @@ export default {
         </Toolbar>
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Toolbar
             :pt="{
diff --git a/doc/toolbar/theming/TailwindDoc.vue b/doc/toolbar/theming/TailwindDoc.vue
index ae63af77e..907c764a3 100644
--- a/doc/toolbar/theming/TailwindDoc.vue
+++ b/doc/toolbar/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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']
@@ -29,7 +28,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Toolbar>
             <template #start>
diff --git a/doc/tooltip/DelayDoc.vue b/doc/tooltip/DelayDoc.vue
index a25e915ad..e9923ee79 100644
--- a/doc/tooltip/DelayDoc.vue
+++ b/doc/tooltip/DelayDoc.vue
@@ -13,13 +13,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />`,
-                options: `<template>
+                basic: `
+<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>`,
-                composition: `<template>
+                composition: `
+<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>
diff --git a/doc/tooltip/EventDoc.vue b/doc/tooltip/EventDoc.vue
index 37f3dfc3b..773b504b6 100644
--- a/doc/tooltip/EventDoc.vue
+++ b/doc/tooltip/EventDoc.vue
@@ -14,15 +14,18 @@ export default {
     data() {
         return {
             code: {
-                basic: `<InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="Focus" />
+                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" />`,
-                options: `<template>
+                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>`,
-                composition: `<template>
+                composition: `
+<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" />
diff --git a/doc/tooltip/ImportDoc.vue b/doc/tooltip/ImportDoc.vue
index 60d54b980..81a535934 100644
--- a/doc/tooltip/ImportDoc.vue
+++ b/doc/tooltip/ImportDoc.vue
@@ -8,7 +8,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Tooltip from 'primevue/tooltip';
+                basic: `
+import Tooltip from 'primevue/tooltip';
 
 app.directive('tooltip', Tooltip);`
             }
diff --git a/doc/tooltip/PositionDoc.vue b/doc/tooltip/PositionDoc.vue
index 07095b566..1be9ced13 100644
--- a/doc/tooltip/PositionDoc.vue
+++ b/doc/tooltip/PositionDoc.vue
@@ -16,11 +16,13 @@ export default {
     data() {
         return {
             code: {
-                basic: `<InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
+                basic: `
+<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" />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
         <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
@@ -28,7 +30,8 @@ export default {
         <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
     </div>
 </template>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
         <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
diff --git a/doc/tooltip/TemplateDoc.vue b/doc/tooltip/TemplateDoc.vue
index 409af237c..c0c9b8aaf 100644
--- a/doc/tooltip/TemplateDoc.vue
+++ b/doc/tooltip/TemplateDoc.vue
@@ -13,8 +13,10 @@ export default {
     data() {
         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" />`,
-                options: `<template>
+                basic: `
+<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">
         <InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
     </div>
@@ -29,7 +31,8 @@ export default {
     border-right-color: var(--pink-800);
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <InputText v-tooltip.right="{ value: \`<h4 class='text-white'>PrimeVue Rocks!</h4>\`, escape: true, class: 'custom-error' }" type="text" placeholder="Template Tooltip" />
     </div>
diff --git a/doc/tooltip/pt/PTDoc.vue b/doc/tooltip/pt/PTDoc.vue
index 0a0d8cfd5..f36d8a651 100644
--- a/doc/tooltip/pt/PTDoc.vue
+++ b/doc/tooltip/pt/PTDoc.vue
@@ -20,7 +20,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<InputText
+                basic: `
+<InputText
     v-tooltip.right="{
         value: \`PrimeVue Rocks!\`,
         pt: {
diff --git a/doc/tooltip/theming/TailwindDoc.vue b/doc/tooltip/theming/TailwindDoc.vue
index f1c8188a5..81d03ec03 100644
--- a/doc/tooltip/theming/TailwindDoc.vue
+++ b/doc/tooltip/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     directives: {
         tooltip: {
             root: ({ context }) => ({
@@ -48,7 +47,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-center gap-2">
         <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
         <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
diff --git a/doc/tree/BasicDoc.vue b/doc/tree/BasicDoc.vue
index 7591b68be..58cd5f839 100644
--- a/doc/tree/BasicDoc.vue
+++ b/doc/tree/BasicDoc.vue
@@ -15,8 +15,10 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<Tree :value="nodes" class="w-full md:w-30rem"></Tree>`,
-                options: `<template>
+                basic: `
+<Tree :value="nodes" class="w-full md:w-30rem"></Tree>`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" class="w-full md:w-30rem"></Tree>
     </div>
@@ -36,7 +38,8 @@ export default {
     } 
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" class="w-full md:w-30rem"></Tree>
     </div>
diff --git a/doc/tree/ControlledDoc.vue b/doc/tree/ControlledDoc.vue
index cfc83f929..05f5018bb 100644
--- a/doc/tree/ControlledDoc.vue
+++ b/doc/tree/ControlledDoc.vue
@@ -24,12 +24,14 @@ export default {
             nodes: null,
             expandedKeys: {},
             code: {
-                basic: `<div class="flex flex-wrap gap-2 mb-4">
+                basic: `
+<div class="flex flex-wrap gap-2 mb-4">
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column align-items-cente">
         <div class="flex flex-wrap gap-2 mb-4">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
@@ -75,7 +77,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-cente">
         <div class="flex flex-wrap gap-2 mb-4">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
diff --git a/doc/tree/EventsDoc.vue b/doc/tree/EventsDoc.vue
index a61342e5a..4e63827a4 100644
--- a/doc/tree/EventsDoc.vue
+++ b/doc/tree/EventsDoc.vue
@@ -26,9 +26,11 @@ export default {
             nodes: null,
             selectedKey: null,
             code: {
-                basic: `<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" class="w-full md:w-30rem"
+                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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
@@ -64,7 +66,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
diff --git a/doc/tree/FilterDoc.vue b/doc/tree/FilterDoc.vue
index e5dbb7cbc..19773dea6 100644
--- a/doc/tree/FilterDoc.vue
+++ b/doc/tree/FilterDoc.vue
@@ -21,9 +21,11 @@ export default {
             nodes: null,
             expandedKeys: {},
             code: {
-                basic: `<Tree :value="nodes" :filter="true" filterMode="lenient" class="w-full md:w-30rem"></Tree>
+                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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <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>
@@ -65,7 +67,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <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>
diff --git a/doc/tree/ImportDoc.vue b/doc/tree/ImportDoc.vue
index 896ffc747..d61d04a30 100644
--- a/doc/tree/ImportDoc.vue
+++ b/doc/tree/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Tree from 'primevue/tree';`
+                basic: `
+import Tree from 'primevue/tree';
+`
             }
         };
     }
diff --git a/doc/tree/LazyDoc.vue b/doc/tree/LazyDoc.vue
index a08d0931f..327af7a3f 100644
--- a/doc/tree/LazyDoc.vue
+++ b/doc/tree/LazyDoc.vue
@@ -15,8 +15,10 @@ export default {
             nodes: null,
             loading: false,
             code: {
-                basic: `<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>`,
-                options: `<template>
+                basic: `
+<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
     </div>
@@ -85,7 +87,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
     </div>
diff --git a/doc/tree/TemplateDoc.vue b/doc/tree/TemplateDoc.vue
index 3fe6a3512..871ca5a59 100644
--- a/doc/tree/TemplateDoc.vue
+++ b/doc/tree/TemplateDoc.vue
@@ -42,7 +42,8 @@ export default {
                 }
             ],
             code: {
-                basic: `<Tree :value="nodes" class="w-full md:w-30rem">
+                basic: `
+<Tree :value="nodes" class="w-full md:w-30rem">
     <template #default="slotProps">
         <b>{{ slotProps.node.label }}</b>
     </template>
@@ -50,7 +51,8 @@ export default {
         <a :href="slotProps.node.data">{{ slotProps.node.label }}</a>
     </template>
 </Tree>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" class="w-full md:w-30rem">
             <template #default="slotProps">
@@ -93,7 +95,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Tree :value="nodes" class="w-full md:w-30rem">
             <template #default="slotProps">
diff --git a/doc/tree/pt/PTDoc.vue b/doc/tree/pt/PTDoc.vue
index c15664e74..a4a924e6a 100644
--- a/doc/tree/pt/PTDoc.vue
+++ b/doc/tree/pt/PTDoc.vue
@@ -22,7 +22,8 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<Tree
+                basic: `
+<Tree
     :value="nodes"
     :pt="{
         root: { class: 'w-full md:w-30rem' },
@@ -31,7 +32,8 @@ export default {
         })
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Tree
             :value="nodes"
@@ -59,7 +61,8 @@ export default {
     } 
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Tree
             :value="nodes"
diff --git a/doc/tree/selection/CheckboxDoc.vue b/doc/tree/selection/CheckboxDoc.vue
index d76920bd4..46a9fa4c4 100644
--- a/doc/tree/selection/CheckboxDoc.vue
+++ b/doc/tree/selection/CheckboxDoc.vue
@@ -21,8 +21,10 @@ export default {
             nodes: null,
             selectedKey: null,
             code: {
-                basic: `<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>`,
-                options: `<template>
+                basic: `
+<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">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>
@@ -51,7 +53,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-30rem"></Tree>
diff --git a/doc/tree/selection/MultipleDoc.vue b/doc/tree/selection/MultipleDoc.vue
index 7a60c6ca2..ec43b1a61 100644
--- a/doc/tree/selection/MultipleDoc.vue
+++ b/doc/tree/selection/MultipleDoc.vue
@@ -26,9 +26,11 @@ export default {
             nodes: null,
             selectedKey: null,
             code: {
-                basic: `<Tree v-model:selectionKeys="selectedKey" :value="nodes" class="w-full md:w-30rem" 
+                basic: `
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" class="w-full md:w-30rem" 
     selectionMode="multiple" :metaKeySelection="checked"></Tree>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column align-items-center justify-content-center">
         <div class="flex align-items-center mb-4 gap-2">
             <InputSwitch v-model="checked" inputId="input-metakey" />
@@ -54,7 +56,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center justify-content-center">
         <div class="flex align-items-center mb-4 gap-2">
             <InputSwitch v-model="checked" inputId="input-metakey" />
diff --git a/doc/tree/selection/SingleDoc.vue b/doc/tree/selection/SingleDoc.vue
index 62f819bf6..8d6becc80 100644
--- a/doc/tree/selection/SingleDoc.vue
+++ b/doc/tree/selection/SingleDoc.vue
@@ -16,8 +16,10 @@ export default {
             nodes: null,
             selectedKey: null,
             code: {
-                basic: `<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>`,
-                options: `<template>
+                basic: `
+<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">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>
@@ -46,7 +48,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-30rem"></Tree>
diff --git a/doc/tree/theming/TailwindDoc.vue b/doc/tree/theming/TailwindDoc.vue
index 7345e1c56..df373c2fb 100644
--- a/doc/tree/theming/TailwindDoc.vue
+++ b/doc/tree/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVuePrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVuePrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['NodeService']" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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']
@@ -84,7 +83,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
diff --git a/doc/treeselect/AccessibilityDoc.vue b/doc/treeselect/AccessibilityDoc.vue
index 906702890..9119535f0 100644
--- a/doc/treeselect/AccessibilityDoc.vue
+++ b/doc/treeselect/AccessibilityDoc.vue
@@ -96,7 +96,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="dd1">Options</span>
+                basic: `
+<span id="dd1">Options</span>
 <TreeSelect aria-labelledby="dd1" />
 
 <TreeSelect aria-label="Options" />`
diff --git a/doc/treeselect/BasicDoc.vue b/doc/treeselect/BasicDoc.vue
index ff4d20894..95540a7fd 100644
--- a/doc/treeselect/BasicDoc.vue
+++ b/doc/treeselect/BasicDoc.vue
@@ -21,8 +21,10 @@ export default {
             nodes: null,
             selectedValue: null,
             code: {
-                basic: `<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />`,
-                options: `<template>
+                basic: `
+<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
@@ -43,7 +45,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
     </div> 
diff --git a/doc/treeselect/CheckboxDoc.vue b/doc/treeselect/CheckboxDoc.vue
index 69beb7e6e..7bf9cfd2c 100644
--- a/doc/treeselect/CheckboxDoc.vue
+++ b/doc/treeselect/CheckboxDoc.vue
@@ -31,8 +31,10 @@ export default {
 }`
             },
             code: {
-                basic: `<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />`,
-                options: `<template>
+                basic: `
+<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">
         <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
@@ -53,7 +55,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
diff --git a/doc/treeselect/DisabledDoc.vue b/doc/treeselect/DisabledDoc.vue
index a8e278373..9d871f9f8 100644
--- a/doc/treeselect/DisabledDoc.vue
+++ b/doc/treeselect/DisabledDoc.vue
@@ -16,8 +16,10 @@ export default {
             nodes: null,
             selectedValue: null,
             code: {
-                basic: `<TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />`,
-                options: `<template>
+                basic: `
+<TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />`,
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
@@ -38,7 +40,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" disabled class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
diff --git a/doc/treeselect/FloatLabelDoc.vue b/doc/treeselect/FloatLabelDoc.vue
index 9ee0151ec..b632d5a1c 100644
--- a/doc/treeselect/FloatLabelDoc.vue
+++ b/doc/treeselect/FloatLabelDoc.vue
@@ -20,11 +20,13 @@ export default {
             nodes: null,
             selectedValue: null,
             code: {
-                basic: `<span class="p-float-label">
+                basic: `
+<span class="p-float-label">
     <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
     <label>Tree Select</label>
 </span>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
@@ -48,7 +50,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
             <TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
diff --git a/doc/treeselect/ImportDoc.vue b/doc/treeselect/ImportDoc.vue
index ccffcb56b..cd18f5ae8 100644
--- a/doc/treeselect/ImportDoc.vue
+++ b/doc/treeselect/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import TreeSelect from 'primevue/treeselect';`
+                basic: `
+import TreeSelect from 'primevue/treeselect';
+`
             }
         };
     }
diff --git a/doc/treeselect/InvalidDoc.vue b/doc/treeselect/InvalidDoc.vue
index 847b7ccad..7c5af593e 100644
--- a/doc/treeselect/InvalidDoc.vue
+++ b/doc/treeselect/InvalidDoc.vue
@@ -17,8 +17,10 @@ export default {
             nodes: null,
             selectedValue: null,
             code: {
-                basic: `<TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />`,
-                options: `<template>
+                basic: `
+<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">
         <TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />
     </div>
@@ -39,7 +41,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />
     </div>
diff --git a/doc/treeselect/MultipleDoc.vue b/doc/treeselect/MultipleDoc.vue
index 37e3b4cda..59eaeda46 100644
--- a/doc/treeselect/MultipleDoc.vue
+++ b/doc/treeselect/MultipleDoc.vue
@@ -28,8 +28,10 @@ export default {
 }`
             },
             code: {
-                basic: `<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Item" class="md:w-20rem w-full" />`,
-                options: `<template>
+                basic: `
+<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">
         <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
@@ -50,7 +52,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
diff --git a/doc/treeselect/form/VeeValidateDoc.vue b/doc/treeselect/form/VeeValidateDoc.vue
index 97876e569..43cf9d0f5 100644
--- a/doc/treeselect/form/VeeValidateDoc.vue
+++ b/doc/treeselect/form/VeeValidateDoc.vue
@@ -43,14 +43,16 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<div class="card flex justify-content-center">
+                basic: `
+<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
         <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
         <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
             <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
@@ -99,7 +101,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2 w-full md:w-20rem">
             <TreeSelect v-model="value" :class="['w-full md:w-20rem', { 'p-invalid': errorMessage }]" aria-describedby="text-error" :options="nodes" placeholder="Select Item" />
diff --git a/doc/treeselect/pt/PTDoc.vue b/doc/treeselect/pt/PTDoc.vue
index 850c626e6..53765a3a3 100644
--- a/doc/treeselect/pt/PTDoc.vue
+++ b/doc/treeselect/pt/PTDoc.vue
@@ -26,7 +26,8 @@ export default {
             nodes: null,
             selectedValue: null,
             code: {
-                basic: `<TreeSelect
+                basic: `
+<TreeSelect
     v-model="selectedValue"
     :options="nodes"
     placeholder="Select Item"
@@ -39,7 +40,8 @@ export default {
         }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <TreeSelect
             v-model="selectedValue"
@@ -72,7 +74,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <TreeSelect
             v-model="selectedValue"
diff --git a/doc/treeselect/theming/TailwindDoc.vue b/doc/treeselect/theming/TailwindDoc.vue
index 6e271be03..21b67f620 100644
--- a/doc/treeselect/theming/TailwindDoc.vue
+++ b/doc/treeselect/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['NodeService']" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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',
@@ -119,7 +118,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-center">
         <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
     </div> 
diff --git a/doc/treetable/BasicDoc.vue b/doc/treetable/BasicDoc.vue
index 5d91f336a..4cfe9343c 100644
--- a/doc/treetable/BasicDoc.vue
+++ b/doc/treetable/BasicDoc.vue
@@ -20,12 +20,14 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes">
+                basic: `
+<TreeTable :value="nodes">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column field="name" header="Name" expander></Column>
@@ -49,7 +51,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/ColumnToggleDoc.vue b/doc/treetable/ColumnToggleDoc.vue
index a3d1b095a..f049b59f3 100644
--- a/doc/treetable/ColumnToggleDoc.vue
+++ b/doc/treetable/ColumnToggleDoc.vue
@@ -26,7 +26,8 @@ export default {
             selectedColumns: null,
             columns: null,
             code: {
-                basic: `<TreeTable :value="nodes">
+                basic: `
+<TreeTable :value="nodes">
     <template #header>
         <div style="text-align:left">
             <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip"/>
@@ -35,7 +36,8 @@ export default {
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes">
             <template #header>
@@ -78,7 +80,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes">
             <template #header>
diff --git a/doc/treetable/ControlledDoc.vue b/doc/treetable/ControlledDoc.vue
index 13bdf17f4..b4a27a7af 100644
--- a/doc/treetable/ControlledDoc.vue
+++ b/doc/treetable/ControlledDoc.vue
@@ -22,13 +22,15 @@ export default {
             nodes: null,
             expandedKeys: {},
             code: {
-                basic: `<Button @click="toggleApplications" label="Toggle Applications" />
+                basic: `
+<Button @click="toggleApplications" label="Toggle Applications" />
 <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Button @click="toggleApplications" label="Toggle Applications" />
         <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes">
@@ -64,7 +66,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <Button @click="toggleApplications" label="Toggle Applications" />
         <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes">
diff --git a/doc/treetable/DynamicColumnsDoc.vue b/doc/treetable/DynamicColumnsDoc.vue
index 8a0844c89..65f4c7dd9 100644
--- a/doc/treetable/DynamicColumnsDoc.vue
+++ b/doc/treetable/DynamicColumnsDoc.vue
@@ -19,10 +19,12 @@ export default {
             nodes: null,
             columns: null,
             code: {
-                basic: `<TreeTable :value="nodes">
+                basic: `
+<TreeTable :value="nodes">
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
@@ -52,7 +54,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
diff --git a/doc/treetable/FilterDoc.vue b/doc/treetable/FilterDoc.vue
index cbb90f9b5..507501f47 100644
--- a/doc/treetable/FilterDoc.vue
+++ b/doc/treetable/FilterDoc.vue
@@ -53,7 +53,8 @@ export default {
                 { label: 'Strict', value: 'strict' }
             ],
             code: {
-                basic: `<SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
+                basic: `
+<SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
 <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
     <template #header>
         <div class="text-right">
@@ -79,7 +80,8 @@ export default {
         </template>
     </Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex justify-content-center mb-4">
             <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
@@ -132,7 +134,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex justify-content-center mb-4">
             <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
diff --git a/doc/treetable/ImportDoc.vue b/doc/treetable/ImportDoc.vue
index 97ef31218..fbba9dd6c 100644
--- a/doc/treetable/ImportDoc.vue
+++ b/doc/treetable/ImportDoc.vue
@@ -8,8 +8,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `import TreeTable from 'primevue/treetable';
-import Column from 'primevue/column';`
+                basic: `
+import TreeTable from 'primevue/treetable';
+import Column from 'primevue/column';
+`
             }
         };
     }
diff --git a/doc/treetable/LazyLoadDoc.vue b/doc/treetable/LazyLoadDoc.vue
index 42683cda6..168ea202b 100644
--- a/doc/treetable/LazyLoadDoc.vue
+++ b/doc/treetable/LazyLoadDoc.vue
@@ -29,13 +29,15 @@ export default {
             loading: false,
             totalRecords: 0,
             code: {
-                basic: `<TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
+                basic: `
+<TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
     @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
             @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
@@ -134,7 +136,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div>
         <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
             @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
diff --git a/doc/treetable/ResponsiveDoc.vue b/doc/treetable/ResponsiveDoc.vue
index 92f59e0cc..1a5a98759 100644
--- a/doc/treetable/ResponsiveDoc.vue
+++ b/doc/treetable/ResponsiveDoc.vue
@@ -20,12 +20,14 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
+                basic: `
+<TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
             <Column field="name" header="Name" expander></Column>
@@ -49,7 +51,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/SizeDoc.vue b/doc/treetable/SizeDoc.vue
index 2e1f19606..98232557e 100644
--- a/doc/treetable/SizeDoc.vue
+++ b/doc/treetable/SizeDoc.vue
@@ -29,12 +29,14 @@ export default {
                 { label: 'Large', value: 'large', class: 'lg' }
             ],
             code: {
-                basic: `<TreeTable :value="nodes" :class="\`p-treetable-\${size.class}\`">
+                basic: `
+<TreeTable :value="nodes" :class="\`p-treetable-\${size.class}\`">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :class="\`p-treetable-\${size.class}\`">
             <Column field="name" header="Name" expander></Column>
@@ -64,7 +66,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :class="\`p-treetable-\${size.class}\`">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/TemplateDoc.vue b/doc/treetable/TemplateDoc.vue
index 277c142b2..0e6f18ae6 100644
--- a/doc/treetable/TemplateDoc.vue
+++ b/doc/treetable/TemplateDoc.vue
@@ -36,7 +36,8 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes">
+                basic: `
+<TreeTable :value="nodes">
     <template #header>
         <div class="text-xl font-bold">File Viewer</div>
     </template>
@@ -57,7 +58,8 @@ export default {
         </div>
     </template>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes">
             <template #header>
@@ -97,7 +99,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes">
             <template #header>
diff --git a/doc/treetable/paginator/PaginatorBasicDoc.vue b/doc/treetable/paginator/PaginatorBasicDoc.vue
index 6d47f195a..c37acd50d 100644
--- a/doc/treetable/paginator/PaginatorBasicDoc.vue
+++ b/doc/treetable/paginator/PaginatorBasicDoc.vue
@@ -18,12 +18,14 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
+                basic: `
+<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
             <Column field="name" header="Name" expander></Column>
@@ -70,7 +72,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/paginator/PaginatorTemplateDoc.vue b/doc/treetable/paginator/PaginatorTemplateDoc.vue
index caea00b5c..a1c37e192 100644
--- a/doc/treetable/paginator/PaginatorTemplateDoc.vue
+++ b/doc/treetable/paginator/PaginatorTemplateDoc.vue
@@ -34,7 +34,8 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25, 50]"
+                basic: `
+<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25, 50]"
     paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
     currentPageReportTemplate="{first} to {last} of {totalRecords}">
     <template #paginatorstart>
@@ -47,7 +48,8 @@ export default {
         <Button type="button" icon="pi pi-download" text />
     </template>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25, 50]"
             paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
@@ -102,7 +104,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25, 50]"
             paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
diff --git a/doc/treetable/pt/PTDoc.vue b/doc/treetable/pt/PTDoc.vue
index f2c68fba1..4c4fbd477 100644
--- a/doc/treetable/pt/PTDoc.vue
+++ b/doc/treetable/pt/PTDoc.vue
@@ -40,7 +40,8 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes" sortMode="multiple">
+                basic: `
+<TreeTable :value="nodes" sortMode="multiple">
     <Column
         field="name"
         header="Name"
@@ -67,7 +68,8 @@ export default {
         }"
     />
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple">
             <Column
@@ -113,7 +115,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple">
             <Column
diff --git a/doc/treetable/resize/ExpandModeDoc.vue b/doc/treetable/resize/ExpandModeDoc.vue
index 69af972c1..db00ee5dd 100644
--- a/doc/treetable/resize/ExpandModeDoc.vue
+++ b/doc/treetable/resize/ExpandModeDoc.vue
@@ -20,12 +20,14 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+                basic: `
+<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
             <Column field="name" header="Name" expander></Column>
@@ -49,7 +51,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/resize/FitModeDoc.vue b/doc/treetable/resize/FitModeDoc.vue
index ad7b08c18..27aa61e69 100644
--- a/doc/treetable/resize/FitModeDoc.vue
+++ b/doc/treetable/resize/FitModeDoc.vue
@@ -23,12 +23,14 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+                basic: `
+<TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
             <Column field="name" header="Name" expander></Column>
@@ -52,7 +54,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/scroll/FlexibleScrollDoc.vue b/doc/treetable/scroll/FlexibleScrollDoc.vue
index 8359f87bf..19d4c095d 100644
--- a/doc/treetable/scroll/FlexibleScrollDoc.vue
+++ b/doc/treetable/scroll/FlexibleScrollDoc.vue
@@ -31,7 +31,8 @@ export default {
             nodes: null,
             dialogVisible: false,
             code: {
-                basic: `<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
     <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
         <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
@@ -42,7 +43,8 @@ export default {
         <Button label="Ok" icon="pi pi-check" @click="dialogVisible = false" />
     </template>
 </Dialog>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
         <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
@@ -73,7 +75,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
         <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
diff --git a/doc/treetable/scroll/FrozenColumnsDoc.vue b/doc/treetable/scroll/FrozenColumnsDoc.vue
index ba6849152..882b0ac55 100644
--- a/doc/treetable/scroll/FrozenColumnsDoc.vue
+++ b/doc/treetable/scroll/FrozenColumnsDoc.vue
@@ -23,7 +23,8 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+                basic: `
+<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
     <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
     <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
     <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
@@ -31,7 +32,8 @@ export default {
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
             <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
@@ -58,7 +60,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
             <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
diff --git a/doc/treetable/scroll/HorizontalScrollDoc.vue b/doc/treetable/scroll/HorizontalScrollDoc.vue
index e068f8009..59a5af7b0 100644
--- a/doc/treetable/scroll/HorizontalScrollDoc.vue
+++ b/doc/treetable/scroll/HorizontalScrollDoc.vue
@@ -23,7 +23,8 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+                basic: `
+<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
     <Column field="name" header="Name" expander style="width: 250px"></Column>
     <Column field="size" header="Size" style="width: 250px"></Column>
     <Column field="type" header="Type 2" style="width: 250px"></Column>
@@ -31,7 +32,8 @@ export default {
     <Column field="type" header="Type 3" style="width: 250px"></Column>
     <Column field="size" header="Size 3" style="width: 250px"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
             <Column field="name" header="Name" expander style="width: 250px"></Column>
@@ -58,7 +60,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
             <Column field="name" header="Name" expander style="width: 250px"></Column>
diff --git a/doc/treetable/scroll/VerticalScrollDoc.vue b/doc/treetable/scroll/VerticalScrollDoc.vue
index e45fef966..9101f27f3 100644
--- a/doc/treetable/scroll/VerticalScrollDoc.vue
+++ b/doc/treetable/scroll/VerticalScrollDoc.vue
@@ -20,12 +20,14 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes" scrollable scrollHeight="200px">
+                basic: `
+<TreeTable :value="nodes" scrollable scrollHeight="200px">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px">
             <Column field="name" header="Name" expander></Column>
@@ -49,7 +51,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" scrollable scrollHeight="200px">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/selection/CheckboxRowSelectionDoc.vue b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
index 09dc1b1c3..6bcd249dd 100644
--- a/doc/treetable/selection/CheckboxRowSelectionDoc.vue
+++ b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
@@ -32,12 +32,14 @@ export default {
 }`
             },
             code: {
-                basic: `<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
+                basic: `
+<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
             <Column field="name" header="Name" expander></Column>
@@ -62,7 +64,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
             <Column field="name" header="Name" expander></Column>
diff --git a/doc/treetable/selection/MultipleRowsSelectionDoc.vue b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
index f7f87df67..3d07eb0bd 100644
--- a/doc/treetable/selection/MultipleRowsSelectionDoc.vue
+++ b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
@@ -30,14 +30,16 @@ export default {
             selectedKey: null,
             metaKey: true,
             code: {
-                basic: `<InputSwitch v-model="metaKey" inputId="input-metakey" />
+                basic: `
+<InputSwitch v-model="metaKey" inputId="input-metakey" />
 
 <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
@@ -67,7 +69,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
diff --git a/doc/treetable/selection/RowSelectionEventsDoc.vue b/doc/treetable/selection/RowSelectionEventsDoc.vue
index d0c909b89..0f7dc5715 100644
--- a/doc/treetable/selection/RowSelectionEventsDoc.vue
+++ b/doc/treetable/selection/RowSelectionEventsDoc.vue
@@ -21,13 +21,15 @@ export default {
             nodes: null,
             selectedKey: null,
             code: {
-                basic: `<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
+                basic: `
+<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
     @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
             @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect">
@@ -62,7 +64,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
             @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect">
diff --git a/doc/treetable/selection/SingleRowSelectionDoc.vue b/doc/treetable/selection/SingleRowSelectionDoc.vue
index 444c44bb3..e1f18238b 100644
--- a/doc/treetable/selection/SingleRowSelectionDoc.vue
+++ b/doc/treetable/selection/SingleRowSelectionDoc.vue
@@ -30,14 +30,16 @@ export default {
             selectedKey: null,
             metaKey: true,
             code: {
-                basic: `<InputSwitch v-model="metaKey" inputId="input-metakey" />
+                basic: `
+<InputSwitch v-model="metaKey" inputId="input-metakey" />
 
 <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
@@ -67,7 +69,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <div class="flex justify-content-center align-items-center mb-4 gap-2">
             <InputSwitch v-model="metaKey" inputId="input-metakey" />
diff --git a/doc/treetable/sort/MultipleColumnsDoc.vue b/doc/treetable/sort/MultipleColumnsDoc.vue
index 163e5d88c..4a7a9de81 100644
--- a/doc/treetable/sort/MultipleColumnsDoc.vue
+++ b/doc/treetable/sort/MultipleColumnsDoc.vue
@@ -20,12 +20,14 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes" sortMode="multiple">
+                basic: `
+<TreeTable :value="nodes" sortMode="multiple">
     <Column field="name" header="Name" sortable expander></Column>
     <Column field="size" header="Size" sortable></Column>
     <Column field="type" header="Type" sortable></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple">
             <Column field="name" header="Name" sortable expander></Column>
@@ -49,7 +51,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple">
             <Column field="name" header="Name" sortable expander></Column>
diff --git a/doc/treetable/sort/RemovableSortDoc.vue b/doc/treetable/sort/RemovableSortDoc.vue
index 1d8e2f0aa..de78b710c 100644
--- a/doc/treetable/sort/RemovableSortDoc.vue
+++ b/doc/treetable/sort/RemovableSortDoc.vue
@@ -20,12 +20,14 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes" sortMode="multiple" removableSort>
+                basic: `
+<TreeTable :value="nodes" sortMode="multiple" removableSort>
     <Column field="name" header="Name" sortable expander></Column>
     <Column field="size" header="Size" sortable></Column>
     <Column field="type" header="Type" sortable></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple" removableSort>
             <Column field="name" header="Name" sortable expander></Column>
@@ -49,7 +51,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes" sortMode="multiple" removableSort>
             <Column field="name" header="Name" sortable expander></Column>
diff --git a/doc/treetable/sort/SingleColumnDoc.vue b/doc/treetable/sort/SingleColumnDoc.vue
index 7c459da3c..537a02bab 100644
--- a/doc/treetable/sort/SingleColumnDoc.vue
+++ b/doc/treetable/sort/SingleColumnDoc.vue
@@ -20,12 +20,14 @@ export default {
         return {
             nodes: null,
             code: {
-                basic: `<TreeTable :value="nodes">
+                basic: `
+<TreeTable :value="nodes">
     <Column field="name" header="Name" sortable expander></Column>
     <Column field="size" header="Size" sortable></Column>
     <Column field="type" header="Type" sortable></Column>
 </TreeTable>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column field="name" header="Name" sortable expander></Column>
@@ -49,7 +51,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column field="name" header="Name" sortable expander></Column>
diff --git a/doc/treetable/theming/TailwindDoc.vue b/doc/treetable/theming/TailwindDoc.vue
index 8634ed7e4..7f549e387 100644
--- a/doc/treetable/theming/TailwindDoc.vue
+++ b/doc/treetable/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" :service="['NodeService']" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ export default {
     data() {
         return {
             code1: {
-                basic: `
-export default {
+                basic: `export default {
     treetable: {
         root: ({ props }) => ({
             class: [
@@ -173,7 +172,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card">
         <TreeTable :value="nodes">
             <Column field="name" header="Name" sortable expander></Column>
diff --git a/doc/tristatecheckbox/AccessibilityDoc.vue b/doc/tristatecheckbox/AccessibilityDoc.vue
index 8eb02c649..e9fe89c12 100644
--- a/doc/tristatecheckbox/AccessibilityDoc.vue
+++ b/doc/tristatecheckbox/AccessibilityDoc.vue
@@ -41,7 +41,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<span id="chkbox1">Remember Me</span>
+                basic: `
+<span id="chkbox1">Remember Me</span>
 <TriStateCheckbox aria-labelledby="chkbox1" />
 
 <TriStateCheckbox aria-label="Remember Me" />`
diff --git a/doc/tristatecheckbox/BasicDoc.vue b/doc/tristatecheckbox/BasicDoc.vue
index e6c991d69..1dab637d0 100644
--- a/doc/tristatecheckbox/BasicDoc.vue
+++ b/doc/tristatecheckbox/BasicDoc.vue
@@ -15,8 +15,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<TriStateCheckbox v-model="value" />`,
-                options: `<template>
+                basic: `
+<TriStateCheckbox v-model="value" />`,
+                options: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
@@ -32,7 +34,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
diff --git a/doc/tristatecheckbox/DisabledDoc.vue b/doc/tristatecheckbox/DisabledDoc.vue
index 6520e65cc..d22b718ec 100644
--- a/doc/tristatecheckbox/DisabledDoc.vue
+++ b/doc/tristatecheckbox/DisabledDoc.vue
@@ -14,8 +14,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<TriStateCheckbox v-model="value" />`,
-                options: `<template>
+                basic: `
+<TriStateCheckbox v-model="value" />`,
+                options: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" disabled />
     </div>  
@@ -30,7 +32,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" disabled />
     </div>  
diff --git a/doc/tristatecheckbox/ImportDoc.vue b/doc/tristatecheckbox/ImportDoc.vue
index 41eb9a191..b886b01b9 100644
--- a/doc/tristatecheckbox/ImportDoc.vue
+++ b/doc/tristatecheckbox/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import TriStateCheckbox from 'primevue/tristatecheckbox';`
+                basic: `
+import TriStateCheckbox from 'primevue/tristatecheckbox';
+`
             }
         };
     }
diff --git a/doc/tristatecheckbox/InvalidDoc.vue b/doc/tristatecheckbox/InvalidDoc.vue
index 9445ec8b8..b5b59e56d 100644
--- a/doc/tristatecheckbox/InvalidDoc.vue
+++ b/doc/tristatecheckbox/InvalidDoc.vue
@@ -15,8 +15,10 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<TriStateCheckbox v-model="value" class="p-invalid" />`,
-                options: `<template>
+                basic: `
+<TriStateCheckbox v-model="value" class="p-invalid" />`,
+                options: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" class="p-invalid" />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
@@ -32,7 +34,8 @@ export default {
   }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" class="p-invalid" />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
diff --git a/doc/tristatecheckbox/form/VeeValidateDoc.vue b/doc/tristatecheckbox/form/VeeValidateDoc.vue
index f06efce0f..cb451ec12 100644
--- a/doc/tristatecheckbox/form/VeeValidateDoc.vue
+++ b/doc/tristatecheckbox/form/VeeValidateDoc.vue
@@ -43,7 +43,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<div class="card flex justify-content-center">
+                basic: `
+<div class="card flex justify-content-center">
     <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
         <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
         <div>* I've read and accept the terms & conditions.</div>
@@ -51,7 +52,8 @@ export default {
         <Button type="submit" label="Submit" />
     </form>
 </div>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
@@ -91,7 +93,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
             <TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
diff --git a/doc/tristatecheckbox/pt/PTDoc.vue b/doc/tristatecheckbox/pt/PTDoc.vue
index 772aa9eed..2cd927ad4 100644
--- a/doc/tristatecheckbox/pt/PTDoc.vue
+++ b/doc/tristatecheckbox/pt/PTDoc.vue
@@ -20,7 +20,8 @@ export default {
         return {
             value: null,
             code: {
-                basic: `<TriStateCheckbox
+                basic: `
+<TriStateCheckbox
     v-model="value"
     :pt="{
         checkbox: {
@@ -28,7 +29,8 @@ export default {
         }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox
             v-model="value"
@@ -51,7 +53,8 @@ export default {
     }
 }
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-column align-items-center gap-3">
         <TriStateCheckbox
             v-model="value"
diff --git a/doc/tristatecheckbox/theming/TailwindDoc.vue b/doc/tristatecheckbox/theming/TailwindDoc.vue
index 8ea5437d8..f01dc997d 100644
--- a/doc/tristatecheckbox/theming/TailwindDoc.vue
+++ b/doc/tristatecheckbox/theming/TailwindDoc.vue
@@ -4,7 +4,7 @@
             PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
             <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
         <p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
         <DocSectionCode :code="code2" embedded />
     </DocSectionText>
@@ -15,8 +15,7 @@ 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']
@@ -40,7 +39,8 @@ export default {
 `
             },
             code2: {
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-col items-center">
         <TriStateCheckbox v-model="value" />
         <label for="checkbox" class="text-gray-700 dark:text-white/80 mt-1">{{ value == null ? 'null' : value }}</label>
diff --git a/doc/unocss/SetupDoc.vue b/doc/unocss/SetupDoc.vue
index b4441c429..bfd4fb64c 100644
--- a/doc/unocss/SetupDoc.vue
+++ b/doc/unocss/SetupDoc.vue
@@ -17,7 +17,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `import { defineConfig } from 'vite'
+                basic: `
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import UnoCSS from 'unocss/vite'
 import presetUno from '@unocss/preset-uno'
diff --git a/doc/unstyled/ExampleDoc.vue b/doc/unstyled/ExampleDoc.vue
index 95072ed30..21d17dff2 100644
--- a/doc/unstyled/ExampleDoc.vue
+++ b/doc/unstyled/ExampleDoc.vue
@@ -25,14 +25,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Check" icon="pi pi-check" unstyled
+                basic: `
+<Button label="Check" icon="pi pi-check" unstyled
     :pt="{
         root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
         label: { class: 'text-white font-bold text-xl' },
         icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
     }"
 />`,
-                options: `<template>
+                options: `
+<template>
     <div class="card">
         <Button label="Check" icon="pi pi-check" unstyled
             :pt="{
@@ -46,7 +48,8 @@ export default {
 
 <script>
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <Button label="Check" icon="pi pi-check" unstyled
         :pt="{
             root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
diff --git a/doc/unstyled/SetupDoc.vue b/doc/unstyled/SetupDoc.vue
index a57886e1b..c2f46bd5a 100644
--- a/doc/unstyled/SetupDoc.vue
+++ b/doc/unstyled/SetupDoc.vue
@@ -15,15 +15,17 @@ export default {
     data() {
         return {
             code1: {
-                basic: `import { createApp } from "vue";
+                basic: `
+import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, { unstyled: true });`
+app.use(PrimeVue, { unstyled: true });
+`
             },
             code2: {
-                basic: `<Button label="Check" icon="pi pi-check" unstyled></Button>
-`
+                basic: `
+<Button label="Check" icon="pi pi-check" unstyled></Button>`
             }
         };
     }
diff --git a/doc/unstyled/ThemeDoc.vue b/doc/unstyled/ThemeDoc.vue
index cbd82284c..c8492860e 100644
--- a/doc/unstyled/ThemeDoc.vue
+++ b/doc/unstyled/ThemeDoc.vue
@@ -14,7 +14,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `import { createApp } from "vue";
+                basic: `
+import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 const app = createApp(App);
 
@@ -32,7 +33,8 @@ app.use(PrimeVue, {
             toggler: 'bg-primary hover:bg-primary-reverse'
         }
     } 
-});`
+});
+`
             }
         };
     }
diff --git a/doc/virtualscroller/BasicDoc.vue b/doc/virtualscroller/BasicDoc.vue
index 9cdf9f3f9..bc731f1c0 100644
--- a/doc/virtualscroller/BasicDoc.vue
+++ b/doc/virtualscroller/BasicDoc.vue
@@ -21,12 +21,14 @@ export default {
         return {
             items: null,
             code: {
-                basic: `<VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `
+<VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
@@ -48,7 +50,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
diff --git a/doc/virtualscroller/DelayDoc.vue b/doc/virtualscroller/DelayDoc.vue
index 45d7cfe55..0234f5b65 100644
--- a/doc/virtualscroller/DelayDoc.vue
+++ b/doc/virtualscroller/DelayDoc.vue
@@ -37,7 +37,8 @@ export default {
         return {
             items: null,
             code: {
-                basic: `<VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `
+<VirtualScroller :items="items" :itemSize="50" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
@@ -54,7 +55,8 @@ export default {
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <div>
             <span class="font-bold block mb-2">No Delay</span>
@@ -95,7 +97,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <div>
             <span class="font-bold block mb-2">No Delay</span>
diff --git a/doc/virtualscroller/GridDoc.vue b/doc/virtualscroller/GridDoc.vue
index 9b0c6ed02..07ff425c0 100644
--- a/doc/virtualscroller/GridDoc.vue
+++ b/doc/virtualscroller/GridDoc.vue
@@ -22,7 +22,8 @@ export default {
         return {
             items: null,
             code: {
-                basic: `<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `
+<VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
             <template v-for="(el, index) of item" :key="index">
@@ -31,7 +32,8 @@ export default {
         </div>
     </template>
 </VirtualScroller>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
@@ -57,7 +59,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
diff --git a/doc/virtualscroller/HorizontalDoc.vue b/doc/virtualscroller/HorizontalDoc.vue
index 15abd20fc..35e3ef48e 100644
--- a/doc/virtualscroller/HorizontalDoc.vue
+++ b/doc/virtualscroller/HorizontalDoc.vue
@@ -18,12 +18,14 @@ export default {
         return {
             items: null,
             code: {
-                basic: `<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `
+<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
@@ -54,7 +56,8 @@ export default {
     }
 }
 </style>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
diff --git a/doc/virtualscroller/ImportDoc.vue b/doc/virtualscroller/ImportDoc.vue
index 04ff0feae..88b9b3465 100644
--- a/doc/virtualscroller/ImportDoc.vue
+++ b/doc/virtualscroller/ImportDoc.vue
@@ -8,7 +8,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `import VirtualScroller from 'primevue/virtualscroller';`
+                basic: `
+import VirtualScroller from 'primevue/virtualscroller';
+`
             }
         };
     }
diff --git a/doc/virtualscroller/LazyDoc.vue b/doc/virtualscroller/LazyDoc.vue
index d7e55e835..06d07f4be 100644
--- a/doc/virtualscroller/LazyDoc.vue
+++ b/doc/virtualscroller/LazyDoc.vue
@@ -23,12 +23,14 @@ export default {
             lazyLoading: false,
             loadLazyTimeout: null,
             code: {
-                basic: `<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `
+<VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <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>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
@@ -75,7 +77,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
diff --git a/doc/virtualscroller/LoadingDoc.vue b/doc/virtualscroller/LoadingDoc.vue
index 0d9751142..44520ffa0 100644
--- a/doc/virtualscroller/LoadingDoc.vue
+++ b/doc/virtualscroller/LoadingDoc.vue
@@ -37,7 +37,8 @@ export default {
         return {
             items: null,
             code: {
-                basic: `<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+                basic: `
+<VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
@@ -53,7 +54,8 @@ export default {
         </div>
     </template>
 </VirtualScroller>`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <div>
             <span class="font-bold block mb-2">Modal</span>
@@ -91,7 +93,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex flex-wrap justify-content-center gap-5">
         <div>
             <span class="font-bold block mb-2">Modal</span>
diff --git a/doc/virtualscroller/pt/PTDoc.vue b/doc/virtualscroller/pt/PTDoc.vue
index 1c66816ad..a80a89575 100644
--- a/doc/virtualscroller/pt/PTDoc.vue
+++ b/doc/virtualscroller/pt/PTDoc.vue
@@ -25,7 +25,8 @@ export default {
         return {
             items: null,
             code: {
-                basic: `<VirtualScroller
+                basic: `
+<VirtualScroller
     :items="items"
     :itemSize="50"
     :pt="{
@@ -35,7 +36,8 @@ export default {
         }
     }"
 >`,
-                options: `<template>
+                options: `
+<template>
     <div class="card flex justify-content-center">
         <VirtualScroller
             :items="items"
@@ -62,7 +64,8 @@ export default {
     }
 };
 <\/script>`,
-                composition: `<template>
+                composition: `
+<template>
     <div class="card flex justify-content-center">
         <VirtualScroller
             :items="items"