Code representation style fixes

components/doc/DocSectionCode.vue

@@ -1,6 +1,6 @@
 <template>
-    <div v-if="!embedded" class="surface-card mb-4" style="border-radius: 10px">
+    <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 sticky z-1 top-0 mr-3">
+        <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() {

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">

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" />

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">

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">

doc/accordion/ImportDoc.vue

@@ -8,8 +8,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Accordion from 'primevue/accordion';
+                basic: `
-import AccordionTab from 'primevue/accordiontab';`
+import Accordion from 'primevue/accordion';
+import AccordionTab from 'primevue/accordiontab';
+`
             }
         };
     }

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">

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>

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"

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">

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>

doc/autocomplete/BasicDoc.vue

@@ -15,8 +15,10 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `<AutoComplete v-model="value" :suggestions="items" @complete="search" />`,
+                basic: `
-                options: `<template>
+<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>

doc/autocomplete/DisabledDoc.vue

@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<AutoComplete disabled placeholder="Disabled" />`,
+                basic: `
-                options: `<template>
+<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>

doc/autocomplete/DropdownDoc.vue

@@ -18,8 +18,10 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />`,
+                basic: `
-                options: `<template>
+<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>

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" />

doc/autocomplete/ForceSelectionDoc.vue

@@ -18,8 +18,10 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />`,
+                basic: `
-                options: `<template>
+<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>

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">

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';
+`
             }
         };
     }

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" />`,
+                basic: `
-                options: `<template>
+<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>

doc/autocomplete/MultipleDoc.vue

@@ -15,8 +15,10 @@ export default {
             value: '',
             items: [],
             code: {
-                basic: `<AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />`,
+                basic: `
-                options: `<template>
+<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>

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" />`,
+                basic: `
-                options: `<template>
+<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>

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">

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>

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>

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"

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: `
+                basic: `export const TRANSITIONS = {
-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>

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" />

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">

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">

doc/avatar/ImportDoc.vue

@@ -8,8 +8,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `import Avatar from 'primevue/avatar';
+                basic: `
-import AvatarGroup from 'primevue/avatargroup';   //Optional for grouping`
+import Avatar from 'primevue/avatar';
+import AvatarGroup from 'primevue/avatargroup';   //Optional for grouping
+`
             }
         };
     }

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>

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' }

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: `
+                basic: `export default {
-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>

doc/badge/BasicDoc.vue

@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Badge value="2"></Badge>`,
+                basic: `
-                options: `<template>
+<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>

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" />

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);
+`
             }
         };
     }

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" />

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>

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>

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

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: `
+                basic: `export default {
-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>

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>

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" />

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';
+`
             }
         };
     }

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.

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: `
+                basic: `export default {
-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>

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" />`,
+                basic: `
-                options: `<template>
+<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>

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';
+`
             }
         };
     }

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 }">

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}">

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="{

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: `
+                basic: `export default {
-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>

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" />
 

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 />

doc/button/BasicDoc.vue

@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Submit" />`,
+                basic: `
-                options: `<template>
+<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>

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" />

doc/button/DisabledDoc.vue

@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Submit" disabled />`,
+                basic: `
-                options: `<template>
+<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>

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" />

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" />

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';
+`
             }
         };
     }

doc/button/LinkDoc.vue

@@ -13,8 +13,10 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Button label="Link" link />`,
+                basic: `
-                options: `<template>
+<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>

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" />`,
+                basic: `
-                options: `<template>
+<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>

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 />

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 />

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 />

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 />

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" />

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" />

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" />

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 />

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="{ 

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: `
+                basic: `export default {
-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" />

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>

doc/calendar/BasicDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" />`,
+                basic: `
-                options: `<template>
+<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>

doc/calendar/ButtonBarDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" showButtonBar />`,
+                basic: `
-                options: `<template>
+<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>

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">

doc/calendar/DisabledDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" disabled />`,
+                basic: `
-                options: `<template>
+<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>

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" />

doc/calendar/FormatDoc.vue

@@ -33,8 +33,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" dateFormat="dd/mm/yy" />`,
+                basic: `
-                options: `<template>
+<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>

doc/calendar/IconDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" showIcon />`,
+                basic: `
-                options: `<template>
+<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>

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';
+`
             }
         };
     }

doc/calendar/InlineDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" inline showWeek />`,
+                basic: `
-                options: `<template>
+<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>

doc/calendar/InvalidDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" class="p-invalid" />`,
+                basic: `
-                options: `<template>
+<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>

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" />`,
+                basic: `
-                options: `<template>
+<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>

doc/calendar/MonthPickerDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" view="month" dateFormat="mm/yy" />`,
+                basic: `
-                options: `<template>
+<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>

doc/calendar/MultipleDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             dates: null,
             code: {
-                basic: `<Calendar v-model="dates" selectionMode="multiple" :manualInput="false" />`,
+                basic: `
-                options: `<template>
+<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>

doc/calendar/MultipleMonthsDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" :numberOfMonths="2" />`,
+                basic: `
-                options: `<template>
+<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>

doc/calendar/RangeDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             dates: null,
             code: {
-                basic: `<Calendar v-model="dates" selectionMode="range" :manualInput="false" />`,
+                basic: `
-                options: `<template>
+<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>

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>

doc/calendar/TouchUIDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" touchUI />`,
+                basic: `
-                options: `<template>
+<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>

doc/calendar/YearPickerDoc.vue

@@ -14,8 +14,10 @@ export default {
         return {
             date: null,
             code: {
-                basic: `<Calendar v-model="date" view="year" dateFormat="yy" />`,
+                basic: `
-                options: `<template>
+<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>

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>

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"

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: `
+                basic: `export const TRANSITIONS = {
-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>

doc/card/AccessibilityDoc.vue

@@ -18,7 +18,8 @@ export default {
     data() {
         return {
             code: {
-                basic: `<Card role="region">
+                basic: `
+<Card role="region">
     Content
 </Card>`
             }

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>

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';
+`
             }
         };
     }

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>

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: `
+                basic: `export default {
-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>

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">