diff --git a/src/views/accordion/AccordionDoc.vue b/src/views/accordion/AccordionDoc.vue
index a276d1546..648f8af63 100755
--- a/src/views/accordion/AccordionDoc.vue
+++ b/src/views/accordion/AccordionDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 
@@ -12,8 +11,7 @@ import AccordionTab from 'primevue/accordiontab';
 
 				<h5>Getting Started</h5>
 				<p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Accordion&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -30,8 +28,7 @@ import AccordionTab from 'primevue/accordiontab';
 
 				<h5>Active</h5>
 				<p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Accordion :activeIndex="0"&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -47,8 +44,7 @@ import AccordionTab from 'primevue/accordiontab';
 </code></pre>
 
 				<p>Two-way binding requires v-model.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Accordion v-model:activeIndex="activeIndex"&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -66,8 +62,7 @@ import AccordionTab from 'primevue/accordiontab';
 				<h5>Multiple</h5>
 				<p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple
 					tabs be active at the same time.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Accordion :multiple="true"&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -84,8 +79,7 @@ import AccordionTab from 'primevue/accordiontab';
 
 				<h5>Disabled</h5>
 				<p>A tab can be disabled by setting the <i>disabled</i> property to true.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Accordion&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -102,8 +96,7 @@ import AccordionTab from 'primevue/accordiontab';
 
 				<h5>Custom Content at Headers</h5>
 				<p>Custom content for the title section of a panel is defined using the header template.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Accordion&gt;
 	&lt;AccordionTab&gt;
 		&lt;template #header&gt;
@@ -132,8 +125,7 @@ import AccordionTab from 'primevue/accordiontab';
 
 				<h5>Programmatic Control</h5>
 				<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button @click="active = 0" class="p-button-text" label="Activate 1st" /&gt;
 &lt;Button @click="active = 1" class="p-button-text" label="Activate 2nd" /&gt;
 &lt;Button @click="active = 2" class="p-button-text" label="Activate 3rd" /&gt;
@@ -152,8 +144,7 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -166,8 +157,7 @@ export default {
 
 				<h5>Dynamic Tabs</h5>
 				<p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Accordion&gt;
 	&lt;AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt;
 		&lt;p&gt;{{tab.content}}&lt;/p&gt;
@@ -176,8 +166,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -322,8 +311,7 @@ export default {
 					</a>
 					<LiveEditor name="AccordionDemo" :sources="sources" :components="['AccordionTab', 'Button']" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Default&lt;/h5&gt;
 &lt;Accordion :activeIndex="0"&gt;
 	&lt;AccordionTab header="Header I"&gt;
@@ -430,8 +418,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -462,8 +449,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .accordion-custom {
 	i, span {
 		vertical-align: middle;
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index e1e34b9c1..5a3047a7a 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import AutoComplete from 'primevue/autocomplete';
 
 </code></pre>
@@ -12,13 +11,11 @@ import AutoComplete from 'primevue/autocomplete';
 				<h5>Getting Started</h5>
 				<p>AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete method
 					gets the query text as event.query property and should update the suggestions with the search results. Example below connects to a remote datasource to fetch the results;</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountry($event)" field="name" /&gt;
 
 </code></pre>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -44,16 +41,14 @@ export default {
 					dropdownMode property that takes "blank" or "current" as possible values.
 					"blank" is the default mode to send a query with an empty string whereas
 					"current" setting sends a query with the current value of the input.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" /&gt;
 
 </code></pre>
 
 				<h5>Multiple Mode</h5>
 				<p>Multiple mode is enabled using <i>multiple</i> property to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" /&gt;
 
 </code></pre>
@@ -62,16 +57,14 @@ export default {
 				<p>AutoComplete can also work with objects using the  <i>field</i> property that defines the label to display
 					as a suggestion. The value passed to the model would still be the object instance of a suggestion.
 					Here is an example with a Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" /&gt;
 
 </code></pre>
 
 				<h5>Templating</h5>
 				<p>Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
 	&lt;template #item="slotProps"&gt;
 		&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
@@ -261,8 +254,7 @@ export default {
                     </a>
                     <LiveEditor name="AutoCompleteDemo" :sources="sources" service="CountryService" data="countries" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
 &lt;AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
 
@@ -283,8 +275,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CountryService from '../../service/CountryService';
 
 export default {
diff --git a/src/views/avatar/AvatarDoc.vue b/src/views/avatar/AvatarDoc.vue
index 78d6a23b3..966af8d02 100644
--- a/src/views/avatar/AvatarDoc.vue
+++ b/src/views/avatar/AvatarDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Avatar from 'primevue/avatar';
 import AvatarGroup from 'primevue/avatargroup';
 
@@ -12,8 +11,7 @@ import AvatarGroup from 'primevue/avatargroup';
 
 				<h5>Getting Started</h5>
 				<p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Avatar label="P" /&gt;
 &lt;Avatar icon="pi pi-search" /&gt;
 &lt;Avatar image="user.png" /&gt;
@@ -22,16 +20,14 @@ import AvatarGroup from 'primevue/avatargroup';
 
 				<h5>Sizes</h5>
 				<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Avatar label="P" size="large"/&gt;
 
 </code></pre>
 
 				<h5>AvatarGroup</h5>
 				<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;AvatarGroup&gt;
 	&lt;Avatar label="P" /&gt;
 	&lt;Avatar icon="pi pi-search" /&gt;
@@ -42,24 +38,21 @@ import AvatarGroup from 'primevue/avatargroup';
 
 				<h5>Shape</h5>
 				<p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Avatar label="P" shape="circle"/&gt;
 
 </code></pre>
 
 				<h5>Badge</h5>
 				<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt;
 
 </code></pre>
 
 				<h5>Templating</h5>
 				<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Avatar&gt;
    Content
 &lt;/Avatar&gt;
@@ -188,8 +181,7 @@ import AvatarGroup from 'primevue/avatargroup';
 					</a>
 					<LiveEditor name="AvatarDemo" :sources="sources" :directives="['Badge']" :components="['AvatarGroup']" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col-12 p-md-4"&gt;
 		&lt;div class="card"&gt;
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
index 5d1a54605..7af21ccb3 100644
--- a/src/views/badge/BadgeDoc.vue
+++ b/src/views/badge/BadgeDoc.vue
@@ -6,29 +6,25 @@
                 <p>Badge can either be used as a standalone component or as a directive.</p>
 
                 <h6>Component</h6>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Badge from 'primevue/badge';
 
 </code></pre>
 
 				<p>Content of the badge is specified using the <i>value</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Badge value="2"&gt;&lt;/Badge&gt;
 
 </code></pre>
 
                 <h6>Directive</h6>
-                <pre v-code.script>
-<code>
+                <pre v-code.script><code>
 import BadgeDirective from 'primevue/badgedirective';
 
 </code></pre>
 
 				<p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import BadgeDirective from 'primevue/badgedirective';
 
 Vue.directive('badge', BadgeDirective);
@@ -36,8 +32,7 @@ Vue.directive('badge', BadgeDirective);
 </code></pre>
 
                 <p>Next step is attaching it to an element.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;i class="pi pi-bell" v-badge="2"&gt;&lt;/i&gt;
 
 </code></pre>
@@ -53,8 +48,7 @@ Vue.directive('badge', BadgeDirective);
 					<li>danger</li>
 				</ul>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Badge value="2" severity="success"&gt;&lt;/Badge&gt;
 
 &lt;i class="pi pi-bell" v-badge.success="2"&gt;&lt;/i&gt;
@@ -64,8 +58,7 @@ Vue.directive('badge', BadgeDirective);
                 <h5>Button Badges</h5>
                 <p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button type="button" label="Emails" badge="8" /&gt;
 &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
 
@@ -74,8 +67,7 @@ Vue.directive('badge', BadgeDirective);
                 <h5>Sizes</h5>
                 <p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently
                 sizes only apply to component mode.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Badge value="2"&gt;&lt;/Badge&gt;
 &lt;Badge value="4" size="large" severity="warning"&gt;&lt;/Badge&gt;
 &lt;Badge value="6" size="xlarge" severity="success"&gt;&lt;/Badge&gt;
@@ -83,8 +75,7 @@ Vue.directive('badge', BadgeDirective);
 </code></pre>
 
                 <p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;h1&gt;Heading 1 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h1&gt;
 &lt;h2&gt;Heading 2 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h2&gt;
 
@@ -187,8 +178,7 @@ Vue.directive('badge', BadgeDirective);
                     </a>
                     <LiveEditor name="BadgeDemo" :sources="sources" :directives="['Badge']" :components="['Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Numbers&lt;/h5&gt;
 &lt;Badge value="2" class="p-mr-2"&gt;&lt;/Badge&gt;
 &lt;Badge value="8" severity="success" class="p-mr-2"&gt;&lt;/Badge&gt;
diff --git a/src/views/blockui/BlockUIDoc.vue b/src/views/blockui/BlockUIDoc.vue
index 3747f5ce1..73df34860 100755
--- a/src/views/blockui/BlockUIDoc.vue
+++ b/src/views/blockui/BlockUIDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import BlockUI from 'primevue/blockui';
 
 </code></pre>
@@ -13,8 +12,7 @@ import BlockUI from 'primevue/blockui';
 				<p>BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked
                     with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.
                 </p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;BlockUI :blocked="blockedPanel"&gt;
     &lt;Panel header="Header"&gt;
         Panel Content
@@ -23,8 +21,7 @@ import BlockUI from 'primevue/blockui';
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -46,8 +43,7 @@ export default {
                 <h5>Full Screen</h5>
                 <p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
 
 </code></pre>
@@ -152,8 +148,7 @@ export default {
                     </a>
                     <LiveEditor name="BlockUIDemo" :sources="sources" :components="['Button', 'Panel']" />
                 </div>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;h3&gt;Document&lt;/h3&gt;
 &lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
 
@@ -174,8 +169,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/breadcrumb/BreadcrumbDoc.vue b/src/views/breadcrumb/BreadcrumbDoc.vue
index f18db0c51..dffdf26ce 100755
--- a/src/views/breadcrumb/BreadcrumbDoc.vue
+++ b/src/views/breadcrumb/BreadcrumbDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Breadcrumb from 'primevue/breadcrumb';
 
 </code></pre>
@@ -14,14 +13,12 @@ import Breadcrumb from 'primevue/breadcrumb';
 
 				<h5>Getting Started</h5>
 				<p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Breadcrumb :home="home" :model="items" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -110,14 +107,12 @@ export default {
                     </a>
                     <LiveEditor name="BreadcrumbDemo" :sources="sources" :router="true" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Breadcrumb :home="home" :model="items" /&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index f98b0963f..89cfcdef4 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -3,40 +3,35 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Button from 'primevue/button';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Button is created using the Button element.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button /&gt;
 
 </code></pre>
 
 				<h5>Label</h5>
 				<p>Text of the button is defined using the <i>label</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button label="Submit" /&gt;
 
 </code></pre>
 				<h5>Icons</h5>
 				<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
 					icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
 
 </code></pre>
 
 				<h5>Events</h5>
 				<p>Events are defined with the standard notation.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button label="Submit" @click="handleClick($event)"/&gt;
 
 </code></pre>
@@ -53,8 +48,7 @@ import Button from 'primevue/button';
 					<li>.p-button-danger</li>
 				</ul>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button label="Primary" /&gt;
 &lt;Button label="Secondary" class="p-button-secondary" /&gt;
 &lt;Button label="Success" class="p-button-success" /&gt;
@@ -68,8 +62,7 @@ import Button from 'primevue/button';
                 <h5>Text Buttons</h5>
 				<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i>
                 text buttons ignore severity levels and displayed as a regular text.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button label="Submit" class="p-button-text" /&gt;
 &lt;Button icon="pi pi-check" class="p-button-text" /&gt;
 &lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
@@ -79,24 +72,21 @@ import Button from 'primevue/button';
 
 				<h5>Raised and Rounded Buttons</h5>
 				<p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button label="Primary" class="p-button-raised p-button-rounded" /&gt;
 
 </code></pre>
 
                 <h5>Outlined Buttons</h5>
                 <p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button label="Primary" class="p-button-outlined" /&gt;
 
 </code></pre>
 
                 <h5>Link Buttons</h5>
                 <p>Use "p-button-link" class to render the button as a link.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button label="Link" class="p-button-link" /&gt;
 
 </code></pre>
@@ -104,8 +94,7 @@ import Button from 'primevue/button';
                 <h5>Badges</h5>
                 <p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button type="button" label="Emails" badge="8" /&gt;
 &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" /&gt;
 
@@ -113,8 +102,7 @@ import Button from 'primevue/button';
 
                 <h5>ButtonSet</h5>
                 <p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;span class="p-buttonset"&gt;
     &lt;Button label="Save" icon="pi pi-check" /&gt;
     &lt;Button label="Delete" icon="pi pi-trash" /&gt;
@@ -126,8 +114,7 @@ import Button from 'primevue/button';
                 <h5>Sizes</h5>
                 <p>2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>.
                 Note that these classes available to change the size of a particular button, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button label="Small" icon="pi pi-check" class="p-button-sm"  /&gt;
 &lt;Button label="Normal" icon="pi pi-check" class="p-button"  /&gt;
 &lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
@@ -136,8 +123,7 @@ import Button from 'primevue/button';
 
                 <h5>Slot</h5>
                 <p>Custom content can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button&gt;
     Custom Content
 &lt;/Button&gt;
@@ -237,8 +223,7 @@ import Button from 'primevue/button';
                     </a>
                     <LiveEditor name="ButtonDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
 &lt;Button label="Submit" /&gt;
 &lt;Button label="Disabled" disabled="disabled" /&gt;
@@ -353,8 +338,7 @@ import Button from 'primevue/button';
 </template>
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 button {
 	margin-right: .5rem;
 }
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index 6918dfd50..0c9383831 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Calendar from 'primevue/calendar';
 
 </code></pre>
@@ -12,14 +11,12 @@ import Calendar from 'primevue/calendar';
                 <h5>Getting Started</h5>
                 <p>Two-way value binding is defined using the standard v-model directive referencing to a Date property.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -32,8 +29,7 @@ export default {
 
                 <h5>Popup and Inline</h5>
                 <p>Calendar is displayed in a popup by default and <i>inline</i> property needs to be enabled for inline mode.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value" :inline="true" /&gt;
 
 </code></pre>
@@ -44,8 +40,7 @@ export default {
                 Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value
                 is the end date.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value" selectionMode="single || multiple || range" /&gt;
 
 </code></pre>
@@ -53,8 +48,7 @@ export default {
                 <h5>DateFormat</h5>
                 <p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <router-link to="/locale">PrimeVue Locale</router-link> globally. Note that standalone property overrides the value in locale settings.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value" dateFormat="dd.mm.yy" /&gt;
 
 </code></pre>
@@ -84,8 +78,7 @@ export default {
                 <p>TimePicker is enabled with <i>showTime</i> property and 24 (default) or 12 hour mode is configured using <i>hourFormat</i> option. If you
                     need to use the time picker as standalone, use the <i>timeOnly</i> property.
                 </p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value" :showTime="true" /&gt;
 &lt;Calendar v-model="value" :showTime="true" hourFormat="12" /&gt;
 &lt;Calendar v-model="value" :showTime="true" :timeOnly="true" /&gt;
@@ -95,31 +88,27 @@ export default {
                 <h5>Date Restriction</h5>
                 <p>To disable entering dates manually, set <i>manualInput</i> to true and to restrict selectable dates with the <i>minDate</i>
                     and <i>maxDate</i> options.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value" :minDate="minDateValue" maxDate="maxDateValue" /&gt;
 
 </code></pre>
 
             <p>To disable specific dates or days, restrict selectable dates use <i>disabledDates</i> and/or <i>disabledDays</i> options.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value" :disabledDates="invalidDates" :disabledDays="[0,6]" /&gt;
 
 </code></pre>
 
                 <h5>Button Bar</h5>
                 <p>Button bar displays today and clear buttons and enabled using <i>showButtonBar</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value" :showButtonBar="true" /&gt;
 
 </code></pre>
 
                 <h5>Multiple Months</h5>
                 <p>Displaying multiple months is enabled by setting <i>numberOfMonths</i> property to a value greater than 1.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value" :numberOfMonths="3" /&gt;
 
 </code></pre>
@@ -130,8 +119,7 @@ export default {
             <h5>Custom Content</h5>
             <p>Calendar UI accepts custom content using header and footer templates.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value"&gt;
     &lt;template #header&gt;Header Content&lt;/template&gt;
     &lt;template #footer&gt;Footer Content&lt;/template&gt;
@@ -143,8 +131,7 @@ export default {
             passed to the template is not a date instance but a metadata object to represent a Date with "day", "month" and "year" properties. Example below
             changes the background color of dates between 10th and 15th of each month.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Calendar v-model="value"&gt;
     &lt;template #date="slotProps"&gt;
         &lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
@@ -154,8 +141,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .special-day {
     text-decoration: line-through;
 }
@@ -164,16 +150,14 @@ export default {
 
                 <h5>Month Picker</h5>
                 <p>Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt;
 
 </code></pre>
 
                 <h5>Touch UI</h5>
                 <p>Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Calendar v-model="value" :touchUI="true" /&gt;
 
 </code></pre>
@@ -552,8 +536,7 @@ export default {
                     </a>
                     <LiveEditor name="CalendarDemo" :sources="sources" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Popup&lt;/h5&gt;
 &lt;div class=" p-fluid p-grid p-formgrid"&gt;
     &lt;div class="p-field p-col-12 p-md-4"&gt;
@@ -628,8 +611,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     created() {
         let today = new Date();
@@ -677,8 +659,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .special-day {
     text-decoration: line-through;
 }
diff --git a/src/views/card/CardDoc.vue b/src/views/card/CardDoc.vue
index 0359b1e78..e388c6adc 100755
--- a/src/views/card/CardDoc.vue
+++ b/src/views/card/CardDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Card from 'primevue/card';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
                 <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Card&gt;
     &lt;template #header&gt;
         &lt;img alt="user header" src="demo/images/usercard.png"&gt;
@@ -78,8 +76,7 @@ import Card from 'primevue/card';
 					</a>
 					<LiveEditor name="CardDemo" :sources="sources" :components="['Button']"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Card style="width: 25rem; margin-bottom: 2em"&gt;
     &lt;template #title&gt;
         Simple Card
diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue
index 75a8fee0b..e6b9ec34d 100755
--- a/src/views/carousel/CarouselDoc.vue
+++ b/src/views/carousel/CarouselDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Carousel from 'primevue/carousel';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Carousel requires a collection of items as its value along with a template to render each item.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Carousel :value="cars"&gt;
     &lt;template #item="slotProps"&gt;
 	&lt;/template&gt;
@@ -22,8 +20,7 @@ import Carousel from 'primevue/carousel';
 
 				<h5>Items per page and Scroll Items</h5>
 				<p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt;
 	&lt;template #item="slotProps"&gt;
 	&lt;/template&gt;
@@ -34,8 +31,7 @@ import Carousel from 'primevue/carousel';
 				<h5>Responsive</h5>
 				<p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of
 					objects whose breakpoint defines the max-width to apply the settings.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
 	&lt;template #header&gt;
 		&lt;h2&gt;Basic&lt;/h2&gt;
@@ -62,8 +58,7 @@ import Carousel from 'primevue/carousel';
 &lt;/Carousel&gt;
 </template>
 </code></pre>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 data() {
 	return {
 		responsiveOptions: [
@@ -91,8 +86,7 @@ data() {
 				<h5>Header and Footer</h5>
 				<p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions"&gt;
 	&lt;template #header&gt;
 		&lt;h2&gt;Custom Header&lt;/h2&gt;
@@ -109,8 +103,7 @@ data() {
 
 				<h5>Orientation</h5>
 				<p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt;
 	&lt;template #item="slotProps"&gt;
 		Content
@@ -121,8 +114,7 @@ data() {
 
 				<h5>AutoPlay and Circular</h5>
 				<p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt;
 	&lt;template #header&gt;
 		&lt;h2&gt;Circular, AutoPlay&lt;/h2&gt;
@@ -280,8 +272,7 @@ data() {
                     </a>
                     <LiveEditor name="CarouselDemo" :sources="sources" service="ProductService" data="products-small" :components="['Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
 &lt;Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
     &lt;template #header&gt;
@@ -365,8 +356,7 @@ data() {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
@@ -403,8 +393,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .product-item {
     .product-item-content {
         border: 1px solid var(--surface-d);
diff --git a/src/views/cascadeselect/CascadeSelectDoc.vue b/src/views/cascadeselect/CascadeSelectDoc.vue
index dac5b5e8f..28c256253 100644
--- a/src/views/cascadeselect/CascadeSelectDoc.vue
+++ b/src/views/cascadeselect/CascadeSelectDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CascadeSelect from 'primevue/cascadeselect';
 
 </code></pre>
@@ -14,15 +13,13 @@ import CascadeSelect from 'primevue/cascadeselect';
                     is used for the text of a category and <i>optionGroupChildren</i> is to define the children of the category. Note that order of the <i>optionGroupChildren</i>
                     matters and it should correspond to the data hierarchy.</p>
                     
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" 
                         :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" &gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 data() {
 	data() &#123;
         return &#123;
@@ -112,8 +109,7 @@ data() {
                 <h5>Templating</h5>
                 <p>Content of an item can be customized with the <i>option</i> template.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" 
         :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt;
     &lt;template #option="slotProps"&gt;
@@ -324,8 +320,7 @@ data() {
                     </a>
                     <LiveEditor name="CascadeSelectDemo" :sources="sources" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
 &lt;CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
         :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" /&gt;
@@ -345,8 +340,7 @@ data() {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default &#123;
     data() &#123;
         return &#123;
diff --git a/src/views/chart/BarChartDoc.vue b/src/views/chart/BarChartDoc.vue
index 034692590..6132b78a9 100755
--- a/src/views/chart/BarChartDoc.vue
+++ b/src/views/chart/BarChartDoc.vue
@@ -5,8 +5,7 @@
 				<div class="p-d-flex">
 					<LiveEditor name="ChartDemo" :sources="sources"  class="p-ml-auto"/>
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Vertical&lt;/h3&gt;
 &lt;Chart type="bar" :data="basicData" /&gt;
 
@@ -21,8 +20,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/chart/ChartDoc.vue b/src/views/chart/ChartDoc.vue
index ab1d9f12d..ab45d4358 100755
--- a/src/views/chart/ChartDoc.vue
+++ b/src/views/chart/ChartDoc.vue
@@ -5,15 +5,13 @@
 
         <h5>Getting Started</h5>
         <p>To begin with, charts.js package needs to be installed in your project.</p>
- <pre v-code.script>
-<code>
+ <pre v-code.script><code>
 npm install chart.js --save
 
 </code></pre>
 
 		<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Chart from 'primevue/chart';
 
 </code></pre>
@@ -23,14 +21,12 @@ import Chart from 'primevue/chart';
 
 		<h5>Data</h5>
 		<p>Data of a chart is provided using a binding to the <i>data</i> property, each type has its own format of data. Here is an example of a line chart.  For more information refer to the <a href="https://www.chartjs.org/">charts.js</a> documentation.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Chart type="bar" :data="basicData" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -58,14 +54,12 @@ export default {
 		<h5>Options</h5>
 		<p>While a series can be customized per dataset, general chart options are defined with options property.
 			Example below adds a title and customizes the legend position of the chart. For all available options refer to the <a href="https://www.chartjs.org/">charts.js</a> documentation.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Chart type="line" :data="data" :options="options" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 options: {
 	responsive: true,
 	hoverMode: 'index',
diff --git a/src/views/chart/ComboChartDoc.vue b/src/views/chart/ComboChartDoc.vue
index 53428774e..92e5ba729 100755
--- a/src/views/chart/ComboChartDoc.vue
+++ b/src/views/chart/ComboChartDoc.vue
@@ -5,14 +5,12 @@
 				<div class="p-d-flex">
 					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto"/>
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Chart type="bar" :data="chartData" :options="chartOptions"/&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/chart/DoughnutChartDoc.vue b/src/views/chart/DoughnutChartDoc.vue
index c4c5a8b90..e056fd73b 100755
--- a/src/views/chart/DoughnutChartDoc.vue
+++ b/src/views/chart/DoughnutChartDoc.vue
@@ -5,14 +5,12 @@
 				<div class="p-d-flex">
 					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Chart type="doughnut" :data="chartData" /&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/chart/LineChartDoc.vue b/src/views/chart/LineChartDoc.vue
index bee253812..12dda48ac 100755
--- a/src/views/chart/LineChartDoc.vue
+++ b/src/views/chart/LineChartDoc.vue
@@ -5,8 +5,7 @@
 				<div class="p-d-flex">
 					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;Chart type="line" :data="basicData" /&gt;
 
@@ -18,8 +17,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/chart/PieChartDoc.vue b/src/views/chart/PieChartDoc.vue
index 95d92cb43..115b5cf37 100755
--- a/src/views/chart/PieChartDoc.vue
+++ b/src/views/chart/PieChartDoc.vue
@@ -5,14 +5,12 @@
 				<div class="p-d-flex">
 					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Chart type="pie" :data="chartData" /&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/chart/PolarAreaChartDoc.vue b/src/views/chart/PolarAreaChartDoc.vue
index 6772589a3..67b5d5cae 100755
--- a/src/views/chart/PolarAreaChartDoc.vue
+++ b/src/views/chart/PolarAreaChartDoc.vue
@@ -5,14 +5,12 @@
 				<div class="p-d-flex">
 					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Chart type="polarArea" :data="chartData" /&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/chart/RadarChartDoc.vue b/src/views/chart/RadarChartDoc.vue
index de6c5383d..dc539258e 100755
--- a/src/views/chart/RadarChartDoc.vue
+++ b/src/views/chart/RadarChartDoc.vue
@@ -5,14 +5,12 @@
 				<div class="p-d-flex">
 					<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Chart type="radar" :data="chartData" /&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index 641a8e88b..5d6ac1da4 100755
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -3,24 +3,21 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Checkbox from 'primevue/checkbox';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Checkbox v-model="checked" :binary="true" /&gt;
 
 </code></pre>
 
 				<h5>Multiple Values</h5>
 				<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Checkbox name="city" value="Chicago" v-model="cities" /&gt;
 &lt;Checkbox name="city" value="Los Angeles" v-model="cities" /&gt;
 &lt;Checkbox name="city" value="New York" v-model="cities" /&gt;
@@ -28,8 +25,7 @@ import Checkbox from 'primevue/checkbox';
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -119,8 +115,7 @@ export default {
                     </a>
                     <LiveEditor name="CheckboxDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;div class="p-field-checkbox"&gt;
     &lt;Checkbox id="binary" v-model="checked" :binary="true" /&gt;
@@ -153,8 +148,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/chip/ChipDoc.vue b/src/views/chip/ChipDoc.vue
index da99bc128..9ea5418f0 100644
--- a/src/views/chip/ChipDoc.vue
+++ b/src/views/chip/ChipDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Chip from 'primevue/chip';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Chip can display labels, icons and images.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Chip label="Text Only" /&gt;
 &lt;Chip label="Text with icon" icon="pi pi-check" /&gt;
 &lt;Chip label="Text with image" image="user.png" /&gt;
@@ -22,16 +20,14 @@ import Chip from 'primevue/chip';
 				<h5>Removable</h5>
 				<p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i>
 				event is available to get notified when a chip is hidden.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Chip label="Text" removable /&gt;
 
 </code></pre>
 
 				<h5>Templating</h5>
 				<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Chip&gt;
    Content
 &lt;/Chip&gt;
@@ -147,8 +143,7 @@ import Chip from 'primevue/chip';
 					</a>
 					<LiveEditor name="ChipDemo" :sources="sources" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
 &lt;div class="p-d-flex p-ai-center"&gt;
 	&lt;Chip label="Action" class="p-mr-2" /&gt;
diff --git a/src/views/chips/ChipsDoc.vue b/src/views/chips/ChipsDoc.vue
index 7e18f4ce7..c4f6cbd20 100755
--- a/src/views/chips/ChipsDoc.vue
+++ b/src/views/chips/ChipsDoc.vue
@@ -3,24 +3,21 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Chips from 'primevue/chips';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>An array as the value can be bound using the standard v-model directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Chips v-model="value" /&gt;
 
 </code></pre>
 
 				<h5>Custom Content</h5>
 				<p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Chips v-model="value"&gt;
 	&lt;template #chip="slotProps"&gt;
 		&lt;div&gt;
@@ -153,8 +150,7 @@ import Chips from 'primevue/chips';
                     </a>
                     <LiveEditor name="ChipsDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
 &lt;Chips v-model="value1" /&gt;
 
@@ -173,8 +169,7 @@ import Chips from 'primevue/chips';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue
index 2d5cc5d27..a7a962d18 100755
--- a/src/views/colorpicker/ColorPickerDoc.vue
+++ b/src/views/colorpicker/ColorPickerDoc.vue
@@ -3,22 +3,19 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ColorPicker from 'primevue/colorpicker';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ColorPicker v-model="color" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -31,8 +28,7 @@ export default {
 
                 <h5>Inline and Overlay</h5>
                 <p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ColorPicker v-model="color" :inline="true" /&gt;
 
 </code></pre>
@@ -174,8 +170,7 @@ export default {
                     </a>
                     <LiveEditor name="ColorPickerDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Inline&lt;/h3&gt;
 &lt;ColorPicker v-model="color1" :inline="true" /&gt;
 
@@ -184,8 +179,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/confirmdialog/ConfirmDialogDoc.vue b/src/views/confirmdialog/ConfirmDialogDoc.vue
index cfd370758..7a6cfdb0e 100644
--- a/src/views/confirmdialog/ConfirmDialogDoc.vue
+++ b/src/views/confirmdialog/ConfirmDialogDoc.vue
@@ -4,8 +4,7 @@
 			<TabPanel header="Documentation">
                 <h5>Mitt EventBus</h5>
                 <p>ConfirmDialog requires <a href="https://www.npmjs.com/package/mitt">Mitt</a>, a tiny 200b EventBus implementation.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 npm install mitt --save
 
 </code></pre>
@@ -13,8 +12,7 @@ npm install mitt --save
                 <h5>ConfirmationService</h5>
                 <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
                     instance is created.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
@@ -24,8 +22,7 @@ app.use(ConfirmationService);
 </code></pre>
 
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ConfirmDialog from 'primevue/confirmdialog';
 
 </code></pre>
@@ -33,15 +30,13 @@ import ConfirmDialog from 'primevue/confirmdialog';
 				<h5>Getting Started</h5>
 				<p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component
                 where it can be shared by any component within the application.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
 
 &lt;Button @click="delete()" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	methods: {
         delete() {
@@ -64,8 +59,7 @@ export default {
 
                 <h5>Composition API</h5>
                 <p>The service can be injected with the <i>useConfirm</i> function.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import { defineComponent } from "vue";
 import { useConfirm } from "primevue/useconfirm";
 
@@ -90,8 +84,7 @@ export default defineComponent({
 
                 <h5>Close Confirmation</h5>
                 <p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	methods: {
         discard() {
@@ -250,8 +243,7 @@ export default {
                     </a>
                     <LiveEditor name="ConfirmDialogDemo" :sources="sources" :confirmationService="true" :toastService="true" :components="['Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
 &lt;ConfirmDialog group="positionDialog"&gt;&lt;/ConfirmDialog&gt;
 
@@ -281,8 +273,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     methods: {
         confirm1() {
diff --git a/src/views/confirmpopup/ConfirmPopupDoc.vue b/src/views/confirmpopup/ConfirmPopupDoc.vue
index 13e0fff82..f843e72f4 100644
--- a/src/views/confirmpopup/ConfirmPopupDoc.vue
+++ b/src/views/confirmpopup/ConfirmPopupDoc.vue
@@ -4,8 +4,7 @@
 			<TabPanel header="Documentation">
                 <h5>Mitt EventBus</h5>
                 <p>ConfirmPopup requires <a href="https://www.npmjs.com/package/mitt">Mitt</a>, a tiny 200b EventBus implementation.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 npm install mitt --save
 
 </code></pre>
@@ -13,8 +12,7 @@ npm install mitt --save
                 <h5>ConfirmationService</h5>
                 <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
                     instance is created.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
@@ -24,8 +22,7 @@ app.use(ConfirmationService);
 </code></pre>
 
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ConfirmPopup from 'primevue/confirmpopup';
 
 </code></pre>
@@ -33,15 +30,13 @@ import ConfirmPopup from 'primevue/confirmpopup';
 				<h5>Getting Started</h5>
 				<p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup.
                 <i>target</i> attribute is mandatory to align the popup to its caller.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
 
 &lt;Button @click="delete($event)" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	methods: {
         delete(event) {
@@ -64,8 +59,7 @@ export default {
 
                 <h5>Composition API</h5>
                 <p>The service can be injected with the <i>useConfirm</i> function.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import { defineComponent } from "vue";
 import { useConfirm } from "primevue/useconfirm";
 
@@ -94,8 +88,7 @@ export default defineComponent({
 
                 <h5>Close Confirmation</h5>
                 <p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	methods: {
         discard() {
@@ -264,8 +257,7 @@ export default {
                     </a>
                     <LiveEditor name="ConfirmPopupDemo" :sources="sources" :confirmationService="true" :toastService="true" :components="['Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
 
 &lt;div class="card"&gt;
@@ -275,8 +267,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     methods: {
         confirm1(event) {
diff --git a/src/views/contextmenu/ContextMenuDoc.vue b/src/views/contextmenu/ContextMenuDoc.vue
index 7315bf854..ebf6ceebd 100755
--- a/src/views/contextmenu/ContextMenuDoc.vue
+++ b/src/views/contextmenu/ContextMenuDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ContextMenu from 'primevue/contextmenu';
 
 </code></pre>
@@ -15,8 +14,7 @@ import ContextMenu from 'primevue/contextmenu';
 				<h5>Getting Started</h5>
 				<p>ContextMenu requires a collection of menuitems as its model.</p>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -159,8 +157,7 @@ export default {
 
                 <h5>Document Menu</h5>
                 <p>Setting global property attaches the context menu to the document.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ContextMenu :global="true" :model="items" /&gt;
 
 </code></pre>
@@ -168,15 +165,13 @@ export default {
                 <h5>Element Menu</h5>
                 <p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
 &lt;ContextMenu ref="menu" :model="items" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -319,15 +314,13 @@ export default {
                </a>
                <LiveEditor name="ContextMenuDemo" :sources="sources" />
             </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true"&gt;
 &lt;ContextMenu ref="menu" :model="items" /&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/datatable/DataTableBasicDemo.vue b/src/views/datatable/DataTableBasicDemo.vue
index 3f0becc21..91c05b462 100755
--- a/src/views/datatable/DataTableBasicDemo.vue
+++ b/src/views/datatable/DataTableBasicDemo.vue
@@ -24,8 +24,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small"/>
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products"&gt;
     &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
     &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@@ -35,8 +34,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableColGroupDemo.vue b/src/views/datatable/DataTableColGroupDemo.vue
index efd74441e..d633d766e 100755
--- a/src/views/datatable/DataTableColGroupDemo.vue
+++ b/src/views/datatable/DataTableColGroupDemo.vue
@@ -64,8 +64,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" :components="['ColumnGroup', 'Row', 'Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="sales"&gt;
     &lt;ColumnGroup type="header"&gt;
         &lt;Row&gt;
@@ -115,8 +114,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/datatable/DataTableColResizeDemo.vue b/src/views/datatable/DataTableColResizeDemo.vue
index a9f6c7dbb..8224f4714 100755
--- a/src/views/datatable/DataTableColResizeDemo.vue
+++ b/src/views/datatable/DataTableColResizeDemo.vue
@@ -36,8 +36,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Fit Mode&lt;/h3&gt;
 &lt;DataTable :value="products" :resizableColumns="true" columnResizeMode="fit" class="p-datatable-gridlines"&gt;
     &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
@@ -56,8 +55,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableColToggleDemo.vue b/src/views/datatable/DataTableColToggleDemo.vue
index 3542d304b..fae63464b 100755
--- a/src/views/datatable/DataTableColToggleDemo.vue
+++ b/src/views/datatable/DataTableColToggleDemo.vue
@@ -28,8 +28,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column', 'MultiSelect']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align:left"&gt;
@@ -43,8 +42,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableContextMenuDemo.vue b/src/views/datatable/DataTableContextMenuDemo.vue
index 2037e3bac..a551dce58 100755
--- a/src/views/datatable/DataTableContextMenuDemo.vue
+++ b/src/views/datatable/DataTableContextMenuDemo.vue
@@ -30,8 +30,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" :toastService="true" service="ProductService" data="products-small" :components="['Column', 'ContextMenu']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu"&gt;
     &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
     &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@@ -47,8 +46,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index d1547427e..40d0e6a78 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -164,8 +164,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" :toastService="true" service="ProductService" data="products" :components="['Column', 'Toolbar', 'Button', 'FileUpload', 'InputText', 'Rating', 'Dialog', 'RadioButton', 'Textarea', 'InputNumber', 'Dropdown']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;Toolbar class="p-mb-4"&gt;
         &lt;template #left&gt;
@@ -314,8 +313,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index fc254a7f8..ef4a47a6f 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-				<pre v-code.script>
-<code>
+				<pre v-code.script><code>
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import ColumnGroup from 'primevue/columngroup';     //optional for column grouping
@@ -15,8 +14,7 @@ import ColumnGroup from 'primevue/columngroup';     //optional for column groupi
                 <p>DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the datatable.
                     Cars are loaded by a CarService that connects to a server to fetch the cars with a axios. Note that this is only for demo purposes, DataTable does not have any restrictions on how the data is provided.</p>
 
-                <pre v-code.script>
-<code>
+                <pre v-code.script><code>
 import axios from 'axios'
 
 export default class CarService {
@@ -37,8 +35,7 @@ export default class CarService {
 </code></pre>
 
                 <p>Example response;</p>
-                <pre v-code.script>
-<code>
+                <pre v-code.script><code>
 {
     "data": [
         {"brand": "Volkswagen", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
@@ -57,8 +54,7 @@ export default class CarService {
 </code></pre>
 
                 <p>Following sample datatable has 4 columns and retrieves the data from a service on mount.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -68,8 +64,7 @@ export default class CarService {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -91,16 +86,14 @@ export default {
 
                 <h5>Dynamic Columns</h5>
                 <p>Column components can be dynamically generated using a v-for as well.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars"&gt;
     &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -321,8 +314,7 @@ export default {
                 <p>Field data of a corresponding row is displayed as the cell content by default, this can be customized using a <i>body</i> template where current row data and column properties are passed via the slot props.
                     On the other hand, <i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly DataTable itself also provides header and footer properties along with the templates for the main header and footer of the table.</p>
 
-                <pre v-code>
-<code><template v-pre>
+                <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars"&gt;
     &lt;template #header&gt;
         &lt;div&gt;
@@ -358,8 +350,7 @@ export default {
                 <p>In addition to the regular table, a smal and a large version are available with different paddings. For a table
                 with smaller paddings use <i>p-datatable-sm</i> class and for a larger one use <i>p-datatable-lg</i>.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" class="p-datatable-sm"&gt;
     &lt;template #header&gt;
         Small Table
@@ -394,8 +385,7 @@ export default {
 
                 <h5>Column Grouping</h5>
                 <p>Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="sales"&gt;
     &lt;ColumnGroup type="header"&gt;
         &lt;Row&gt;
@@ -434,8 +424,7 @@ export default {
                     See the <router-link to="/paginator">Paginator</router-link> for the available customization options such as paginator templates, page links,
                     rows per page options and more which can be passed through the DataTable.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -446,8 +435,7 @@ export default {
 </code></pre>
 
                 <p>paginatorLeft and paginatorLeft templates are available to specify custom content at the left and right side.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -466,8 +454,7 @@ export default {
                 <p>Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the
                 first element to display. For example setting first to zero will reset the paginator to the very first page. This property
                 also supports v-model in case you'd like your binding to be updated whenever the user changes the page.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10" :first="firstRecordIndex"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -481,8 +468,7 @@ export default {
                 <p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable.
                 The property to use when sorting is the <i>field</i> by default and can be customized using the <i>sortField</i>.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@@ -493,8 +479,7 @@ export default {
 </code></pre>
 
                 <p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" sortMode="multiple"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@@ -506,8 +491,7 @@ export default {
 
                 <p>In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These
                 two properties also support the v-model directive to get updated when the user applies sort a column.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" sortField="year" :sortOrder="1"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@@ -525,8 +509,7 @@ export default {
 </code></pre>
 
                 <p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" sortMode="multiple" :multiSortMeta="multiSortMeta"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@@ -536,8 +519,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 data() {
     return {
         multiSortMeta: [
@@ -555,8 +537,7 @@ data() {
                 via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the <i>filterMatchMode</i> property that also accepts
                 "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom" as available modes.</p>
                 <p>Optionally a global filter is available to search against all the fields, in this case the special <i>global</i> keyword should be the property to be populated.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :filters="filters" :paginator="true" :rows="10"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align: right"&gt;
@@ -596,8 +577,7 @@ data() {
 </code></pre>
 
                 <p>Custom filtering is implemented by setting the filterMatchMode to "custom" and defining a filter function.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Column field="vin" header="Vin" filterMatchMode="myOwnEquals"&gt;
         &lt;template #filter&gt;
             &lt;InputText type="text" v-model="filters['vin']" class="p-column-filter" /&gt;
@@ -606,8 +586,7 @@ data() {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 methods: {
     myOwnEquals(value, filter) {
         if (filter === undefined || filter === null || (typeof filter === 'string' &amp;&amp; filter.trim() === '')) {
@@ -633,8 +612,7 @@ methods: {
 
                 <p>In single mode, selection binding is an object reference.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" v-model:selection="selectedCar" selectionMode="single" dataKey="vin"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -645,8 +623,7 @@ methods: {
 </code></pre>
 
                 <p>In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" v-model:selection="selectedCars" selectionMode="multiple" dataKey="vin"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -657,8 +634,7 @@ methods: {
 </code></pre>
 
                 <p>If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox to toggle selection of all rows.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" v-model:selection="selectedCars" selectionMode="multiple" dataKey="vin"&gt;
     &lt;Column selectionMode="multiple"&gt;&lt;/Column&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -671,8 +647,7 @@ methods: {
 
                 <h5>Scrolling</h5>
                 <p>DataTable supports both horizontal and vertical scrolling as well as frozen columns and rows. Scrollable DataTable is enabled using <i>scrollable</i> property and <i>scrollHeight</i> to define the viewport height.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -684,8 +659,7 @@ methods: {
 
                 <h5>Flex Scroll</h5>
                 <p>In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically responds to the dialog size changes such as maximizing.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
 &lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
     &lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
@@ -704,8 +678,7 @@ methods: {
 
                 <h5>Full Page Scroll</h5>
                 <p>FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the Full Page demo for an example.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div style="height: calc(100vh - 143px)"&gt;
     &lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
         &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -719,8 +692,7 @@ methods: {
 
                 <h5>Horizontal Scrolling</h5>
                 <p>In horizontal scrolling, it is required to give fixed widths to columns. In general when customizing the column widths of scrollable tables, use colgroup as below to avoid misalignment issues as it will apply both the header, body and footer sections which are different separate elements internally.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px"&gt;
     &lt;Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"&gt;&lt;/Column&gt;
@@ -736,8 +708,7 @@ methods: {
 
                 <h5>Frozen Rows and Columns</h5>
                 <p>Certain columns can be frozen by using the <i>frozen</i> property of the column component. Widths of the frozen section is specified by the <i>frozenWidth</i> property.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading"&gt;
     &lt;Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true"&gt;
         &lt;template #body="slotProps"&gt;
@@ -758,8 +729,7 @@ methods: {
 </code></pre>
 
             <p>Note that frozen columns are enabled, frozen and scrollable cells may have content with varying height which leads to misalignment. Provide fixed height to cells to avoid alignment issues.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading"&gt;
     &lt;Column field="vin" header="Vin" headerStyle="width: 300px" bodyStyle="height: 25px" columnKey="vin" :frozen="true"&gt;
         &lt;template #body="slotProps"&gt;
@@ -774,8 +744,7 @@ methods: {
 </code></pre>
 
             <p>One or more rows can be displayed as fixed using the <i>frozenValue</i> property.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -792,8 +761,7 @@ methods: {
             For smooth scrolling twice the amount of rows property is loaded on a lazy load event. In addition, to avoid performance problems row height is not calculated automatically and
             should be provided using <i>virtualRowHeight</i> property which defaults to 28px. View the <router-link to="/datatable/scroll">scrolling demo</router-link> for a sample in-memory implementation.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20"
     :virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords"&gt;
     &lt;Column field="vin" header="Vin"&gt;
@@ -820,8 +788,7 @@ methods: {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -863,8 +830,7 @@ export default {
                 in lazy filtering, totalRecords should also be updated to align the data with the paginator.</p>
 
                 <p>Here is a sample paging implementation with in memory data, a more enhanced example with a backend is being worked on and will be available at a github repository.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
     :totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -875,8 +841,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -922,8 +887,7 @@ export default {
                 <p>Rows can be expanded to display additional content using the <i>expandedRows</i> property with the v-model directive accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks that are invoked when a row is expanded or toggled.</p>
 
                 <p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory in row expansion functionality however being able to define it increases the performance of the table signifantly.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" v-model:expandedRows="expandedRows" dataKey="vin"
     @row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt;
     &lt;template #header&gt;
@@ -955,8 +919,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1001,8 +964,7 @@ export default {
                 <p>Individuals cell editing is configured by setting the <i>editMode</i> to "cell" and defining editors with the "editor" template. The content of the
                 editor defines how the editing is implemented, below example demonstrates two cases. In the first example, simple v-model editors are utilized. This is pretty straightforward in most cases.
                 On the other hand, second example is more advanced to consider validations and ability to revert values with the escape key.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic Cell Editing&lt;/h3&gt;
 &lt;p&gt;Simple editors with v-model.&lt;/p&gt;
 &lt;DataTable :value="cars1" editMode="cell"&gt;
@@ -1047,8 +1009,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 import Vue from 'vue';
 
@@ -1136,8 +1097,7 @@ export default {
 
                 <p>Row Editing is defined by setting <i>cellEdit</i> as "row", defining <i>editingRows</i> with the v-model directive to hold the reference to the editing rows and adding a row editor column to provide the editing controls. Note that
                 since <i>editingRows</i> is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row editing.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Row Editing&lt;/h3&gt;
 &lt;DataTable :value="cars" editMode="row" dataKey="vin" v-model:editingRows="editingRows"
     @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel"&gt;
@@ -1162,8 +1122,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 import Vue from 'vue';
 
@@ -1199,8 +1158,7 @@ export default {
                 <h5>Column Resize</h5>
                 <p>Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
                     In "expand" mode, table width also changes along with the column width. <i>column-resize-end</i> is a callback that passes the resized column header and delta change as a parameter.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -1211,8 +1169,7 @@ export default {
 </code></pre>
 
             <p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt;
     &lt;Column field="vin" header="Vin" headerStyle="width: 20%"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" headerStyle="width: 40%"&gt;&lt;/Column&gt;
@@ -1225,8 +1182,7 @@ export default {
                 <h5>Column Reorder</h5>
                 <p>Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using keys that identifies a column using the field property. If the column has no field, use columnKey instead as
                 it is mandatory for columns to have unique keys when reordering is enabled.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :reorderableColumns="true"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -1238,8 +1194,7 @@ export default {
 
                 <h5>Row Reorder</h5>
                 <p>Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle along with the <i>row-order</i> event which is <b>mandatory</b> to update the new order. Note that the reorder icon can be customized using <i>rowReorderIcon</i> of the column component.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" @row-reorder="onRowReorder"&gt;
     &lt;Column :rowReorder="true" headerStyle="width: 3em" /&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -1250,8 +1205,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1284,8 +1238,7 @@ export default {
 
                 <p>Example below demonstrates the all grouping alternatives. Note that data needs to be sorted for grouping which can also be done by the table itself by speficying the sort properties.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Subheader Grouping&lt;/h3&gt;
 &lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
     sortMode="single" sortField="brand" :sortOrder="1"&gt;
@@ -1339,8 +1292,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1384,8 +1336,7 @@ export default {
 
                 <h5>Data Export</h5>
                 <p>DataTable can export its data in CSV format using <i>exportCSV()</i> method.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" ref="dt"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align: left"&gt;
@@ -1400,8 +1351,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1431,8 +1381,7 @@ export default {
                     Enabling state is easy as defining a unique <i>stateKey</i>, the storage to keep the state is defined with the <i>stateStorage</i> property that accepts session for sessionStorage and local for localStorage.
                     Currently following features are supported by TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
                 </p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10" v-model:filters="filters"
     stateStorage="session" stateKey="dt-state-demo-session"
     v-model:selection="selectedCar" selectionMode="single" dataKey="vin"&gt;
@@ -1476,8 +1425,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1523,8 +1471,7 @@ export default {
 
                 <h5>ContextMenu</h5>
                 <p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" contextMenu v-model:contextMenuSelection="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -1536,8 +1483,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1577,8 +1523,7 @@ export default {
 
                 <h5>Empty Message</h5>
                 <p>When there is no data, you may use the <i>empty</i> template to display a message.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars"&gt;
     &lt;template #empty&gt;
         No records found
@@ -1594,8 +1539,7 @@ export default {
                 <h5>Loading</h5>
                 <p>A loading status indicator can be displayed when the <i>loading</i> property is enabled. The icon is customized through <i>loadingIcon</i> property. Additionally
                 an option loading template is available to render as the body until the data is loaded.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :loading="loading"&gt;
      &lt;template #loading&gt;
         Loading records, please wait...
@@ -1608,8 +1552,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1638,8 +1581,7 @@ export default {
 
                 <h5>Responsive</h5>
                 <p>DataTable display can be optimized according to screen sizes, this example demonstrates a sample demo where columns are stacked on small screens.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" class="p-datatable-responsive-demo"&gt;
     &lt;template #header&gt;
         Responsive
@@ -1672,8 +1614,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1693,8 +1634,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
     display: none;
 }
@@ -1732,8 +1672,7 @@ export default {
                 <h5>Row and Cell Styling</h5>
                 <p>Certain rows or cells can easily be styled based on conditions. Cell styling is implemented with templating whereas row styling utilizes the <i>rowClass</i> property which takes the
                 row data as a parameter and returns the style class as a string.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :rowClass="rowClass"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt;
@@ -1749,8 +1688,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1776,8 +1714,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .year-cell {
     padding: 0.429em 0.857rem;
 
@@ -2485,8 +2422,7 @@ export default {
                     </a>
                     <LiveEditor name="DataTableDemo" :sources="sources" service="CustomerService" data="customers-large" :components="['Column', 'InputText', 'MultiSelect', 'Calendar', 'Dropdown', 'ProgressBar', 'Button']" />
                 </div>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 &#123;
     "data": [
         &#123;
@@ -2509,8 +2445,7 @@ export default {
 
 </code></pre>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
     dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters" :loading="loading"
     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
@@ -2607,8 +2542,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CustomerService from '../../service/CustomerService';
 
 export default {
@@ -2675,8 +2609,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 ::v-deep(.p-paginator) {
     .p-paginator-current {
         margin-left: auto;
diff --git a/src/views/datatable/DataTableDynamicColumnsDemo.vue b/src/views/datatable/DataTableDynamicColumnsDemo.vue
index 6cbd392d3..ff20a38cd 100755
--- a/src/views/datatable/DataTableDynamicColumnsDemo.vue
+++ b/src/views/datatable/DataTableDynamicColumnsDemo.vue
@@ -21,16 +21,14 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products"&gt;
     &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index f9dbc95c1..a5b8aba6f 100755
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@@ -98,8 +98,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column', 'InputText', 'Dropdown']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Basic Cell Editing&lt;/h5&gt;
 &lt;p&gt;Simple editors with v-model.&lt;/p&gt;
 &lt;DataTable :value="products1" editMode="cell" class="editable-cells-table"&gt;
@@ -181,8 +180,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
@@ -289,8 +287,7 @@ export default {
 	</div>
 </template>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 ::v-deep(.editable-cells-table td.p-cell-editing) {
     padding-top: 0;
     padding-bottom: 0;
diff --git a/src/views/datatable/DataTableExportDemo.vue b/src/views/datatable/DataTableExportDemo.vue
index e2f8fc41c..0414473cc 100755
--- a/src/views/datatable/DataTableExportDemo.vue
+++ b/src/views/datatable/DataTableExportDemo.vue
@@ -29,8 +29,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column', 'Button']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products" ref="dt"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align: left"&gt;
@@ -45,8 +44,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 9a791167a..e9e50f958 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -103,8 +103,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="CustomerService" data="customers-large" :components="['Column', 'InputText', 'MultiSelect', 'Calendar', 'Dropdown', 'ProgressBar', 'Button']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
     dataKey="id" :filters="filters" :loading="loading"&gt;
     &lt;template #header&gt;
@@ -193,8 +192,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CustomerService from '../../service/CustomerService';
 
 export default {
diff --git a/src/views/datatable/DataTableGridLinesDemo.vue b/src/views/datatable/DataTableGridLinesDemo.vue
index f45d9dceb..32f9adbbb 100644
--- a/src/views/datatable/DataTableGridLinesDemo.vue
+++ b/src/views/datatable/DataTableGridLinesDemo.vue
@@ -30,8 +30,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products" class="p-datatable-gridlines"&gt;
     &lt;template #header&gt;
         Header
@@ -47,8 +46,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableLazyDemo.vue b/src/views/datatable/DataTableLazyDemo.vue
index 5d745f6a5..045455f6a 100755
--- a/src/views/datatable/DataTableLazyDemo.vue
+++ b/src/views/datatable/DataTableLazyDemo.vue
@@ -44,8 +44,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="CustomerService" :components="['Column', 'InputText']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt"
     :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"&gt;
     &lt;Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true"&gt;  
@@ -72,8 +71,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CustomerService from '../../service/CustomerService';
 
 export default {
diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue
index cfd44d999..44196f0b1 100755
--- a/src/views/datatable/DataTablePaginatorDemo.vue
+++ b/src/views/datatable/DataTablePaginatorDemo.vue
@@ -33,8 +33,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="CustomerService" data="customers-large" :components="['Column', 'Button']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="customers" :paginator="true" :rows="10"
     paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
     :rowsPerPageOptions="[10,20,50]"
@@ -53,8 +52,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CustomerService from '../../service/CustomerService';
 
 export default {
diff --git a/src/views/datatable/DataTableReorderDemo.vue b/src/views/datatable/DataTableReorderDemo.vue
index 3550659d5..aa58ed924 100755
--- a/src/views/datatable/DataTableReorderDemo.vue
+++ b/src/views/datatable/DataTableReorderDemo.vue
@@ -22,8 +22,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" :toastService="true" service="ProductService" data="products-small" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder"&gt;
     &lt;Column :rowReorder="true" headerStyle="width: 3rem" :reorderableColumn="false" /&gt;
     &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
@@ -31,8 +30,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableResponsiveDemo.vue b/src/views/datatable/DataTableResponsiveDemo.vue
index 373ae6e0f..7b8e03333 100755
--- a/src/views/datatable/DataTableResponsiveDemo.vue
+++ b/src/views/datatable/DataTableResponsiveDemo.vue
@@ -47,8 +47,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products" class="p-datatable-responsive-demo" :paginator="true" :rows="10"&gt;
     &lt;template #header&gt;
         Responsive
@@ -81,8 +80,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
@@ -102,8 +100,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
     display: none;
 }
diff --git a/src/views/datatable/DataTableRowExpandDemo.vue b/src/views/datatable/DataTableRowExpandDemo.vue
index de562d2b1..c75f52048 100755
--- a/src/views/datatable/DataTableRowExpandDemo.vue
+++ b/src/views/datatable/DataTableRowExpandDemo.vue
@@ -75,8 +75,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" :toastService="true" service="ProductService" data="products-orders-small" :components="['Column', 'Button', 'Rating']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
     @row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt;
     &lt;template #header&gt;
@@ -137,8 +136,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index 663964b26..70d7d5189 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -111,8 +111,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" :toastService="true" service="CustomerService" data="customers-medium" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Subheader Grouping&lt;/h5&gt;
     &lt;p&gt;Group customers by their representative.&lt;/p&gt;
@@ -211,8 +210,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CustomerService from '../../service/CustomerService';
 
 export default {
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index d5f1626fd..2258d997c 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -114,8 +114,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="CustomerService" data="customers-large" :components="['Column', 'Dialog', 'Button']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Vertical&lt;/h5&gt;
     &lt;DataTable :value="customers" :scrollable="true" scrollHeight="200px" :loading="loading"&gt;
@@ -217,8 +216,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CustomerService from '../../service/CustomerService';
 
 export default {
diff --git a/src/views/datatable/DataTableSelectionDemo.vue b/src/views/datatable/DataTableSelectionDemo.vue
index 826e1501d..c9186e9cd 100755
--- a/src/views/datatable/DataTableSelectionDemo.vue
+++ b/src/views/datatable/DataTableSelectionDemo.vue
@@ -87,8 +87,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" :toastService="true" service="ProductService" data="products-small" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Single&lt;/h5&gt;
     &lt;p&gt;In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.&lt;/p&gt;
@@ -163,8 +162,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableSizeDemo.vue b/src/views/datatable/DataTableSizeDemo.vue
index a5e4c99e5..53c04ad89 100644
--- a/src/views/datatable/DataTableSizeDemo.vue
+++ b/src/views/datatable/DataTableSizeDemo.vue
@@ -51,8 +51,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products" class="p-datatable-sm"&gt;
     &lt;template #header&gt;
         Small Table
@@ -85,8 +84,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableSortDemo.vue b/src/views/datatable/DataTableSortDemo.vue
index 8d90004f4..13b4ba97c 100755
--- a/src/views/datatable/DataTableSortDemo.vue
+++ b/src/views/datatable/DataTableSortDemo.vue
@@ -76,8 +76,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Single Column&lt;/h5&gt;
     &lt;DataTable :value="products"&gt;
@@ -141,8 +140,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue
index 4550c913d..f2fb7d4fd 100755
--- a/src/views/datatable/DataTableStateDemo.vue
+++ b/src/views/datatable/DataTableStateDemo.vue
@@ -133,8 +133,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="CustomerService" data="customers-medium" :components="['Column', 'InputText', 'MultiSelect', 'Dropdown']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Session Storage&lt;/h5&gt;
     &lt;DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters1"
@@ -255,8 +254,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CustomerService from '../../service/CustomerService';
 import DataTableDoc from './DataTableDoc';
 
diff --git a/src/views/datatable/DataTableStripedDemo.vue b/src/views/datatable/DataTableStripedDemo.vue
index 2c8cd493c..26ac08ac0 100644
--- a/src/views/datatable/DataTableStripedDemo.vue
+++ b/src/views/datatable/DataTableStripedDemo.vue
@@ -24,8 +24,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products" class="p-datatable-striped"&gt;
     &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
     &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@@ -35,8 +34,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/datatable/DataTableStyleDemo.vue b/src/views/datatable/DataTableStyleDemo.vue
index 7c2435a9d..2cdf347f2 100755
--- a/src/views/datatable/DataTableStyleDemo.vue
+++ b/src/views/datatable/DataTableStyleDemo.vue
@@ -30,8 +30,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products" :rowClass="rowClass"&gt;
     &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
     &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@@ -47,8 +46,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
@@ -82,8 +80,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .outofstock {
     font-weight: 700;
     color: #FF5252;
diff --git a/src/views/datatable/DataTableTemplatingDemo.vue b/src/views/datatable/DataTableTemplatingDemo.vue
index 68dec9786..ff933997c 100755
--- a/src/views/datatable/DataTableTemplatingDemo.vue
+++ b/src/views/datatable/DataTableTemplatingDemo.vue
@@ -51,8 +51,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column', 'Rating', 'Button']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataTable :value="products"&gt;
     &lt;template #header&gt;
         &lt;div class="table-header"&gt;
@@ -89,8 +88,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
@@ -115,8 +113,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .table-header {
     display: flex;
     align-items: center;
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index 472099c20..b148fc9a8 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-				<pre v-code.script>
-<code>
+				<pre v-code.script><code>
 import DataView from 'primevue/dataview';
 				
 </code></pre>
@@ -14,8 +13,7 @@ import DataView from 'primevue/dataview';
 
 				<h5>Getting Started</h5>
 				<p>DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.</p>
-<pre v-code.script>
-<code><template v-pre>
+<pre v-code.script><code><template v-pre>
 export default {
     data() {
         return {
@@ -37,8 +35,7 @@ export default {
 				<p>DataView has two layout modes; <i>list</i> and <i>grid</i> where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas
 					in grid mode it is "grid".</p>
 				<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;template #list="slotProps"&gt;
 	&lt;div class="p-col-12"&gt;
         &lt;div class="car-details"&gt;
@@ -69,8 +66,7 @@ export default {
 
 				<h5>Sections</h5>
 				<p>Header and Footer are the two templates that are capable of displaying custom content.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;template #header&gt;Header Content&lt;/template&gt;
 &lt;template #footer&gt;Footer Content&lt;/template&gt;
 
@@ -78,8 +74,7 @@ export default {
 
                 <h5>Empty Message</h5>
                 <p>Where there is no data to display, the optional <i>empty</i> template can be used to display information.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;template #empty&gt;No records found.&lt;/template&gt;
 
 </code></pre>
@@ -90,8 +85,7 @@ export default {
 					you can create your own that updates the layout property of the DataView.
 				</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataView :value="cars" :layout="layout"&gt;
 	&lt;template #header&gt;
 		&lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt;
@@ -109,8 +103,7 @@ export default {
 				<h5>Paginator</h5>
 				<p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number
 					of page links to display. To customize the left and right side of the paginators, use <i>paginatorLeft</i> and <i>paginatorRight</i> templates.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt;
 	&lt;template #paginatorLeft&gt;
 		&lt;Button type="button" icon="pi pi-refresh"/&gt;
@@ -131,8 +124,7 @@ export default {
 				<h5>Sorting</h5>
 				<p><i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element.
 					Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt;
     &lt;template #header&gt;
         &lt;div class="p-grid p-nogutter"&gt;
@@ -154,8 +146,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code><template v-pre>
+<pre v-code.script><code><template v-pre>
 export default {
     data() {
         return {
@@ -203,8 +194,7 @@ export default {
                 <p>Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend.
                 Pagination in this case needs to display the logical number of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only
                 need to load the data of the current page.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataView :value="cars" :layout="layout" :paginator="true" :rows="20" :lazy="true" @page="onPage($event)"&gt;
 	&lt;template #list="slotProps" &gt;
 		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
@@ -216,8 +206,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code><template v-pre>
+<pre v-code.script><code><template v-pre>
 export default {
     data() {
         return {
@@ -423,8 +412,7 @@ export default {
                     <LiveEditor name="DataViewDemo" :sources="sources" service="ProductService" data="products" :components="['DataViewLayoutOptions', 'Button', 'Dropdown', 'Rating']" />
                 </div>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField"&gt;
     &lt;template #header&gt;
         &lt;div class="p-grid p-nogutter"&gt;
@@ -483,8 +471,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/deferredcontent/DeferredContentDoc.vue b/src/views/deferredcontent/DeferredContentDoc.vue
index f0043f945..897985337 100755
--- a/src/views/deferredcontent/DeferredContentDoc.vue
+++ b/src/views/deferredcontent/DeferredContentDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import DeferredContent from 'primevue/deferredcontent';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>DeferredContent is used as a wrapper element of its content..</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DeferredContent&gt;
     &lt;DataTable :value="cars"&gt;
         &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -26,8 +24,7 @@ import DeferredContent from 'primevue/deferredcontent';
 
                 <h5>Load Event</h5>
                 <p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;DeferredContent @load="onDataLoad"&gt;
     &lt;DataTable :value="cars"&gt;
         &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -76,8 +73,7 @@ import DeferredContent from 'primevue/deferredcontent';
                     </a>
                     <LiveEditor name="DeferredContentDemo" :sources="sources" service="ProductService" :toastService="true" data="products-small" :components="['DataTable', 'Column']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div style="height: 800px"&gt;
     Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
 &lt;/div&gt;
@@ -100,8 +96,7 @@ import DeferredContent from 'primevue/deferredcontent';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
index ee18eac9d..89f1c1b18 100755
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@@ -3,24 +3,21 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Dialog from 'primevue/dialog';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Dialog header="Header" v-model:visible="display" &gt;
 	Content
 &lt;/Dialog&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -33,16 +30,14 @@ export default {
 
 				<h5>Header and Footer</h5>
 				<p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Dialog header="Header" footer="Footer" v-model:visible="display"&gt;
 	Content
 &lt;/Dialog&gt;
 
 </code></pre>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Dialog v-model:visible="display"&gt;
     &lt;template #header&gt;
 		&lt;h3&gt;Header&lt;/h3&gt;
@@ -60,8 +55,7 @@ export default {
 
                 <h5>Positioning</h5>
                 <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Dialog position="top" v-model:visible="display"&gt;
 	Content
 &lt;/Dialog&gt;
@@ -70,8 +64,7 @@ export default {
 
                 <h5>Popup Content inside the Dialog</h5>
                 <p>If the dialog contains components with popup elements such as Dropdown or Calendar, set <i>contentStyle</i> to overflow:visible so that overlays can be displayed outside of the content area.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Dialog v-model:visible="display" :contentStyle="{overflow: 'visible'}"&gt;
 	Content
 &lt;/Dialog&gt;
@@ -80,8 +73,7 @@ export default {
 
                 <h5>Initial Focus</h5>
                 <p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Dialog v-model:visible="display"&gt;
     Content
 	&lt;template #footer&gt;
@@ -273,8 +265,7 @@ export default {
                     </a>
                     <LiveEditor name="DialogDemo" :sources="sources" :components="['Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
 &lt;Button label="Show" icon="pi pi-external-link" @click="openBasic" /&gt;
 &lt;Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}"&gt;
@@ -377,8 +368,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -437,8 +427,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .p-button {
     margin: 0 .5rem 0 0;
     min-width: 10rem;
diff --git a/src/views/display/DisplayDoc.vue b/src/views/display/DisplayDoc.vue
index 2c745da8e..d1f5547bb 100644
--- a/src/views/display/DisplayDoc.vue
+++ b/src/views/display/DisplayDoc.vue
@@ -27,8 +27,7 @@
                 </ul>
 
                 <h5>Examples</h5>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-inline"&gt;Displayed as inline.&lt;/div&gt;
 &lt;div class="p-d-flex"&gt;Displayed as a flexbox container.&lt;/div&gt;
 &lt;div class="p-d-block p-d-lg-inline"&gt;Inline for larger screens and block for others.&lt;/div&gt;
@@ -47,8 +46,7 @@
 				<a href="https://github.com/primefaces/primevue/tree/master/src/views/display" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Inline&lt;/h5&gt;
     &lt;InputText class="p-mr-2 p-d-inline" /&gt;
diff --git a/src/views/divider/DividerDoc.vue b/src/views/divider/DividerDoc.vue
index 5e3a9b73f..a278973fd 100644
--- a/src/views/divider/DividerDoc.vue
+++ b/src/views/divider/DividerDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Divider from 'primevue/divider';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Divider has two orientations defined with the <i>layout</i> property, default is "horizontal" and the alternative is "vertical".</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div&gt;Content 1&lt;/div&gt;
 &lt;Divider /&gt;
 &lt;div&gt;Content 2&lt;/div&gt;
@@ -21,8 +19,7 @@ import Divider from 'primevue/divider';
 
                 <h5>Border Style</h5>
                 <p>Style of the border is configured with the <i>type</i> property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div&gt;Content 1&lt;/div&gt;
 &lt;Divider type="dashed"/&gt;
 &lt;div&gt;Content 2&lt;/div&gt;
@@ -31,8 +28,7 @@ import Divider from 'primevue/divider';
 
                 <h5>Vertical Divider</h5>
                 <p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex"&gt;
     &lt;div&gt;Content 1&lt;/div&gt;
     &lt;Divider layout="vertical" /&gt;
@@ -48,8 +44,7 @@ import Divider from 'primevue/divider';
                     of the content is configured with the <i>align</i> property. In horizontal layout, alignment options
                     are "left", "center" and "right" whereas vertical mode supports "top", "center" and "bottom".
                 </p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div&gt;Content 1&lt;/div&gt;
 
 &lt;Divider align="left"&gt;
@@ -181,8 +176,7 @@ import Divider from 'primevue/divider';
                     </a>
                     <LiveEditor name="DividerDemo" :sources="sources" :components="['InputText', 'Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Basic&lt;/h5&gt;
     &lt;p&gt;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
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 3027403e8..43d7fe90c 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -3,22 +3,19 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Dropdown from 'primevue/dropdown';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Dropdown requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 data() {
 	return {
 		selectedCity: null,
@@ -40,8 +37,7 @@ data() {
 				<h5>Filtering</h5>
 				<p>Options can be filtered using an input field in the overlay by enabling the <i>filter</i> property.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" filterPlaceholder="Find Car"/&gt;
 
 </code></pre>
@@ -49,8 +45,7 @@ data() {
 				<h5>Custom Content</h5>
 				<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
                 <p>In addition the <i>value</i> template can be used to customize the selected value.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true"&gt;
 	&lt;template #value="slotProps"&gt;
         &lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt;
@@ -345,8 +340,7 @@ data() {
                     </a>
                     <LiveEditor name="DropdownDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
 &lt;Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
 
@@ -374,8 +368,7 @@ data() {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/editor/EditorDoc.vue b/src/views/editor/EditorDoc.vue
index d088f20b0..9dc5d4432 100755
--- a/src/views/editor/EditorDoc.vue
+++ b/src/views/editor/EditorDoc.vue
@@ -3,24 +3,21 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Editor from 'primevue/editor';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>A model can be bound using the standard v-model directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Editor v-model="value" editorStyle="height: 320px"/&gt;
 
 </code></pre>
 
 				<h5>Toolbar</h5>
 				<p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Editor v-model="value" editorStyle="height: 320px"&gt;
 	&lt;template #toolbar&gt;
 		&lt;span class="ql-formats"&gt;
@@ -139,8 +136,7 @@ import Editor from 'primevue/editor';
 				<h5>Dependencies</h5>
 				<p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>
 				<p>Resources of quill needs to be added to your application.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 npm install quill --save
 
 </code></pre>
@@ -153,8 +149,7 @@ npm install quill --save
                     </a>
                     <LiveEditor name="EditorDemo" :sources="sources" :directives="['Tooltip']"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Default&lt;/h3&gt;
 &lt;Editor v-model="value1" editorStyle="height: 320px"/&gt;
 
@@ -171,8 +166,7 @@ npm install quill --save
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/elevation/ElevationDoc.vue b/src/views/elevation/ElevationDoc.vue
index d536bc819..3dcf875d5 100644
--- a/src/views/elevation/ElevationDoc.vue
+++ b/src/views/elevation/ElevationDoc.vue
@@ -4,16 +4,14 @@
 			<TabPanel header="Documentation">
 				<h5>Getting Started</h5>
 				<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-shadow-1" /&gt;
 
 </code></pre>
 
                 <h5>Levels</h5>
                 <p>There are 24 depths available varying from 1 to 24.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-shadow-1" /&gt;
 &lt;div class="p-shadow-24" /&gt;
 
@@ -24,8 +22,7 @@
 				<a href="https://github.com/primefaces/primevue/tree/master/src/views/elevation" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-grid"&gt;
     &lt;div class="p-col" v-for="index in 24" :key="index"&gt;
         &lt;div :class="['box', 'p-shadow-' + index]"&gt;
diff --git a/src/views/fieldset/FieldsetDoc.vue b/src/views/fieldset/FieldsetDoc.vue
index c21cab83c..e5b881462 100755
--- a/src/views/fieldset/FieldsetDoc.vue
+++ b/src/views/fieldset/FieldsetDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Fieldset is a container component that accepts content as its children.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Fieldset legend="Godfather I"&gt;
 	The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
 	His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
@@ -24,8 +22,7 @@ import Fieldset from 'primevue/fieldset';
 
                 <h5>Custom Header</h5>
                 <p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Fieldset&gt;
     &lt;template #legend&gt;
         Header Content
@@ -38,8 +35,7 @@ import Fieldset from 'primevue/fieldset';
 
 				<h5>Toggleable</h5>
 				<p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Fieldset legend="Godfather I" :toggleable="true"&gt;
 	The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
 	His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
@@ -50,8 +46,7 @@ import Fieldset from 'primevue/fieldset';
 </code></pre>
 
 <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Fieldset legend="Header Text" :toggleable="true" :collapsed="true"&gt;
 	Content
 &lt;/Fieldset&gt;
@@ -59,8 +54,7 @@ import Fieldset from 'primevue/fieldset';
 </code></pre>
 
                 <p>Use the v-model directive to enable two-way binding.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
 &lt;Fieldset legend="Header Text" :toggleable="true" v-model:collapsed="isCollapsed"&gt;
 	Content
@@ -167,8 +161,7 @@ import Fieldset from 'primevue/fieldset';
                     </a>
                     <LiveEditor name="FieldsetDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Regular&lt;/h5&gt;
 &lt;Fieldset legend="Header"&gt;
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -187,8 +180,7 @@ import Fieldset from 'primevue/fieldset';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue
index 38dc6b67c..643edf081 100755
--- a/src/views/fileupload/FileUploadDoc.vue
+++ b/src/views/fileupload/FileUploadDoc.vue
@@ -3,32 +3,28 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import FileUpload from 'primevue/fileupload';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;FileUpload name="demo[]" url="./upload" /&gt;
 
 </code></pre>
 
 				<h5>Multiple Uploads</h5>
 				<p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;FileUpload name="demo[]" url="./upload" :multiple="true" /&gt;
 
 </code></pre>
 
 				<h5>Basic UI</h5>
 				<p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;FileUpload mode="basic" name="demo[]" url="./upload" /&gt;
 
 </code></pre>
@@ -38,24 +34,21 @@ import FileUpload from 'primevue/fileupload';
 
 				<h5>Auto Uploads</h5>
 				<p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" /&gt;
 
 </code></pre>
 
 				<h5>File Types</h5>
 				<p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt;
 
 </code></pre>
 
 				<h5>File Size and File Linit</h5>
 				<p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" /&gt;
 
 </code></pre>
@@ -75,14 +68,12 @@ import FileUpload from 'primevue/fileupload';
 
                 <h5>Custom Upload</h5>
 				<p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 myUploader(event) {
     //event.files == files to upload
 }
@@ -91,8 +82,7 @@ myUploader(event) {
 
                 <h5>Empty Template</h5>
                 <p>When there is no file selected, you may use the empty slot to display content.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;FileUpload name="demo[]" url="./upload" /&gt;
     &lt;template #empty&gt;
         &lt;p&gt;Drag and drop files to here to upload.&lt;/p&gt;
@@ -332,8 +322,7 @@ myUploader(event) {
 					</a>
 					<LiveEditor name="FileUploadDemo" :sources="sources" :toastService="true" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Advanced&lt;/h3&gt;
 &lt;FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000"&gt;
     &lt;template #empty&gt;
@@ -349,8 +338,7 @@ myUploader(event) {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	methods: {
 		onUpload() {
diff --git a/src/views/flexbox/FlexBoxDemo.vue b/src/views/flexbox/FlexBoxDemo.vue
index 83da6586b..910563b7b 100644
--- a/src/views/flexbox/FlexBoxDemo.vue
+++ b/src/views/flexbox/FlexBoxDemo.vue
@@ -8,8 +8,7 @@
             <h5>Flex Container</h5>
             <p>An element can configured as a flexbox container using the <i>p-d-flex</i> or <i>p-d-inline-flex</i> classes.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex"&gt;Flex Container&lt;/div&gt;
 &lt;div class="p-d-inline-flex"&gt;Inline Flex Container&lt;/div&gt;
 
@@ -28,8 +27,7 @@
             </ul>
 
             <h6>Row</h6>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex"&gt;
     &lt;div class="p-mr-2"&gt;Item 1&lt;/div&gt;
     &lt;div class="p-mr-2"&gt;Item 2&lt;/div&gt;
@@ -44,8 +42,7 @@
             </div>
 
             <h6>Column</h6>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex p-flex-column"&gt;
     &lt;div class="p-mb-2"&gt;Item 1&lt;/div&gt;
     &lt;div class="p-mb-2"&gt;Item 2&lt;/div&gt;
@@ -62,8 +59,7 @@
             <h6>Responsive</h6>
             <p>Row direction for larger screens and column for smaller.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex p-flex-column p-flex-md-row"&gt;
     &lt;div class="p-mb-2 p-mr-2"&gt;Item 1&lt;/div&gt;
     &lt;div class="p-mb-2 p-mr-2"&gt;Item 2&lt;/div&gt;
@@ -106,8 +102,7 @@
             <p>Order configures the way in which they appear in the flex container. <i>p-order-{value}</i> format is used where value can be a number from 0 to 6.</p>
 
             <h6>Customized</h6>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex"&gt;
     &lt;div class="p-mr-2 p-order-3"&gt;Item 1&lt;/div&gt;
     &lt;div class="p-mr-2 p-order-1"&gt;Item 2&lt;/div&gt;
@@ -123,8 +118,7 @@
 
             <h6>Responsive</h6>
             <p>Orders change depending on the screen size.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex"&gt;
     &lt;div class="p-mr-2 p-order-3 p-order-md-2"&gt;Item 1&lt;/div&gt;
     &lt;div class="p-mr-2 p-order-1 p-order-md-3"&gt;Item 2&lt;/div&gt;
@@ -189,8 +183,7 @@
             </ul>
 
             <h6>No Wrap</h6>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex"&gt;
     &lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt;
     &lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt;
@@ -211,8 +204,7 @@
             </div>
 
             <h6>Wrap</h6>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex p-flex-wrap"&gt;
     &lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt;
     &lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt;
@@ -233,8 +225,7 @@
             </div>
 
             <h6>Wrap Reverse</h6>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex p-flex-wrap-reverse"&gt;
     &lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt;
     &lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt;
@@ -286,8 +277,7 @@
             </ul>
 
             <h6>Between</h6>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex p-jc-between"&gt;
     &lt;div&gt;Item 1&lt;/div&gt;
     &lt;div&gt;Item 2&lt;/div&gt;
@@ -300,8 +290,7 @@
             </div>
 
             <h6>Center</h6>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex p-jc-center"&gt;
     &lt;div class="p-mr-2"&gt;Item 1&lt;/div&gt;
     &lt;div&gt;Item 2&lt;/div&gt;
@@ -359,8 +348,7 @@
             </ul>
 
             <h6>Start</h6>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex p-ai-start"&gt;
     &lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
     &lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
@@ -373,8 +361,7 @@
             </div>
 
             <h6>Center</h6>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex p-ai-center"&gt;
     &lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
     &lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
@@ -426,8 +413,7 @@
                 <li>stretch (default)</li>
             </ul>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex" style="height: 150px;"&gt;
     &lt;div class="p-mr-2 p-as-start"&gt;Start&lt;/div&gt;
     &lt;div class="p-mr-2 p-as-center"&gt;Center&lt;/div&gt;
@@ -522,8 +508,7 @@
             <p>When combined with <router-link to="/setup">spacing utilities</router-link>, flexbox offers endless possibilities.</p>
             <h6>Horizontal Spacing</h6>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex p-p-3 card"&gt;
     &lt;Button type="Button" icon="pi pi-check" class="p-mr-2" /&gt;
     &lt;Button type="Button" icon="pi pi-trash" class="p-button-danger"/&gt;
@@ -538,8 +523,7 @@
             </div>
 
             <h6>Vertical Spacing</h6>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-d-flex p-flex-column" style="height:150px"&gt;
     &lt;div&gt;Item 1&lt;/div&gt;
     &lt;div class="p-mt-auto"&gt;Item 2&lt;/div&gt;
diff --git a/src/views/floatlabel/FloatLabelDemo.vue b/src/views/floatlabel/FloatLabelDemo.vue
index c6ee15d7f..2c1e8a7ed 100644
--- a/src/views/floatlabel/FloatLabelDemo.vue
+++ b/src/views/floatlabel/FloatLabelDemo.vue
@@ -113,8 +113,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="FloatLabelDemo" :sources="sources" service="CountryService" data="countries" :components="['InputText', 'AutoComplete', 'Calendar', 'Chips', 'InputMask', 'InputNumber', 'CascadeSelect', 'Dropdown', 'MultiSelect', 'Textarea']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-fluid p-grid"&gt;
     &lt;div class="p-field p-col-12 p-md-4"&gt;
         &lt;span class="p-float-label"&gt;
@@ -213,8 +212,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CountryService from '../../service/CountryService';
 
 export default {
diff --git a/src/views/formlayout/FormLayoutDoc.vue b/src/views/formlayout/FormLayoutDoc.vue
index 03a4b9a9d..725a9604a 100644
--- a/src/views/formlayout/FormLayoutDoc.vue
+++ b/src/views/formlayout/FormLayoutDoc.vue
@@ -4,8 +4,7 @@
 			<TabPanel header="Documentation">
 				<h5>Getting Started</h5>
 				<p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-field"&gt;
     &lt;label for="fieldId"&gt;Label&lt;/label&gt;
     &lt;InputText id="fieldId" type="text" /&gt;
@@ -15,8 +14,7 @@
 
                 <h5>Vertical Layout</h5>
                 <p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> that makes the components use all available width.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-fluid"&gt;
     &lt;div class="p-field"&gt;
         &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
@@ -33,8 +31,7 @@
                 <h5>Vertical Layout with Grid</h5>
                 <p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.p-formgrid</i> class to optimize the content for form design. Example
                 below arranges two fields to be displayed next two each other.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-fluid p-formgrid p-grid"&gt;
         &lt;div class="p-field p-col"&gt;
         &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
@@ -52,8 +49,7 @@
                 <p>In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this
                     example, label has a fixed width where container of the inputs gets the remaining space.
                 </p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-field p-grid"&gt;
     &lt;label for="firstname" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt;
     &lt;div class="p-col"&gt;
@@ -71,8 +67,7 @@
 
                 <h5>Horizontal and Fluid</h5>
                 <p>Wrapping the form in the previous example with <i>.p-fluid</i> and removing the fixed width results in a fluid layout.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-fluid"&gt;
     &lt;div class="p-field p-grid"&gt;
         &lt;label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Firstname&lt;/label&gt;
@@ -93,8 +88,7 @@
                 <h5>Inline</h5>
                 <p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.p-formgroup-inline</i> to the form container. Note that per design requirements, if labels
                     are not visually hidden, it is suggested to use <i>.p-sr-only</i> to still support screen readers.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-formgroup-inline"&gt;
     &lt;div class="p-field"&gt;
         &lt;label for="firstname" class="p-sr-only"&gt;Firstname&lt;/label&gt;
@@ -112,8 +106,7 @@
                 <h5>Checkbox and RadioButton</h5>
                 <p>Checkbox and RadioButton have exclusive layout support via <i>.p-field-checkbox</i> and <i>.p-field-radiobutton</i> classes respectively.
                 Examples here demonstrates vertical and horizontal layout alternatives.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;h3&gt;Vertical Checkbox&lt;/h3&gt;
 &lt;div class="p-field-checkbox"&gt;
     &lt;Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /&gt;
@@ -138,8 +131,7 @@
 
 </code></pre>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;h3&gt;Vertical RadioButton&lt;/h3&gt;
 &lt;div class="p-field-radiobutton"&gt;
     &lt;RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /&gt;
@@ -166,8 +158,7 @@
 
                 <h5>Helper text</h5>
                 <p>Helper text is an optional element defined with the <i>small</i> tag to display additional information about the input field.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-field p-fluid"&gt;
     &lt;label for="username"&gt;Username&lt;/label&gt;
     &lt;InputText id="username" type="username" aria-describedby="username-help" /&gt;
@@ -178,8 +169,7 @@
 
                 <h5>Advanced Forms</h5>
                 <p>A responsive form with various input fields can easily be implemented using a combination of <i>.p-field</i>, <i>.p-formgrid</i> and <i>.p-fluid</i>.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-fluid p-formgrid p-grid"&gt;
     &lt;div class="p-field p-col-12 p-md-6"&gt;
         &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
@@ -242,8 +232,7 @@
                     </a>
                     <LiveEditor name="FormLayoutDemo" :sources="sources" :components="['InputText', 'Button', 'Checkbox', 'RadioButton', 'Textarea', 'Dropdown']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Vertical&lt;/h3&gt;
 &lt;div class="p-fluid"&gt;
     &lt;div class="p-field"&gt;
@@ -392,8 +381,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/fullcalendar/FullCalendarDoc.vue b/src/views/fullcalendar/FullCalendarDoc.vue
index 28c1b1453..470835ec5 100755
--- a/src/views/fullcalendar/FullCalendarDoc.vue
+++ b/src/views/fullcalendar/FullCalendarDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import FullCalendar from 'primevue/fullcalendar';
 
 </code></pre>
@@ -12,15 +11,13 @@ import FullCalendar from 'primevue/fullcalendar';
 				<h5>Getting Started</h5>
 				<p>FullCalendar is a wrapper around on <a href="https://fullcalendar.io/docs/v4">FullCalendar 5.4.0+</a> so fullcalendar needs to be included in your project.
                 For a complete documentation and samples please refer to the <a href="https://fullcalendar.io/">fullcalendar website</a>.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 npm install @fullcalendar/core --save
 
 </code></pre>
 
                 <p>FullCalendar is plugin based so install the plugins you require and define them with the options property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 npm install @fullcalendar/daygrid --save
 npm install @fullcalendar/timegrid --save
 npm install @fullcalendar/interaction --save
@@ -28,14 +25,12 @@ npm install @fullcalendar/interaction --save
 </code></pre>
 
 				<p>Events should be an array and defined using the events property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;FullCalendar :events="events" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -81,8 +76,7 @@ export default {
 </code></pre>
 
 				<p>In a real application, it is likely to populate the events by making a remote call, when the events are updated, the component will detect the change and render them.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import axios from 'axios';
 
 export default class EventService {
@@ -95,8 +89,7 @@ export default class EventService {
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import EventService from '../../service/EventService';
 
 export default {
@@ -118,14 +111,12 @@ export default {
 
 				<h5>Options</h5>
 				<p>FullCalendar has a long list of customization parameters that can be defined with the options property. Example below customizes the plugins, header and editable properties.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;FullCalendar :events="events" :options="options" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import EventService from '../../service/EventService';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
@@ -160,8 +151,7 @@ export default {
 
 				<h5>Callbacks</h5>
 				<p>Callbacks of the FullCalendar such as dateClick are also defined with the options property.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
      data() {
         return {
@@ -221,14 +211,12 @@ export default {
 					</a>
 					<LiveEditor name="FullCalendarDemo" :sources="sources" service="EventService" data="events"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;FullCalendar :events="events" :options="options" /&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import EventService from '../../service/EventService';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
diff --git a/src/views/galleria/GalleriaAdvancedDemo.vue b/src/views/galleria/GalleriaAdvancedDemo.vue
index 8a19ae76a..1eee8a5ca 100644
--- a/src/views/galleria/GalleriaAdvancedDemo.vue
+++ b/src/views/galleria/GalleriaAdvancedDemo.vue
@@ -38,8 +38,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
     :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
     :circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
@@ -66,8 +65,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
@@ -101,8 +99,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 ::v-deep(.custom-galleria) {
     &.fullscreen {
         display: flex;
diff --git a/src/views/galleria/GalleriaAutoPlayDemo.vue b/src/views/galleria/GalleriaAutoPlayDemo.vue
index 5a7ed282e..56ed83d3d 100755
--- a/src/views/galleria/GalleriaAutoPlayDemo.vue
+++ b/src/views/galleria/GalleriaAutoPlayDemo.vue
@@ -24,8 +24,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
     :circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
     &lt;template #item="slotProps"&gt;
@@ -38,8 +37,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
diff --git a/src/views/galleria/GalleriaCaptionDemo.vue b/src/views/galleria/GalleriaCaptionDemo.vue
index 915b7f25b..d1d287134 100755
--- a/src/views/galleria/GalleriaCaptionDemo.vue
+++ b/src/views/galleria/GalleriaCaptionDemo.vue
@@ -29,8 +29,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
     &lt;template #item="{item}"&gt;
         &lt;img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt;
@@ -48,8 +47,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
diff --git a/src/views/galleria/GalleriaDoc.vue b/src/views/galleria/GalleriaDoc.vue
index bf4bdfb88..1262df40b 100755
--- a/src/views/galleria/GalleriaDoc.vue
+++ b/src/views/galleria/GalleriaDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Galleria from 'primevue/galleria';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Galleria requires item template and a value as an array of objects.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Galleria :value="images"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" /&gt;
@@ -23,8 +21,7 @@ import Galleria from 'primevue/galleria';
 
                 <p>For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService.</p>
 <div style="overflow: auto; height: 400px">
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 {
     "data":[
         {
@@ -123,8 +120,7 @@ import Galleria from 'primevue/galleria';
 </code></pre>
 </div>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import axios from 'axios'
 
 export default class PhotoService {
@@ -136,8 +132,7 @@ export default class PhotoService {
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -158,8 +153,7 @@ export default {
 				<h5>Items per page</h5>
                 <p>Number of items per page is defined using the <i>numVisible</i> property.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Galleria :value="images" :numVisible="5"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@@ -175,8 +169,7 @@ export default {
                 <p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property which references an array of
                 objects whose breakpoint defines the max-width to apply the settings.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@@ -188,8 +181,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 responsiveOptions: [
     {
         breakpoint: '1024px',
@@ -209,8 +201,7 @@ responsiveOptions: [
 
 				<h5>Header and Footer</h5>
                 <p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
     &lt;template #header&gt;
         &lt;h1&gt;Header&lt;/h1&gt;
@@ -228,8 +219,7 @@ responsiveOptions: [
                 <h5>Indicators</h5>
                 <p>Indicators allow quick navigation between the items. Set <i>showIndicators</i> to display indicators which can be customized further
                 with the <i>changeItemOnIndicatorHover</i>, <i>showIndicatorsOnItem</i> and <i>indicatorsPosition</i> properties.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Galleria :value="images" :showIndicators="true"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" /&gt;
@@ -458,8 +448,7 @@ responsiveOptions: [
 				<a href="https://github.com/primefaces/primevue/tree/master/src/views/galleria" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@@ -471,8 +460,7 @@ responsiveOptions: [
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
diff --git a/src/views/galleria/GalleriaFullScreenDemo.vue b/src/views/galleria/GalleriaFullScreenDemo.vue
index 0cd5d3655..375098181 100755
--- a/src/views/galleria/GalleriaFullScreenDemo.vue
+++ b/src/views/galleria/GalleriaFullScreenDemo.vue
@@ -61,8 +61,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;With Thumbnails&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
     :circular="true" :fullScreen="true" :showItemNavigators="true" v-model:visible="displayBasic"&gt;
@@ -108,8 +107,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
diff --git a/src/views/galleria/GalleriaIndicatorDemo.vue b/src/views/galleria/GalleriaIndicatorDemo.vue
index f42f89fb3..b9d57b0d0 100755
--- a/src/views/galleria/GalleriaIndicatorDemo.vue
+++ b/src/views/galleria/GalleriaIndicatorDemo.vue
@@ -87,8 +87,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Indicators with Click Event&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
     :showThumbnails="false" :showIndicators="true"&gt;
@@ -152,8 +151,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
@@ -191,8 +189,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 ::v-deep(.custom-indicator-galleria) {
     .indicator-text {
         color: #e9ecef;
diff --git a/src/views/galleria/GalleriaNavigatorDemo.vue b/src/views/galleria/GalleriaNavigatorDemo.vue
index fc04d24fe..9f1ea24ca 100755
--- a/src/views/galleria/GalleriaNavigatorDemo.vue
+++ b/src/views/galleria/GalleriaNavigatorDemo.vue
@@ -64,8 +64,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Item Navigators and Thumbnails&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
     :showItemNavigators="true"&gt;
@@ -112,8 +111,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
diff --git a/src/views/galleria/GalleriaProgrammaticDemo.vue b/src/views/galleria/GalleriaProgrammaticDemo.vue
index b0d66186a..7eb955e9d 100644
--- a/src/views/galleria/GalleriaProgrammaticDemo.vue
+++ b/src/views/galleria/GalleriaProgrammaticDemo.vue
@@ -28,8 +28,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div style="padding: .5rem 0"&gt;
     &lt;Button icon="pi pi-minus" @click="prev" class="p-button-secondary" /&gt;
     &lt;Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" /&gt;
@@ -46,8 +45,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
diff --git a/src/views/galleria/GalleriaResponsiveDemo.vue b/src/views/galleria/GalleriaResponsiveDemo.vue
index 86fa3aabe..e978afa9d 100755
--- a/src/views/galleria/GalleriaResponsiveDemo.vue
+++ b/src/views/galleria/GalleriaResponsiveDemo.vue
@@ -23,8 +23,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
@@ -36,8 +35,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
diff --git a/src/views/galleria/GalleriaThumbnailDemo.vue b/src/views/galleria/GalleriaThumbnailDemo.vue
index 83ae8f906..d6a0b7b4f 100755
--- a/src/views/galleria/GalleriaThumbnailDemo.vue
+++ b/src/views/galleria/GalleriaThumbnailDemo.vue
@@ -64,8 +64,7 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Positioned at Bottom&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
     &lt;template #item="slotProps"&gt;
@@ -112,8 +111,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
diff --git a/src/views/grid/GridDoc.vue b/src/views/grid/GridDoc.vue
index 3e3a9db57..f1db3e804 100755
--- a/src/views/grid/GridDoc.vue
+++ b/src/views/grid/GridDoc.vue
@@ -5,8 +5,7 @@
 				<h5>Getting Started</h5>
 				<p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
 					a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col"&gt;1&lt;/div&gt;
 	&lt;div class="p-col"&gt;2&lt;/div&gt;
@@ -31,8 +30,7 @@
 				<p>FlexGrid includes a 12 column based layout utility where width of a column is defined with the <i>p-col-&#123;number&#125;</i> style class. Columns with prefined widths can be used with columns with auto width (p-col) as well.</p>
 
 				<p>In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col-4"&gt;4&lt;/div&gt;
 	&lt;div class="p-col"&gt;1&lt;/div&gt;
@@ -97,8 +95,7 @@
 
 				<h5>MultiLine</h5>
 				<p>When the number of columns exceed 12, columns wrap to a new line.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col-6"&gt;6&lt;/div&gt;
 	&lt;div class="p-col-6"&gt;6&lt;/div&gt;
@@ -125,8 +122,7 @@
 
 				<h5>Fixed Width Column</h5>
 				<p>A column can have a fixed width while siblings having auto width. Apply <i>p-col-fixed</i> class to fix a column width.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col-fixed" style="width:100px"&gt;Fixed&lt;/div&gt;
 	&lt;div class="p-col"&gt;Auto&lt;/div&gt;
@@ -184,8 +180,7 @@
 				</div>
 
 				<p>In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;A&lt;/div&gt;
 	&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;B&lt;/div&gt;
@@ -211,8 +206,7 @@
 </div>
 				<h5>Offset</h5>
 				<p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col-6 p-offset-3"&gt;6&lt;/div&gt;
 &lt;/div&gt;
@@ -286,8 +280,7 @@
 
 				<h5>Nested</h5>
 				<p>Columns can be nested to create more complex layouts.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-grid nested-grid"&gt;
 	&lt;div class="p-col-8"&gt;
 		&lt;div class="p-grid"&gt;
@@ -332,8 +325,7 @@
 				<p>A .5rem padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply
 					<i>p-nogutter</i> class to the container. Gutters can also be removed on an ndividual columns with the same class name.
 				</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-grid p-nogutter"&gt;
 	&lt;div class="p-col"&gt;1&lt;/div&gt;
 	&lt;div class="p-col p-nogutter"&gt;2&lt;/div&gt;
@@ -347,8 +339,7 @@
 				<a href="https://github.com/primefaces/primevue/tree/master/src/views/flexgrid" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 <h5>Basic</h5>
 &lt;div class="p-grid"&gt;
 	&lt;div class="p-col"&gt;
@@ -719,8 +710,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -739,8 +729,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .flexgrid-demo {
     .box {
         background-color: var(--surface-e);
diff --git a/src/views/icons/Icons.vue b/src/views/icons/Icons.vue
index 77481d828..7d83f009c 100755
--- a/src/views/icons/Icons.vue
+++ b/src/views/icons/Icons.vue
@@ -7,8 +7,7 @@
             <h5>Download</h5>
             <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 npm install primeicons --save
 
 </code></pre>
@@ -17,8 +16,7 @@ npm install primeicons --save
             <p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>.
             A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;i class="pi pi-check"&gt;&lt;/i&gt;
 &lt;i class="pi pi-times"&gt;&lt;/i&gt;
 
@@ -30,16 +28,14 @@ npm install primeicons --save
             <h5>Size</h5>
             <p>Size of the icons can easily be changed using font-size property.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;i class="pi pi-check"&gt;&lt;/i&gt;
 
 </code></pre>
 
             <i class="pi pi-check"></i>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;i class="pi pi-check" style="fontSize: 2rem"&gt;&lt;/i&gt;
 
 </code></pre>
@@ -48,8 +44,7 @@ npm install primeicons --save
 
             <h5>Spinning Animation</h5>
             <p>Special pi-spin class applies continuous rotation to an icon.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;i class="pi pi-spin pi-spinner" style="fontSize: 2rem"&gt;&lt;/i&gt;
 
 </code></pre>
diff --git a/src/views/inplace/InplaceDoc.vue b/src/views/inplace/InplaceDoc.vue
index eade5c352..1fd06f185 100755
--- a/src/views/inplace/InplaceDoc.vue
+++ b/src/views/inplace/InplaceDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Inplace from 'primevue/inplace';
 
 </code></pre>
@@ -12,8 +11,7 @@ import Inplace from 'primevue/inplace';
 				<h5>Getting Started</h5>
 				<p>Inplace requires <i>display</i> and <i>content</i> templates to define the content of each state.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Inplace&gt;
     &lt;template #display&gt;
         &lt;span class="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt;
@@ -28,8 +26,7 @@ import Inplace from 'primevue/inplace';
 
                 <h5>Closable</h5>
                 <p><i>closable</i> property is handy within forms as it enables to switch back to output mode after editing is completed using a button displayed next to the form field.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Inplace :closable="true"&gt;
     &lt;template #display&gt;
         &#123;&#123;text || 'Click to Edit'&#125;&#125;
@@ -43,8 +40,7 @@ import Inplace from 'primevue/inplace';
 
 				<h5>Lazy Data</h5>
 				<p>Inplace allows lazy loading content so that the content gets initialized after getting opened instead of on load. Here is an example that loads, data of a table if the user decides to open the inplace.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Inplace @open="loadData"&gt;
     &lt;template #display&gt;
         View Data
@@ -61,8 +57,7 @@ import Inplace from 'primevue/inplace';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -176,8 +171,7 @@ export default {
                 </a>
                 <LiveEditor name="InplaceDemo" :sources="sources" service="ProductService" data="products-small" :components="['InputText', 'DataTable', 'Column']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Input&lt;/h3&gt;
 &lt;Inplace :closable="true"&gt;
     &lt;template #display&gt;
@@ -216,8 +210,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/inputgroup/InputGroupDoc.vue b/src/views/inputgroup/InputGroupDoc.vue
index 55736e68b..ee0283dfd 100755
--- a/src/views/inputgroup/InputGroupDoc.vue
+++ b/src/views/inputgroup/InputGroupDoc.vue
@@ -8,8 +8,7 @@
                     </a>
                     <LiveEditor name="InputGroupDemo" :sources="sources" :components="['InputText', 'Button', 'RadioButton', 'Checkbox']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Addons&lt;/h3&gt;
 &lt;div class="p-grid p-fluid"&gt;
     &lt;div class="p-col-12 p-md-4"&gt;
@@ -114,8 +113,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/inputmask/InputMaskDoc.vue b/src/views/inputmask/InputMaskDoc.vue
index cb6e59b3b..7121c27ae 100755
--- a/src/views/inputmask/InputMaskDoc.vue
+++ b/src/views/inputmask/InputMaskDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import InputMask from 'primevue/inputmask';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>A model can be bound using the standard v-model directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputMask v-model="value" mask="99-999999" /&gt;
 
 </code></pre>
@@ -31,16 +29,14 @@ import InputMask from 'primevue/inputmask';
                         * - Alpha numberic character (A-Z,a-z,0-9)
                     </li>
                 </ul>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputMask v-model="value" mask="a*-999-a999" /&gt;
 
 </code></pre>
 
                 <h5>SlotChar</h5>
                 <p>Underscore is the default placeholder for a mask and this can be customized using <i>slotChart</i> option.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputMask v-model="value" mask="99/99/9999" slotChar="mm/dd/yyyy" /&gt;
 
 </code></pre>
@@ -49,8 +45,7 @@ import InputMask from 'primevue/inputmask';
                     Use <i>autoClear</i> property to control this behavior. In addition, certain part of
                     a mask can be made optional by using ? symbol where anything after the question
                     mark becomes optional.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputMask v-model="value" mask="(999) 999-9999? x99999" /&gt;
 
 </code></pre>
@@ -135,8 +130,7 @@ import InputMask from 'primevue/inputmask';
                     </a>
                     <LiveEditor name="InputMaskDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-fluid p-formgrid p-grid"&gt;
     &lt;div class="p-field p-col-12 p-md-4"&gt;
         &lt;label for="basic"&gt;Basic&lt;/label&gt;
@@ -171,8 +165,7 @@ import InputMask from 'primevue/inputmask';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue
index 2988ba534..59440a7c8 100755
--- a/src/views/inputnumber/InputNumberDoc.vue
+++ b/src/views/inputnumber/InputNumberDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import InputNumber from 'primevue/inputnumber';
 
 </code></pre>
@@ -12,31 +11,27 @@ import InputNumber from 'primevue/inputnumber';
 <h5>Getting Started</h5>
             <p>InputNumber is used with the standard v-model directive. Component always provides a number type although formatting on the input is a string.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputNumber v-model="value" /&gt;
 
 </code></pre>
 
             <h5>Decimal Mode</h5>
             <p>Format is defined using the <i>mode</i> property, "decimal" is the default value allowing only integers when there is no other configuration.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputNumber v-model="value" mode="decimal" /&gt;
 
 </code></pre>
 
             <p>Fractions are configured with the <i>minFractionDigits</i> property. Optionally <i>maxFractionDigits</i> can be used to defined a boundary for the maximum digits.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" /&gt;
 &lt;InputNumber v-model="value2" mode="decimal" :minFractionDigits="2" :maxFractionDigits="2" /&gt;
 
 </code></pre>
 
             <p><i>locale</i> option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per <a href="https://tools.ietf.org/html/rfc5646">BCP Language Tag</a>.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 User Locale
 &lt;InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" /&gt;
 
@@ -54,8 +49,7 @@ Indian Locale
             <h5>Currency</h5>
             <p>Currency formatting is specified by setting the <i>mode</i> option to currency and <i>currency</i> property. In addition <i>currencyDisplay</i> option
             allows how the currency is displayed, valid values are "symbol" (default) or "code".</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 United States
 &lt;InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" /&gt;
 
@@ -72,8 +66,7 @@ Japan
 
             <h5>Prefix and Suffix</h5>
             <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 Mile
 &lt;InputNumber v-model="value1" suffix=" mi" /&gt;
 
@@ -91,8 +84,7 @@ Temperature
             <h5>Buttons</h5>
             <p>Spinner buttons is enabled using the <i>showButtons</i> options and layout is defined with the <i>buttonLayout</i>. Default value is "stacked" whereas
             "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up and down arrow keys can be used to spin the values with keyboard.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 Stacked
 &lt;InputNumber v-model="value1" showButtons mode="currency" currency="USD" /&gt;
 
@@ -108,8 +100,7 @@ Vertical
 
             <h5>Step</h5>
             <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputNumber v-model="value" :step="0.25" /&gt;
 
 </code></pre>
@@ -117,8 +108,7 @@ Vertical
 
             <h5>Min and Max Boundaries</h5>
             <p>Value to be entered can be restricted by configuring the <i>min</i> and <i>max</i> options.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputNumber v-model="value" :min="0" :max="100" /&gt;
 
 </code></pre>
@@ -372,8 +362,7 @@ Vertical
                     </a>
                     <LiveEditor name="InputNumberDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Numerals&lt;/h3&gt;
 &lt;div class="p-fluid p-grid p-formgrid"&gt;
     &lt;div class="p-field p-col-12 p-md-3"&gt;
@@ -476,8 +465,7 @@ Vertical
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/inputswitch/InputSwitchDoc.vue b/src/views/inputswitch/InputSwitchDoc.vue
index 941af2a78..4c72684e5 100755
--- a/src/views/inputswitch/InputSwitchDoc.vue
+++ b/src/views/inputswitch/InputSwitchDoc.vue
@@ -3,22 +3,19 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import InputSwitch from 'primevue/inputswitch';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputSwitch v-model="checked" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -31,8 +28,7 @@ export default {
 
 				<p>As model is two-way binding enabled, setting the bound value as true displays the state as checked by default.</p>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -107,8 +103,7 @@ export default {
 					</a>
 					<LiveEditor name="InputSwitchDemo" :sources="sources"/>
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;InputSwitch v-model="checked1" /&gt;
 
@@ -117,8 +112,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue
index 4e2250842..8397dea9f 100755
--- a/src/views/inputtext/InputTextDoc.vue
+++ b/src/views/inputtext/InputTextDoc.vue
@@ -3,24 +3,21 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import InputText from 'primevue/inputtext';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>A model can be bound using the standard v-model directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputText type="text" v-model="value" /&gt;
 
 </code></pre>
 
 				<h5>Float Label</h5>
 				<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;span class="p-float-label"&gt;
 	&lt;InputText id="username" type="text" v-model="value" /&gt;
 	&lt;label for="username"&gt;Username&lt;/label&gt;
@@ -31,8 +28,7 @@ import InputText from 'primevue/inputtext';
                 <h5>Icons</h5>
                 <p>An icon can be integrated within an input field by wrapping the input and the icon with an element having <i>p-input-icon-right</i>
                 and <i>p-input-icon-left</i> classes depending on the icon location.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;span class="p-input-icon-left"&gt;
     &lt;i class="pi pi-search" /&gt;
     &lt;InputText type="text" v-model="value1" placeholder="Search" /&gt;
@@ -54,8 +50,7 @@ import InputText from 'primevue/inputtext';
                 <h5>Sizes</h5>
                 <p>2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>.
                 Note that these classes are mainly be used to change the size of a particular field, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt;
 &lt;InputText type="text" placeholder="Normal" /&gt;
 &lt;InputText type="text" class="p-inputtext-lg"  placeholder="Large" /&gt;
@@ -64,8 +59,7 @@ import InputText from 'primevue/inputtext';
 
                 <p>Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the
                     class to a container element so that descendant inputs share the same style easier.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-inputtext-sm"&gt;
     &lt;InputText /&gt;
     &lt;InputNumber /&gt;
@@ -79,8 +73,7 @@ import InputText from 'primevue/inputtext';
                 to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer
                 to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-input-filled"&gt;
     &lt;InputText type="text" /&gt;
     &lt;InputText type="text" /&gt;
@@ -157,8 +150,7 @@ import InputText from 'primevue/inputtext';
                     </a>
                     <LiveEditor name="InputTextDemo" :sources="sources" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Basic&lt;/h5&gt;
     &lt;InputText type="text" v-model="value1" /&gt;
@@ -209,8 +201,7 @@ import InputText from 'primevue/inputtext';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue
index dc2b46845..3db2e55e6 100644
--- a/src/views/invalid/InvalidDemo.vue
+++ b/src/views/invalid/InvalidDemo.vue
@@ -55,8 +55,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="InvalidDemo" :sources="sources" service="CountryService" data="countries" :components="['InputText', 'AutoComplete', 'Calendar', 'Chips', 'InputMask', 'InputNumber', 'CascadeSelect', 'Dropdown', 'MultiSelect', 'Textarea']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-fluid p-grid"&gt;
     &lt;div class="p-field p-col-12 p-md-4"&gt;
         &lt;InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" /&gt;
@@ -96,8 +95,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import CountryService from '../../service/CountryService';
 
 export default {
diff --git a/src/views/knob/KnobDoc.vue b/src/views/knob/KnobDoc.vue
index 7d0d7b608..ab89fb311 100644
--- a/src/views/knob/KnobDoc.vue
+++ b/src/views/knob/KnobDoc.vue
@@ -3,21 +3,18 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Knob from 'primevue/knob';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Knob is an input component and used with the standard <i>v-model</i> directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Knob v-model="value" /&gt;
 
 </code></pre>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 data() {
 	return {
 		value: 0
@@ -28,16 +25,14 @@ data() {
 
 				<h5>Minimum and Maximum</h5>
 				<p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Knob v-model="value" :min="-50" :max="10" /&gt;
 
 </code></pre>
 
 				<h5>Step</h5>
 				<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Knob v-model="value" :step="10" /&gt;
 
 </code></pre>
@@ -45,16 +40,14 @@ data() {
 				<h5>Styling</h5>
 				<p><i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text. 
 				In addition, <i>strokeWidth</i> is used to determine the width of the stroke of range and value sections.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise"  /&gt;
 
 </code></pre>
 
 				<h5>Size</h5>
 				<p>Default size of the Knob is 100 pixels for width and height, use the <i>size</i> property to customize it per your requirements.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Knob v-model="value" :size="200" /&gt;
 
 </code></pre>
@@ -216,8 +209,7 @@ data() {
                     </a>
                     <LiveEditor name="KnobDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-grid p-formgrid p-text-center"&gt;
 	&lt;div class="p-field p-col-12 p-md-4"&gt;
 		&lt;h5&gt;Basic&lt;/h5&gt;
@@ -259,8 +251,7 @@ data() {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/listbox/ListboxDoc.vue b/src/views/listbox/ListboxDoc.vue
index e72ad2bd0..d4c6df0f3 100755
--- a/src/views/listbox/ListboxDoc.vue
+++ b/src/views/listbox/ListboxDoc.vue
@@ -3,22 +3,19 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Listbox from 'primevue/listbox';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Listbox requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 data() {
 	return {
 		selectedCity: null,
@@ -38,16 +35,14 @@ data() {
 				<p>Listbox allows selection of either single or multiple items. In single case, model should be a single object reference whereas in multiple case should be an array. Multiple items can either be selected
 					using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled
 					devices metaKeySelection is turned off automatically.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/&gt;
 
 </code></pre>
 
 				<h5>Custom Content</h5>
 				<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
 	&lt;template #option="slotProps"&gt;
 		&lt;div&gt;
@@ -61,8 +56,7 @@ data() {
 
 				<h5>Filter</h5>
 				<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/&gt;
 
 </code></pre>
@@ -242,8 +236,7 @@ data() {
                     </a>
                     <LiveEditor name="ListboxDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Single&lt;/h5&gt;
 &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" /&gt;
 
@@ -259,8 +252,7 @@ data() {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/locale/LocaleDemo.vue b/src/views/locale/LocaleDemo.vue
index cda52b00a..d3b754ead 100644
--- a/src/views/locale/LocaleDemo.vue
+++ b/src/views/locale/LocaleDemo.vue
@@ -6,8 +6,7 @@
 
             <h5>Getting Started</h5>
             <p>Locale values are stored in the global configuration that becomes accessible after installing the PrimeVue.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import {createApp} from 'vue';
 import PrimeVue from 'primevue/config';
 const app = createApp(App);
@@ -17,8 +16,7 @@ app.use(PrimeVue);
 </code></pre>
 
             <p>Second parameter of the <i>use</i> function can be used to initiate the locale during PrimeVue installation.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 app.use(PrimeVue, {
     locale: {
         accept: 'Aceptar',
@@ -33,8 +31,7 @@ app.use(PrimeVue, {
                 application and need to change the language dynamically.</p>
 
             <h6>Options API</h6>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     methods: {
         changeToSpanish() {
@@ -47,8 +44,7 @@ export default {
 </code></pre>
 
             <h6>Composition API</h6>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import { defineComponent, reactive } from "vue";
 import { usePrimeVue } from "primevue/config";
 
diff --git a/src/views/megamenu/MegaMenuDoc.vue b/src/views/megamenu/MegaMenuDoc.vue
index 1d19229d0..4ae1a3be5 100755
--- a/src/views/megamenu/MegaMenuDoc.vue
+++ b/src/views/megamenu/MegaMenuDoc.vue
@@ -3,22 +3,19 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import MegaMenu from 'primevue/megamenu';
 
 </code></pre>
 
                 <h5>MenuModel</h5>
                 <p>MegaMenu uses the common MenuModel API to define the items of the model, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;MegaMenu :model="items" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -142,16 +139,14 @@ export default {
 
                 <h5>Orientation</h5>
                 <p>Default orientation is "horizontal" with "vertical" as the alternative.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;MegaMenu :model="items" orientation="vertical" /&gt;
 
 </code></pre>
 
                 <h5>Custom Content</h5>
                 <p>Any content inside the megamenu will be displayed on the right side by default. You may use ".p-megamenu-custom" style class to change the location of the content.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;MegaMenu :model="items"&gt;
     &lt;InputText placeholder="Search" type="text" /&gt;
     &lt;Button label="Logout" icon="pi pi-power-off" /&gt;
@@ -259,8 +254,7 @@ export default {
                     <LiveEditor name="MegaMenuDemo" :sources="sources" :router="true" />
                 </div>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Horizontal&lt;/h3&gt;
 &lt;MegaMenu :model="items" /&gt;
 
@@ -269,8 +263,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue
index 8e3b92e49..a69d1b70b 100755
--- a/src/views/menu/MenuDoc.vue
+++ b/src/views/menu/MenuDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Menu from 'primevue/menu';
 
 </code></pre>
@@ -14,14 +13,12 @@ import Menu from 'primevue/menu';
 
 				<h5>Getting Started</h5>
 				<p>Menu requires a collection of menuitems as its model.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Menu :model="items" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -59,8 +56,7 @@ export default {
 
                 <h5>SubMenus</h5>
                 <p>Menu supports one level of nesting via subitems of an item.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 const items: [
     {
         label: 'Options',
@@ -79,15 +75,13 @@ const items: [
                 <h5>Popup Mode</h5>
                 <p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
 &lt;Menu ref="menu" :model="items" :popup="true" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 toggle(event) {
     this.$refs.menu.toggle(event);
 }
@@ -218,8 +212,7 @@ toggle(event) {
                     </a>
                     <LiveEditor name="MenuDemo" :sources="sources" :toastService="true" :router="true" :components="['Button']"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Inline&lt;/h3&gt;
 &lt;Menu :model="items" /&gt;
 
@@ -229,8 +222,7 @@ toggle(event) {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue
index 74afc4c69..a8faf2c48 100755
--- a/src/views/menubar/MenubarDoc.vue
+++ b/src/views/menubar/MenubarDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Menubar from 'primevue/menubar';
 
 </code></pre>
@@ -14,14 +13,12 @@ import Menubar from 'primevue/menubar';
 
 				<h5>Getting Started</h5>
 				<p>Menubar requires a collection of menuitems as its model.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Menubar :model="items" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -161,8 +158,7 @@ export default {
 
                 <h5>Custom Content</h5>
                 <p>Two slots named "start" and "end" are provided to embed content before or after the menubar.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Menubar :model="items"&gt;
     &lt;template #start&gt;
         Before
@@ -251,8 +247,7 @@ export default {
                </a>
                <LiveEditor name="MenubarDemo" :sources="sources" :router="true" :components="['InputText']"/>
             </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Menubar :model="items"&gt;
     &lt;template #start&gt;
         &lt;img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2"&gt;
@@ -265,8 +260,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/menumodel/MenuModel.vue b/src/views/menumodel/MenuModel.vue
index 21b349907..9ed2da77c 100755
--- a/src/views/menumodel/MenuModel.vue
+++ b/src/views/menumodel/MenuModel.vue
@@ -9,8 +9,7 @@
 
             <h5>MenuItem</h5>
                 <p>Core of the API is the MenuItem class that defines various options such as the label, icon and children of an item in a menu.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 const items: [
     {
         label: 'Options',
@@ -117,8 +116,7 @@ const items: [
 
                 <h5>Command</h5>
                 <p>The function to invoke when an item is clicked is defined using the command property.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 const items = [
     {
         label: 'New',
@@ -134,8 +132,7 @@ const items = [
 
                 <h5>Navigation</h5>
                 <p>Navigation is specified using <i>url</i> property for external links or using <i>to</i> property for internal routing.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 const items = [
     {
         label: 'Internal',
@@ -154,8 +151,7 @@ const items = [
             <h5>Visibility</h5>
             <p>It is a common case to hide certain items based on conditions such as user roles, <i>visible</i> property is available
             to implement such cases by supporting functions that returns booleans or simple booleans.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 const items = [
     {
         label: 'Remove',
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index 03bf7aff9..96475c3c0 100755
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -3,30 +3,26 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Message from 'primevue/message';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Message component requires a content to display.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Message&gt;Welcome to PrimeVue&lt;/Message&gt;
 
 </code></pre>
 
                 <p>Multiple messages can be displayed using the standard v-for directive.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 data() {
 	return {
 		messages: [
@@ -51,8 +47,7 @@ data() {
 
 				<h5>Closable</h5>
 				<p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Message severity="success" :closable="false"&gt;Order Submitted&lt;/Message&gt;
 
 </code></pre>
@@ -60,22 +55,19 @@ data() {
 				<h5>Sticky</h5>
 				<p>Messages are sticky by default, if you require them to be cleared automatically, disable <i>sticky</i> property and optionally configure the <i>life</i> property to specify how long the message
                 should be displayed which is 3000 ms by default.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt;
 
 </code></pre>
 
 				<h5>Inline Message Component</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import InlineMessage from 'primevue/inlinemessage';
 
 </code></pre>
 
 				<p>InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputText placeholder="Username" class="p-invalid" /&gt;
 &lt;InlineMessage&gt;Field is required&lt;/InlineMessage&gt;
 
@@ -266,8 +258,7 @@ import InlineMessage from 'primevue/inlinemessage';
                     </a>
                     <LiveEditor name="MessageDemo" :sources="sources" :components="['InlineMessage', 'Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Severities&lt;/h5&gt;
 &lt;Message severity="success"&gt;Success Message Content&lt;/Message&gt;
 &lt;Message severity="info"&gt;Info Message Content&lt;/Message&gt;
@@ -314,8 +305,7 @@ import InlineMessage from 'primevue/inlinemessage';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -336,8 +326,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 button.p-button {
 	margin-right: .5rem;
 }
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 3dde62f60..0cf361f64 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -3,22 +3,19 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import MultiSelect from 'primevue/multiselect';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>MultiSelect requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 data() {
 	return {
 		selectedCars: null,
@@ -40,8 +37,7 @@ data() {
 
                 <h5>Chips Display</h5>
                 <p>A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the <i>display</i> property to visualize the items as tokens.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" display="chip"/&gt;
 
 </code></pre>
@@ -49,8 +45,7 @@ data() {
 				<h5>Custom Content</h5>
 				<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
 				<p>In addition the <i>value</i> template can be used to customize the selected values display instead of the default comma separated list.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt;
 	&lt;template #value="slotProps"&gt;
 		&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt;
@@ -73,8 +68,7 @@ data() {
 
 				<h5>Filter</h5>
 				<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable the <i>filter</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;MultiSelect v-model="selectedCars" :options="cars" :filter="true" optionLabel="brand" placeholder="Select Brands"/&gt;
 
 </code></pre>
@@ -335,8 +329,7 @@ data() {
                     <LiveEditor name="MultiSelectDemo" :sources="sources"/>
                 </div>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
 &lt;MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
 
@@ -364,8 +357,7 @@ data() {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -397,8 +389,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .p-multiselect {
     min-width: 15rem;
 }
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index 3f6b6211e..2017bf029 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import OrderList from 'primevue/orderlist';
 
 </code></pre>
@@ -14,8 +13,7 @@ import OrderList from 'primevue/orderlist';
                 <p>Header of the component is defined with the "header" template and to define the content of an item in the list a named template called "item" needs to be defined which gets the
                     <i>item</i> and the <i>index</i> via slotProps.
                 </p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;OrderList v-model="cars" listStyle="height:auto" dataKey="vin"&gt;
     &lt;template #header&gt;
         List of Cars
@@ -40,8 +38,7 @@ import OrderList from 'primevue/orderlist';
 
                 <p>Use the v-model directive to enable two-way binding.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;OrderList v-model="cars" dataKey="vin" v-model:selection="selection"&gt;
     &lt;template #header&gt;
         List of Cars
@@ -173,8 +170,7 @@ import OrderList from 'primevue/orderlist';
                     </a>
                     <LiveEditor name="OrderListDemo" :sources="sources" service="ProductService" data="products-small" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;OrderList v-model="products" listStyle="height:auto" dataKey="id"&gt;
     &lt;template #header&gt;
         List of Products
@@ -199,8 +195,7 @@ import OrderList from 'primevue/orderlist';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
@@ -220,8 +215,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .product-item {
 	display: flex;
 	align-items: center;
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index 12b874279..7f992d52b 100755
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/src/views/organizationchart/OrganizationChartDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import OrganizationChart from 'primevue/organizationchart';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>OrganizationChart requires an OrganizationChartNode instance as its root value and at least one template to display node content where node instance is passed via slotProps.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
  &lt;OrganizationChart :value="data"&gt;
     &lt;template #default="slotProps"&gt;
         &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
@@ -21,8 +19,7 @@ import OrganizationChart from 'primevue/organizationchart';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -132,8 +129,7 @@ export default {
                 <p>Example below displays the root of chart in previous example as collapsed. Notice that the collapsedKeys is a map whose key is the
                     key of the node and value is true.
                 </p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
  &lt;OrganizationChart :value="data" :collapsible="true" :collapsedKeys="collapsedKeys"&gt;
     &lt;template #default="slotProps"&gt;
         &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
@@ -142,8 +138,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -193,8 +188,7 @@ export default {
 				<h5>Selection</h5>
 				<p>Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the v-model directive. Note that
                 selection on a particular node can be disabled if the <i>selectable</i> is false on the node instance.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
  &lt;OrganizationChart :value="data" selecionMode="single" v-model:selectionKeys="selectionKeys"&gt;
     &lt;template #default="slotProps"&gt;
         &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
@@ -203,8 +197,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -252,8 +245,7 @@ export default {
                 <h5>Templating</h5>
                 <p>The <i>type</i> property of an OrganizationChartNode is used to map a template to a node. If it is undefined, the default template is used.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;OrganizationChart :value="data"&gt;
     &lt;template #person="slotProps"&gt;
         &lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt;
@@ -269,8 +261,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -496,8 +487,7 @@ export default {
                     </a>
                     <LiveEditor name="OrganizationChartDemo" :sources="sources" :toastService="true" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Advanced&lt;/h3&gt;
 &lt;OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
     @node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand"&gt;
@@ -522,8 +512,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -662,8 +651,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 ::v-deep(.p-organizationchart) {
     .p-person {
         padding: 0;
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index fbc396ef5..d8ac2b383 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import OverlayPanel from 'primevue/overlaypanel';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
 
 &lt;OverlayPanel ref="op"&gt;
@@ -21,8 +19,7 @@ import OverlayPanel from 'primevue/overlaypanel';
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 toggle(event) {
     this.$refs.op.toggle(event);
 }
@@ -32,8 +29,7 @@ toggle(event) {
 				<h5>Dismissable and CloseIcon</h5>
 				<p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior.
 					Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt;
 	&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
 &lt;/OverlayPanel&gt;
@@ -161,8 +157,7 @@ toggle(event) {
 					</a>
 					<LiveEditor name="OverlayPanelDemo" :sources="sources" service="ProductService" data="products-small" :toastService="true" :components="['Button', 'DataTable', 'Column']" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt;
 
 &lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"&gt;
@@ -183,8 +178,7 @@ toggle(event) {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
diff --git a/src/views/paginator/PaginatorDoc.vue b/src/views/paginator/PaginatorDoc.vue
index 15a285d15..b61843c9e 100755
--- a/src/views/paginator/PaginatorDoc.vue
+++ b/src/views/paginator/PaginatorDoc.vue
@@ -3,16 +3,14 @@
         <TabView>
             <TabPanel header="Documentation">
                 <h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Paginator from 'primevue/paginator';
 
 </code></pre>
 
                 <h5>Getting Started</h5>
                 <p><i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Paginator :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
 
 </code></pre>
@@ -20,31 +18,27 @@ import Paginator from 'primevue/paginator';
                 <h5>Start Index</h5>
                 <p><i>first</i> property defines the index of the first item displayed by the paginator.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Paginator :first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
                 <p>Use the v-model directive to enable two-way binding, this is useful in cases where you need to programmatically control the paginator.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
                 <h5>Rows Per Page</h5>
                 <p>Number of items per page can be changed by the user using a dropdown with the <i>rowsPerPageOptions</i> property which accepts an array of possible values.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Paginator v-model:first="offset" :rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
                 <p>As <i>rows</i> also change when the dropdown changes, use the optional v-model directive if you need two-way binding.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Paginator v-model:first="offset" v-model:rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
 
 </code></pre>
@@ -81,8 +75,7 @@ import Paginator from 'primevue/paginator';
                 <p>There are two templates available named "left" and "right" to add custom content to these locations. Both templates get
                     a state object as a slot property to provide the current page, first index and the rows.
                 </p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;
     &lt;template #left="slotProps"&gt;
         Page: &#123;&#123;slotProps.state.page&#125;&#125;
@@ -98,14 +91,12 @@ import Paginator from 'primevue/paginator';
 
                 <h5>Page Change Event</h5>
                 <p>Paginator provides only one event called <i>page</i> that passes all the information about the change event.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Paginator :rows="10" :totalRecords="totalItemsCount" @page="onPage($event)"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 onPage(event) {
     //event.page: New page number
     //event.first: Index of first record
@@ -263,8 +254,7 @@ onPage(event) {
                     </a>
                     <LiveEditor name="PaginatorDemo" :sources="sources" :components="['Button']" />
                 </div>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
 
@@ -285,8 +275,7 @@ onPage(event) {
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -309,8 +298,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .p-button.p-button-icon-only {
     border-radius: 0;
 }
diff --git a/src/views/panel/PanelDoc.vue b/src/views/panel/PanelDoc.vue
index 101194582..330957702 100755
--- a/src/views/panel/PanelDoc.vue
+++ b/src/views/panel/PanelDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Panel from 'primevue/panel';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Panel is a container component that accepts content as its children.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Panel header="Header"&gt;
 	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.
@@ -24,8 +22,7 @@ import Panel from 'primevue/panel';
 
                 <h5>Custom Header</h5>
                 <p>Header of the panel is either defined with the <i>header</i> property or the header template.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Panel&gt;
     &lt;template #header&gt;
         Header Content
@@ -37,8 +34,7 @@ import Panel from 'primevue/panel';
 
 				<h5>Toggleable</h5>
 				<p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Panel header="Header" :toggleable="true"&gt;
 	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.
@@ -49,8 +45,7 @@ import Panel from 'primevue/panel';
 </code></pre>
 
                 <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Panel header="Header Text" :toggleable="true" :collapsed="true"&gt;
 	Content
 &lt;/Panel&gt;
@@ -59,8 +54,7 @@ import Panel from 'primevue/panel';
 
                 <p>Use the v-model directive to enable two-way binding.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
 &lt;Panel header="Header Text" :toggleable="true" v-model:collapsed="isCollapsed"&gt;
 	Content
@@ -71,8 +65,7 @@ import Panel from 'primevue/panel';
                 <h5>Custom Icons</h5>
                 <p>Additional icons can be placed at the header section of the panel using the special <i>icons</i> slot. For a unified look, it is suggest to add <i>.p-panel-header-icon</i>
                 class to your icons.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;h5&gt;Advanced&lt;/h5&gt;
 &lt;Panel header="Header"&gt;
     &lt;template #icons&gt;
@@ -193,8 +186,7 @@ import Panel from 'primevue/panel';
                     <LiveEditor name="PanelDemo" :sources="sources" :toastService="true" :components="['Menu']" />
                 </div>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Regular&lt;/h5&gt;
 &lt;Panel header="Header"&gt;
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -219,8 +211,7 @@ import Panel from 'primevue/panel';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue
index 87278fb97..76f3e9409 100755
--- a/src/views/panelmenu/PanelMenuDoc.vue
+++ b/src/views/panelmenu/PanelMenuDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PanelMenu from 'primevue/panelmenu';
 
 </code></pre>
@@ -14,14 +13,12 @@ import PanelMenu from 'primevue/panelmenu';
 
 				<h5>Getting Started</h5>
 				<p>PanelMenu requires a collection of menuitems as its model.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;PanelMenu :model="items" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -229,14 +226,12 @@ export default {
                </a>
                <LiveEditor name="PanelMenuDemo" :sources="sources" :router="true" />
             </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;PanelMenu :model="items" /&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue
index 92dfe7aa8..d4a6f0f65 100755
--- a/src/views/password/PasswordDoc.vue
+++ b/src/views/password/PasswordDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Password from 'primevue/password';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>A model can be bound using the standard v-model directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Password v-model="value" /&gt;
 
 </code></pre>
@@ -41,8 +39,7 @@ import Password from 'primevue/password';
 
                 <h5>Templating</h5>
                 <p>3 slots are included to customize the overlay. These are <i>header</i>, <i>content</i> and <i>footer</i>. Note that content overrides the default meter.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Password v-model="value4"&gt;
     &lt;template #header&gt;
         &lt;h6&gt;Pick a password&lt;/h6&gt;
@@ -179,8 +176,7 @@ import Password from 'primevue/password';
                     </a>
                     <LiveEditor name="PasswordDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code>
+<pre v-code><code>
 <h5>Basic</h5>
 &lt;Password v-model="value1" :feedback="false" /&gt;
 
@@ -209,8 +205,7 @@ import Password from 'primevue/password';
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
index 5e895e0bc..86461645a 100755
--- a/src/views/picklist/PickListDoc.vue
+++ b/src/views/picklist/PickListDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import PickList from 'primevue/picklist';
 
 </code></pre>
@@ -12,8 +11,7 @@ import PickList from 'primevue/picklist';
 				<h5>Getting Started</h5>
                 <p>PickList requires a multidimensional array as its value bound with the v-model directive and a template for its content
                     that gets the <i>item</i> instance and the <i>index</i> via slotProps.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;PickList v-model="cars" dataKey="vin"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
@@ -30,8 +28,7 @@ import PickList from 'primevue/picklist';
 
                 <h5>Templates</h5>
                 <p>In addition to the mandatory "item" template, picklist provides "sourceHeader" and "targetHeader" slots as optional templates.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;PickList v-model="cars" dataKey="vin"&gt;
     &lt;template #sourceHeader&gt;
         Available
@@ -57,8 +54,7 @@ import PickList from 'primevue/picklist';
                 it gets updated when the user makes a selection. Since it is two-way binding enabled, your changes to the selection will be reflected as well.  Note that
                 this is optional and only necessary when you need to access the selection.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;PickList v-model="cars" dataKey="vin" v-model:selection="selection"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
@@ -232,8 +228,7 @@ import PickList from 'primevue/picklist';
                     </a>
                     <LiveEditor name="PickListDemo" :sources="sources" service="ProductService" data="products-small" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;PickList v-model="products" listStyle="height:342px" dataKey="id"&gt;
     &lt;template #sourceHeader&gt;
         Available
@@ -261,8 +256,7 @@ import PickList from 'primevue/picklist';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProductService from '../../service/ProductService';
 
 export default {
@@ -282,8 +276,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 product-item {
 	display: flex;
 	align-items: center;
diff --git a/src/views/primeflex/PrimeFlexSetup.vue b/src/views/primeflex/PrimeFlexSetup.vue
index 6b4524b52..4ecfb2f1d 100644
--- a/src/views/primeflex/PrimeFlexSetup.vue
+++ b/src/views/primeflex/PrimeFlexSetup.vue
@@ -8,8 +8,7 @@
             <h5>Download</h5>
             <p>PrimeFlex is available at <a href="https://www.npmjs.com/package/primeflex">npm</a>, if you have an existing application run the following commands to install it.</p>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 npm install primeflex --save
 
 </code></pre>
@@ -17,16 +16,14 @@ npm install primeflex --save
             <h5>Import</h5>
             <p>Next step is adding the primeflex.css to your application to include all utilities. If you prefer to pick the utilities, move to next step instead.</p>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 import 'primeflex/primeflex.css';
 
 </code></pre>
 
             <p>PrimeFlex is a lightweight library still if you have an application such as one based on vue-cli
                 that is able to import scss then you will be able to pick the utilities you need to make the app bundle even smaller.</p>
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 import 'primeflex/src/_variables.scss';
 import 'primeflex/src/_grid.scss';
 import 'primeflex/src/_formlayout.scss';
@@ -103,8 +100,7 @@ import 'primeflex/src/_elevation.scss';
             </p>
 
             <p><b>_overrides.scss</b></p>
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 $sm:640px;
 $md:720px;
 $lg:960px;
@@ -112,8 +108,7 @@ $xl:1080px;
 
 </code></pre>
 
-            <pre v-code.css>
-<code>
+            <pre v-code.css><code>
 import './assets/_overrides.scss';
 import 'primeflex/src/_variables.css';
 import 'primeflex/src/_grid.css';
diff --git a/src/views/progressbar/ProgressBarDoc.vue b/src/views/progressbar/ProgressBarDoc.vue
index 3304f235f..6cd206046 100755
--- a/src/views/progressbar/ProgressBarDoc.vue
+++ b/src/views/progressbar/ProgressBarDoc.vue
@@ -3,21 +3,18 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProgressBar from 'primevue/progressbar';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ProgressBar :value="value" /&gt;
 
 </code></pre>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 data() {
 	return {
 		value: 0
@@ -27,16 +24,14 @@ data() {
 </code></pre>
 
 				<p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ProgressBar mode="indeterminate"/&gt;
 
 </code></pre>
 
                 <h5>Slot</h5>
                 <p>A custom label can be placed inside the progress bar via the default slot.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;ProgressBar :value="value"&gt;
     Percent Complete: &#123;&#123;value&#125;&#125;%
 &lt;/ProgressBar&gt;
@@ -124,8 +119,7 @@ data() {
 				</a>
 				<LiveEditor name="ProgressBarDemo" :sources="sources" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Dynamic&lt;/h3&gt;
 &lt;ProgressBar :value="value1" /&gt;
 
@@ -137,8 +131,7 @@ data() {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/progressspinner/ProgressSpinnerDoc.vue b/src/views/progressspinner/ProgressSpinnerDoc.vue
index 1bdc6143b..4b94584d6 100755
--- a/src/views/progressspinner/ProgressSpinnerDoc.vue
+++ b/src/views/progressspinner/ProgressSpinnerDoc.vue
@@ -3,24 +3,21 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ProgressSpinner from 'primevue/progressspinner';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>ProgressSpinner is defined using ProgressSpinner element.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;ProgressSpinner /&gt;
 </template>
 </code></pre>
 
                 <h5>Colors</h5>
                 <p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 @keyframes p-progress-spinner-color {
     100%,
     0% {
@@ -113,8 +110,7 @@ import ProgressSpinner from 'primevue/progressspinner';
                     </a>
                     <LiveEditor name="ProgressSpinnerDemo" :sources="sources" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;ProgressSpinner /&gt;
 
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index 6763c5fd4..626941aaa 100755
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -3,22 +3,19 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import RadioButton from 'primevue/radiobutton';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Two-way value binding is defined using the standard v-model directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;RadioButton name="city" value="Chicago" v-model="city" /&gt;
 &lt;RadioButton name="city" value="Los Angeles" v-model="city" /&gt;
 
 </code></pre>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -29,8 +26,7 @@ export default {
 
 </code></pre>
 				<p>As model is two-way binding enabled, giving a default value to the model is enough to display a radio button as checked by default.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -115,8 +111,7 @@ export default {
                     </a>
                     <LiveEditor name="RadioButtonDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
     &lt;div class="p-field-radiobutton"&gt;
     &lt;RadioButton id="city1" name="city" value="Chicago" v-model="city" /&gt;
@@ -143,8 +138,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/rating/RatingDoc.vue b/src/views/rating/RatingDoc.vue
index 595feec54..f5ea8af8d 100755
--- a/src/views/rating/RatingDoc.vue
+++ b/src/views/rating/RatingDoc.vue
@@ -3,32 +3,28 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Rating from 'primevue/rating';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Two-way value binding is defined using v-model.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Rating v-model="val" /&gt;
 
 </code></pre>
 
 				<h5>Number of Stars</h5>
 				<p>Number of stars to display is defined with <i>stars</i> property, default is 5.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Rating v-model="val" :stars="7"/&gt;
 
 </code></pre>
 
 				<h5>Cancel</h5>
 				<p>A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Rating v-model="val" :cancel="false" /&gt;
 
 </code></pre>
@@ -143,8 +139,7 @@ import Rating from 'primevue/rating';
                     </a>
                     <LiveEditor name="RatingDemo" :sources="sources" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic {{val1}}&lt;/h3&gt;
 &lt;Rating v-model="val1" /&gt;
 
@@ -159,8 +154,7 @@ import Rating from 'primevue/rating';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
index df7412a13..8726dfcd9 100644
--- a/src/views/ripple/RippleDoc.vue
+++ b/src/views/ripple/RippleDoc.vue
@@ -6,8 +6,7 @@
                 <h5>Ripple</h5>
                 <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
                     your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import {createApp} from 'vue';
 import PrimeVue from 'primevue/config';
 const app = createApp(App);
@@ -20,8 +19,7 @@ app.use(PrimeVue, {ripple: true});
 
                 <h5>Directive</h5>
 				<p>Ripple is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>Vue.directive</i> function.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Ripple from 'primevue/ripple';
 
 Vue.directive('ripple', Ripple);
@@ -29,8 +27,7 @@ Vue.directive('ripple', Ripple);
 </code></pre>
 
                 <p>Ripple can also be configured locally using the directives property of your component.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 directives: {
     'ripple': Ripple
 }
@@ -38,22 +35,19 @@ directives: {
 </code></pre>
 
                 <p>Once the ripple is configured, add <i>.p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-ripple" v-ripple&gt;&lt;/div&gt;
 </template>
 </code></pre>
 
 				<h5>Styling</h5>
 				<p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>.p-ink</i> element.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-ripple purple" v-ripple&gt;&lt;/div&gt;
 </template>
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .p-ripple.purple .p-ink {
     background: rgba(256,39,176,.3);
 }
@@ -98,8 +92,7 @@ directives: {
                     </a>
                     <LiveEditor name="RippleDemo" :sources="sources" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card-container p-d-flex"&gt;
     &lt;div class="card primary-box p-ripple" v-ripple&gt;Default&lt;/div&gt;
     &lt;div class="card styled-box-green p-ripple" v-ripple&gt;Green&lt;/div&gt;
@@ -109,14 +102,12 @@ directives: {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {}
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 ::v-deep(.card-container) {
     .card {
         width: 75px;
diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue
index 2de783266..0e7763239 100644
--- a/src/views/scrollpanel/ScrollPanelDoc.vue
+++ b/src/views/scrollpanel/ScrollPanelDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ScrollPanel from 'primevue/scrollpanel';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>ScrollPanel usage is similar to any container element.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ScrollPanel style="width: 100%; height: 200px"&gt;
     content
 &lt;/ScrollPanel&gt;
@@ -21,16 +19,14 @@ import ScrollPanel from 'primevue/scrollpanel';
 
                 <h5>Customization</h5>
                 <p>Look and feel can easily be customized, here is an example with custom scrollbars.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ScrollPanel style="width: 100%; height: 200px" class="custom"&gt;
     content
 &lt;/ScrollPanel&gt;
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .custom .p-scrollpanel-wrapper {
     border-right: 9px solid #f4f4f4;
 }
@@ -101,8 +97,7 @@ import ScrollPanel from 'primevue/scrollpanel';
                     <LiveEditor name="ScrollPanelDemo" :sources="sources"/>
                 </div>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-grid"&gt;
     &lt;div class="p-col-12 p-md-4 p-p-5"&gt;
         &lt;ScrollPanel style="width: 100%; height: 200px"&gt;
@@ -159,16 +154,14 @@ import ScrollPanel from 'primevue/scrollpanel';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 
 }
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 ::v-deep(.p-scrollpanel) {
     p {
         padding: .5rem;
diff --git a/src/views/scrolltop/ScrollTopDoc.vue b/src/views/scrolltop/ScrollTopDoc.vue
index c5b7edb9a..a9f65cbd5 100644
--- a/src/views/scrolltop/ScrollTopDoc.vue
+++ b/src/views/scrolltop/ScrollTopDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ScrollTop from 'primevue/scrolltop';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Without any configuration, ScrollTop listens window scroll.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ScrollTop /&gt;
 
 </code></pre>
@@ -20,16 +18,14 @@ import ScrollTop from 'primevue/scrolltop';
 				<h5>Threshold</h5>
 				<p>When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is
 					defined with the <i>threshold</i> property that defaults to 400.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ScrollTop :threshold="200" /&gt;
 
 </code></pre>
 
 				<h5>Target Element</h5>
 				<p>ScrollTop can also be assigned to its parent element by setting <i>target</i> as "parent".</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div style="height: 400px; overflow: auto"&gt;
 	Content that overflows to container
 	&lt;ScrollTop /&gt;
@@ -112,8 +108,7 @@ import ScrollTop from 'primevue/scrolltop';
 					</a>
 					<LiveEditor name="ScrollTopDemo" :sources="sources" :components="['ScrollPanel']" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Window&lt;/h5&gt;
 &lt;p&gt;Scroll down the page to display the ScrollTo component.&lt;/p&gt;
 &lt;ScrollTop /&gt;
@@ -138,8 +133,7 @@ import ScrollTop from 'primevue/scrolltop';
 </template>
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 ::v-deep(.custom-scrolltop) {
     width: 2rem;
     height: 2rem;
diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue
index ebba12e21..3956c5bfe 100755
--- a/src/views/selectbutton/SelectButtonDoc.vue
+++ b/src/views/selectbutton/SelectButtonDoc.vue
@@ -3,22 +3,19 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import SelectButton from 'primevue/selectbutton';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>SelectButton requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;SelectButton v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -36,16 +33,14 @@ export default {
 
 				<h5>Multiple</h5>
 				<p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;SelectButton v-model="selectedCity" :options="cities" optionLabel="brand" :multiple="true" /&gt;
 
 </code></pre>
 
 				<h5>Templating</h5>
 				<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
 	&lt;template #option="slotProps"&gt;
         &lt;div class="car-option"&gt;
@@ -164,8 +159,7 @@ export default {
                     </a>
                     <LiveEditor name="SelectButtonDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Single Selection&lt;/h5&gt;
 &lt;SelectButton v-model="value1" :options="options" /&gt;
 
@@ -181,8 +175,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue
index c897afd40..1b21f07a6 100755
--- a/src/views/setup/Setup.vue
+++ b/src/views/setup/Setup.vue
@@ -15,8 +15,7 @@
             <h5>Download</h5>
             <p>PrimeVue is available at <a href="https://www.npmjs.com/package/primevue">npm</a>, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.</p>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 npm install primevue@^3.2.0-rc.1 --save
 npm install primeicons --save
 
@@ -26,8 +25,7 @@ npm install primeicons --save
             <p>This is the recommended way if your application uses <a href="https://cli.vuejs.org">Vue CLI</a>, <a href="https://vitejs.dev">Vite</a> or has a webpack based build with <a href="https://github.com/vuejs/vue-loader">vue-loader</a> configured.</p>
 
             <p>Begin with installing PrimeVue. This command only sets up the core configuration like locale and does not register any component.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import {createApp} from 'vue';
 import App from './App.vue';
 import PrimeVue from 'primevue/config';
@@ -38,8 +36,7 @@ app.use(PrimeVue);
 </code></pre>
 
             <p>Then import and register a component from the library. Import path is available in the documentation of the corresponding component.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import {createApp} from 'vue';
 import App from './App.vue';
 import PrimeVue from 'primevue/config';
@@ -53,8 +50,7 @@ app.component('Dialog', Dialog);
 </code></pre>
 
             <p>Finally you'll be able to utilize the component in your application.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Dialog&gt;&lt;/Dialog&gt;
 
 </code></pre>
@@ -63,16 +59,14 @@ app.component('Dialog', Dialog);
             <p>SFC files are available in the npm distribution and if you'd like to use SFCs directly, add <i>/sfc</i> as a suffix when referencing an import path. This will instruct your bundler to process the *.vue files
                 in your local build instead of using the compiled output. One use case for this approach is optimizing for SSR by removing whitespaces.</p>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Dialog from 'primevue/dialog/sfc';
 
 </code></pre>
 
             <h5>Script Tag</h5>
             <p>Other alternative is utilizing the components directly within the browser with the <i>iife</i> build. Note that PrimeVue does not provide a <i>umd</i> build.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;html&gt;
     &lt;head&gt;
         &lt;meta charset="utf-8"&gt;
@@ -119,8 +113,7 @@ import Dialog from 'primevue/dialog/sfc';
             <p>In addition, components require PrimeIcons library for icons.</p>
 
             <h6>Mandatory</h6>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 dependencies: {
     "vue": "^3.0.0",
     "primeicons": "^4.0.0"
@@ -167,8 +160,7 @@ dependencies: {
             <p>The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you
                 may import them to your main application component.</p>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 primevue/resources/themes/saga-blue/theme.css       //theme
 primevue/resources/primevue.min.css                 //core css
 primeicons/primeicons.css                           //icons
@@ -177,8 +169,7 @@ primeicons/primeicons.css                           //icons
 
             <h5>Free Themes</h5>
             <p>PrimeVue ships with various free themes to choose from.</p>
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 primevue/resources/themes/bootstrap4-light-blue/theme.css
 primevue/resources/themes/bootstrap4-light-purple/theme.css
 primevue/resources/themes/bootstrap4-dark-blue/theme.css
@@ -224,8 +215,7 @@ primevue/resources/themes/rhea/theme.css
             <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
                 your app's entry file (e.g. main.js) during the PrimeVue setup.
             </p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import {createApp} from 'vue';
 import PrimeVue from 'primevue/config';
 const app = createApp(App);
diff --git a/src/views/sidebar/SidebarDoc.vue b/src/views/sidebar/SidebarDoc.vue
index cd49a7604..12a4c8e3f 100755
--- a/src/views/sidebar/SidebarDoc.vue
+++ b/src/views/sidebar/SidebarDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Sidebar from 'primevue/sidebar';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Sidebar is used as a container and visibility is controlled with the <i>visible</i> property that requires a v-model two-way binding.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Sidebar v-model:visible="visibleLeft"&gt;
 	Content
 &lt;/Sidebar&gt;
@@ -23,8 +21,7 @@ import Sidebar from 'primevue/sidebar';
 
 				<h5>Position</h5>
 				<p>Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the <i>position</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Sidebar v-model:visible="visibleRight" position="right"&gt;
 	Content
 &lt;/Sidebar&gt;
@@ -33,8 +30,7 @@ import Sidebar from 'primevue/sidebar';
 
 				<h5>Size</h5>
 				<p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Sidebar v-model:visible="visibleLeft" class="p-sidebar-sm"&gt;&lt;/Sidebar&gt;
 &lt;Sidebar v-model:visible="visibleLeft" class="p-sidebar-md"&gt;&lt;/Sidebar&gt;
 &lt;Sidebar v-model:visible="visibleLeft" class="p-sidebar-lg"&gt;&lt;/Sidebar&gt;
@@ -43,8 +39,7 @@ import Sidebar from 'primevue/sidebar';
 
 				<h5>Full Screen</h5>
 				<p>Full screen mode allows the sidebar to cover whole screen.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Sidebar v-model:visible="visibleFull" position="full"&gt;
 	Content
 &lt;/Sidebar&gt;
@@ -215,8 +210,7 @@ import Sidebar from 'primevue/sidebar';
 					</a>
 					<LiveEditor name="SidebarDemo" :sources="sources" :components="['Button']"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" /&gt;
 &lt;Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2"  /&gt;
 &lt;Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2"  /&gt;
@@ -245,8 +239,7 @@ import Sidebar from 'primevue/sidebar';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
index 216a2dbf5..47ad5791a 100644
--- a/src/views/skeleton/SkeletonDoc.vue
+++ b/src/views/skeleton/SkeletonDoc.vue
@@ -3,32 +3,28 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Skeleton from 'primevue/skeleton';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Skeleton displays a rectangle in its simplest form.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Skeleton /&gt;
 
 </code></pre>
 
 				<h5>Circle</h5>
 				<p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Skeleton shape="circle"/&gt;
 
 </code></pre>
 
 				<h5>Size</h5>
 				<p>In order to customize the size, use <i>width</i> and <i>height</i> properties for rectangles and <i>size</i> for Circle and Square shapes.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Skeleton width="100%" height="2rem" /&gt;
 &lt;Skeleton shape="circle" size="50px" /&gt;
 
@@ -36,16 +32,14 @@ import Skeleton from 'primevue/skeleton';
 
 				<h5>Border Radius</h5>
 				<p>The default border radius of a rectangle is specified by the theme and can be overriden using the <i>borderRadius</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Skeleton borderRadius="16px" /&gt;
 
 </code></pre>
 
 				<h5>Animation</h5>
 				<p>Animation can be turned of by setting <i>animation</i> to "none".</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Skeleton animation="none" /&gt;
 
 </code></pre>
@@ -141,8 +135,7 @@ import Skeleton from 'primevue/skeleton';
 					</a>
 					<LiveEditor name="SkeletonDemo" :sources="sources" :components="['DataTable', 'Column']" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
 	&lt;div class="p-grid p-formgrid"&gt;
 		&lt;div class="p-field p-col-12 p-md-6"&gt;
diff --git a/src/views/slider/SliderDoc.vue b/src/views/slider/SliderDoc.vue
index 6068cd5f6..d6fa55917 100755
--- a/src/views/slider/SliderDoc.vue
+++ b/src/views/slider/SliderDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Slider from 'primevue/slider';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Two-way binding is defined using the standard v-model directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Slider v-model="value" /&gt;
 
 </code></pre>
@@ -20,14 +18,12 @@ import Slider from 'primevue/slider';
 				<h5>Range</h5>
 				<p>Range slider provides two handles to define two values. Enable <i>range</i> property and bind an array to implement a range slider.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Slider v-model="value" :range="true" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -40,24 +36,21 @@ export default {
 
 				<h5>Orientation</h5>
 				<p>Default layout of slider is horizontal, use <i>orientation</i> property for the alternative vertical mode.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Slider v-model="value" orientation="vertical" /&gt;
 
 </code></pre>
 
 				<h5>Step</h5>
 				<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Slider v-model="value" :step="20" /&gt;
 
 </code></pre>
 
 				<h5>Min-Max</h5>
 				<p>Boundaries are specified with min and max attributes.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Slider v-model="value" :step="20" :min="50" :max="200" /&gt;
 
 </code></pre>
@@ -189,8 +182,7 @@ export default {
                     </a>
                     <LiveEditor name="SliderDemo" :sources="sources" :components="['InputText']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic: {{value1}}&lt;/h3&gt;
 &lt;Slider v-model="value1" /&gt;
 
@@ -209,8 +201,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -225,8 +216,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .p-slider-horizontal, .p-inputtext {
 	width: 14rem;
 }
diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue
index d4f91ec88..7cc168aad 100644
--- a/src/views/spacing/SpacingDoc.vue
+++ b/src/views/spacing/SpacingDoc.vue
@@ -49,8 +49,7 @@
                 </ul>
 
                 <h5>Examples</h5>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;div class="p-mb-2"&gt;Margin bottom with level 2&lt;/div&gt;
 &lt;div class="p-mt-4"&gt;Margin top with level 2&lt;/div&gt;
 &lt;div class="p-m-2"&gt;Margin for all sides with level 2&lt;/div&gt;
@@ -69,8 +68,7 @@
 				<a href="https://github.com/primefaces/primevue/tree/master/src/views/spacing" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Margin&lt;/h5&gt;
     &lt;h6&gt;Without Spacing&lt;/h6&gt;
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index 8fd6a55c3..4ee325311 100755
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import SplitButton from 'primevue/splitbutton';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -50,8 +48,7 @@ export default {
 
 </code></pre>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt;
 
 </code></pre>
@@ -71,8 +68,7 @@ export default {
 					<li>.p-button-danger</li>
 				</ul>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt;
 &lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"&gt;&lt;/SplitButton&gt;
 &lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"&gt;&lt;/SplitButton&gt;
@@ -195,8 +191,7 @@ export default {
 					</a>
 					<LiveEditor name="SplitButtonDemo" :sources="sources" :toastService="true" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"&gt;&lt;/SplitButton&gt;
 
@@ -211,8 +206,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -255,8 +249,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .p-splitbutton {
 	margin-right: .5rem;
 }
diff --git a/src/views/splitter/SplitterDoc.vue b/src/views/splitter/SplitterDoc.vue
index eefd268cc..d3e90a921 100644
--- a/src/views/splitter/SplitterDoc.vue
+++ b/src/views/splitter/SplitterDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
 
@@ -12,8 +11,7 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 				<h5>Getting Started</h5>
 				<p>Splitter requires two SplitterPanel components to wrap.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Splitter style="height: 300px"&gt;
 	&lt;SplitterPanel&gt;
 		Panel 1
@@ -27,8 +25,7 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 				<h5>Multiple Panels</h5>
 				<p>Any number of panels can be nested inside a Splitter.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Splitter style="height: 300px"&gt;
 	&lt;SplitterPanel v-for="item of items" :key="item.key"&gt;
 		{{item.content}}
@@ -39,8 +36,7 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 				<h5>Layout</h5>
 				<p>Default orientation is configured with the <i>layout</i> property and default is the "horizontal" whereas other alternative is the "vertical".</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Splitter style="height: 300px" layout="vertical"&gt;
 	&lt;SplitterPanel&gt;
 		Panel 1
@@ -54,8 +50,7 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 				<h5>Initial Sizes</h5>
 				<p>When no size is defined, panels are split 50/50, use the <i>size</i> property to give relative widths e.g. 20/80.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Splitter style="height: 300px"&gt;
 	&lt;SplitterPanel :size="20" &gt;
 		Panel 1
@@ -69,8 +64,7 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 				<h5>Minimum Size</h5>
 				<p>Minimum size defines the lowest boundary for the size of a panel.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Splitter style="height: 300px"&gt;
 	&lt;SplitterPanel :size="20" :minSize="10"&gt;
 		Panel 1
@@ -84,8 +78,7 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 				<h5>Nested Panels</h5>
 				<p>Splitters can be combined to create advanced layouts.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Splitter style="height: 300px"&gt;
 	&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10"&gt;
 		Panel 1
@@ -115,8 +108,7 @@ import SplitterPanel from 'primevue/splitterpanel';
 				<p>Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes
 					can be restored. Define a <i>stateKey</i> to enable this feature. Default location of the state is
 					session storage and other option is the local storage which can be configured using the <i>stateStorage</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Splitter stateKey="mykey" stateStorage="local"&gt;
 	&lt;SplitterPanel&gt;
 		Panel 1
@@ -273,8 +265,7 @@ import SplitterPanel from 'primevue/splitterpanel';
 					</a>
 					<LiveEditor name="SplitterDemo" :sources="sources" :components="['SplitterPanel']"/>
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
 	&lt;h5&gt;Horizontal&lt;/h5&gt;
 	&lt;Splitter style="height: 300px"&gt;
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index f1edf5448..22922f752 100755
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Steps from 'primevue/steps';
 
 </code></pre>
@@ -14,15 +13,13 @@ import Steps from 'primevue/steps';
 
 				<h5>Getting Started</h5>
 				<p>Steps is integrated with Vue Router and requires a collection of menuitems as its model.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Steps :model="items" /&gt;
 &lt;router-view /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -50,8 +47,7 @@ export default {
 
                 <h5>Interactive</h5>
                 <p>Items are readonly by default, if you'd like to make them interactive then disable <i>readonly</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Steps :model="items" :readonly="false" /&gt;
 &lt;router-view /&gt;
 
@@ -134,8 +130,7 @@ export default {
                     </a>
                     <LiveEditor name="StepsDemo" :sources="sources" :toastService="true" :router="true" :components="['Card', 'InputText', 'InputNumber', 'Button', 'Dropdown', 'InputMask', 'Checkbox']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;Steps :model="items" :readonly="true" /&gt;
 &lt;/div&gt;
@@ -148,8 +143,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -196,8 +190,7 @@ export default {
 
 			</TabPanel>
             <TabPanel header="Personal">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="stepsdemo-content"&gt;
     &lt;Card&gt;
         &lt;template v-slot:title&gt;
@@ -235,8 +228,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data () {
         return {
@@ -274,8 +266,7 @@ export default {
 			</TabPanel>
 
             <TabPanel header="Seat">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="stepsdemo-content"&gt;
     &lt;Card&gt;
         &lt;template #title&gt;
@@ -311,8 +302,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data () {
         return {
@@ -358,8 +348,7 @@ export default {
 </code></pre>
 			</TabPanel>
             <TabPanel header="Payment">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="stepsdemo-content"&gt;
     &lt;Card&gt;
         &lt;template #title&gt;
@@ -403,8 +392,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data () {
         return {
@@ -429,8 +417,7 @@ export default {
 			</TabPanel>
             
             <TabPanel header="Confirmation">
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="stepsdemo-content"&gt;
     &lt;Card&gt;
         &lt;template #title&gt;
@@ -485,8 +472,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     props: {
         formData: Object
diff --git a/src/views/tabmenu/TabMenuDoc.vue b/src/views/tabmenu/TabMenuDoc.vue
index de62431fe..5bbaf9236 100755
--- a/src/views/tabmenu/TabMenuDoc.vue
+++ b/src/views/tabmenu/TabMenuDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import TabMenu from 'primevue/tabmenu';
 
 </code></pre>
@@ -14,15 +13,13 @@ import TabMenu from 'primevue/tabmenu';
 
 				<h5>Getting Started</h5>
 				<p>TabMenu is integrated with Vue Router and requires a collection of menuitems as its model.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;TabMenu :model="items" /&gt;
 &lt;router-view /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -112,15 +109,13 @@ export default {
                     </a>
                     <LiveEditor name="TabMenuDemo" :sources="sources" :router="true" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TabMenu :model="items" /&gt;
 &lt;router-view /&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue
index 4b892fc04..87b140563 100755
--- a/src/views/tabview/TabViewDoc.vue
+++ b/src/views/tabview/TabViewDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
 
@@ -12,8 +11,7 @@ import TabPanel from 'primevue/tabpanel';
 
 				<h5>Getting Started</h5>
 				<p>Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;TabView&gt;
 	&lt;TabPanel header="Header I"&gt;
 		Content I
@@ -30,8 +28,7 @@ import TabPanel from 'primevue/tabpanel';
 
                 <h5>Active</h5>
 				<p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;TabView :activeIndex="activeIndex"&gt;
 	&lt;TabPanel header="Header I"&gt;
 		Content I
@@ -47,8 +44,7 @@ import TabPanel from 'primevue/tabpanel';
 </code></pre>
 
                 <p>Two-way binding requires v-model.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;TabView v-model:activeIndex="activeIndex"&gt;
 	&lt;TabPanel header="Header I"&gt;
 		Content I
@@ -65,8 +61,7 @@ import TabPanel from 'primevue/tabpanel';
 
 				<h5>Disabled</h5>
 				<p>A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;TabView&gt;
 	&lt;TabPanel header="Header I"&gt;
 		Content I
@@ -83,8 +78,7 @@ import TabPanel from 'primevue/tabpanel';
 
 				<h5>Header Template</h5>
 				<p>Custom content for the title section of a panel is defined using the header template.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;TabView&gt;
 	&lt;TabPanel&gt;
 		&lt;template #header&gt;
@@ -106,8 +100,7 @@ import TabPanel from 'primevue/tabpanel';
 
                 <h5>Programmatic Control</h5>
 				<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button @click="active = 0" class="p-button-text" label="Activate 1st" /&gt;
 &lt;Button @click="active = 1" class="p-button-text" label="Activate 2nd" /&gt;
 &lt;Button @click="active = 2" class="p-button-text" label="Activate 3rd" /&gt;
@@ -126,8 +119,7 @@ import TabPanel from 'primevue/tabpanel';
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -140,8 +132,7 @@ export default {
 
                 <h5>Dynamic Tabs</h5>
 				<p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TabView&gt;
 	&lt;TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt;
 		&lt;p&gt;{{tab.content}}&lt;/p&gt;
@@ -150,8 +141,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -285,8 +275,7 @@ export default {
                     </a>
                     <LiveEditor name="TabViewDemo" :sources="sources" :components="['TabPanel', 'Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Default&lt;/h5&gt;
     &lt;TabView&gt;
@@ -402,8 +391,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -434,8 +422,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .tabview-custom {
 	i, span {
 		vertical-align: middle;
diff --git a/src/views/tag/TagDoc.vue b/src/views/tag/TagDoc.vue
index 213858b30..be2bcab4e 100644
--- a/src/views/tag/TagDoc.vue
+++ b/src/views/tag/TagDoc.vue
@@ -3,24 +3,21 @@
 		<TabView>
 			<TabPanel header="Documentation">
                 <h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Tag from 'primevue/tag';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Content of the tag is specified using the <i>value</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Tag value="New"&gt;&lt;/Tag&gt;
 
 </code></pre>
 
 				<h5>Icon</h5>
 				<p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Tag value="New" icon="pi pi-plus"&gt;&lt;/Tag&gt;
 
 </code></pre>
@@ -37,8 +34,7 @@ import Tag from 'primevue/tag';
 
 				<h5>Templating</h5>
 				<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Tag&gt;
    Content
 &lt;/Tag&gt;
@@ -128,8 +124,7 @@ import Tag from 'primevue/tag';
 					</a>
 					<LiveEditor name="TagDemo" :sources="sources" />
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Tags&lt;/h5&gt;
 &lt;Tag class="p-mr-2" value="Primary"&gt;&lt;/Tag&gt;
 &lt;Tag class="p-mr-2" severity="success" value="Success"&gt;&lt;/Tag&gt;
diff --git a/src/views/terminal/TerminalDoc.vue b/src/views/terminal/TerminalDoc.vue
index e67e4b9b7..c16e7a9cd 100755
--- a/src/views/terminal/TerminalDoc.vue
+++ b/src/views/terminal/TerminalDoc.vue
@@ -4,15 +4,13 @@
 			<TabPanel header="Documentation">
                 <h5>Mitt EventBus</h5>
                 <p>Terminal requires <a href="https://www.npmjs.com/package/mitt">Mitt</a>, a tiny 200b EventBus implementation.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 npm install mitt --save
 
 </code></pre>
 
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Terminal from 'primevue/terminal';
 import TerminalService from 'primevue/terminalservice';
 
@@ -22,14 +20,12 @@ import TerminalService from 'primevue/terminalservice';
 				<p>Commands are processed using an EventBus implementation called TerminalService.
                     Import this service into your component and subscribe to the <i>command</i> event to process the commands by
                         sending replies with the <i>response</i> event.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import TerminalService from 'primevue/terminalservice';
 
 export default {
@@ -144,15 +140,13 @@ export default {
                     </a>
                     <LiveEditor name="TerminalDemo" :sources="sources" :terminalService="true" />
                 </div>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;p&gt;Enter "date" to display the current date, "greet &#123;0&#125;" for a message and "random" to get a random number.&lt;/p&gt;
 &lt;Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import TerminalService from 'primevue/terminalservice';
 
 export default {
@@ -192,8 +186,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 p {
     margin-top: 0;
 }
diff --git a/src/views/text/TextDoc.vue b/src/views/text/TextDoc.vue
index 953096fa4..e5a9d4230 100644
--- a/src/views/text/TextDoc.vue
+++ b/src/views/text/TextDoc.vue
@@ -13,8 +13,7 @@
                     <li>right</li>
                     <li>justify</li>
                 </ul>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-text-left"&gt;Left&lt;/div&gt;
 &lt;div class="p-text-center"&gt;Center&lt;/div&gt;
 &lt;div class="p-text-right"&gt;Right&lt;/div&gt;
@@ -29,8 +28,7 @@
                     <li>wrap</li>
                     <li>truncate</li>
                 </ul>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
 &lt;div class="p-text-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
 &lt;div class="p-text-nowrap p-text-truncate" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
@@ -44,8 +42,7 @@
                     <li>uppercase</li>
                     <li>capitalize</li>
                 </ul>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-text-lowercase"&gt;LOWERCASE&lt;/div&gt;
 &lt;div class="p-text-uppercase"&gt;uppercase&lt;/div&gt;
 &lt;div class="p-text-capitalize"&gt;capitalize&lt;/div&gt;
@@ -60,8 +57,7 @@
                     <li>light</li>
                     <li>italic</li>
                 </ul>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-text-bold"&gt;Bold&lt;/div&gt;
 &lt;div class="p-text-normal"&gt;Normal&lt;/div&gt;
 &lt;div class="p-text-light"&gt;Light&lt;/div&gt;
@@ -74,8 +70,7 @@
 				<a href="https://github.com/primefaces/primevue/tree/master/src/views/text" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Alignment&lt;/h5&gt;
     &lt;div class="p-mb-3 p-text-left"&gt;Left&lt;/div&gt;
diff --git a/src/views/textarea/TextareaDoc.vue b/src/views/textarea/TextareaDoc.vue
index a22f061d5..745514026 100755
--- a/src/views/textarea/TextareaDoc.vue
+++ b/src/views/textarea/TextareaDoc.vue
@@ -3,24 +3,21 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Textarea from 'primevue/textarea';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>A model can be bound using the standard v-model directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Textarea v-model="value" rows="5" cols="30" /&gt;
 
 </code></pre>
 
 				<h5>AutoResize</h5>
 				<p>In auto resize mode, textarea grows instead of displaying a scrollbar.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Textarea v-model="value" :autoResize="true" rows="5" cols="30" /&gt;
 
 </code></pre>
@@ -87,8 +84,7 @@ import Textarea from 'primevue/textarea';
 					</a>
 					<LiveEditor name="TextareaDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;Textarea v-model="value1" rows="5" cols="30" /&gt;
 
@@ -100,8 +96,7 @@ import Textarea from 'primevue/textarea';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/theming/Theming.vue b/src/views/theming/Theming.vue
index 743997587..77fa7cb40 100755
--- a/src/views/theming/Theming.vue
+++ b/src/views/theming/Theming.vue
@@ -36,8 +36,7 @@
                 is easy as configuring the font size of your document. Code below sets the scale of the components based on 16px. If you reqire bigger or smaller components, just
                 change this variable and components will scale accordingly.</p>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 html {
     font-size: 16px;
 }
@@ -46,8 +45,7 @@ html {
 
             <p>Some commonly used components such as inputs, buttons and datatable also provide per component scaling with special classes. Components with specific scaling options
                 are documented in their own documentation.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;InputText type="text" class="p-inputtext-sm" /&gt;
 &lt;Button label="Button" class="p-button-lg" /&gt;
 
@@ -56,14 +54,12 @@ html {
             <h5>Local Styling</h5>
             <p>Theming styles the components globally, in case you required to change the style of a certain component for a specific use case use the class property and override the defaults.
                 Example below changes the background of the panel. Note that this is only for local styling, if you require to change the background color of all the panels, a custom theme is a far better choice.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Panel header="Custom Header" class="dark-panel"/&gt;
 
 </code></pre>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;style lang="scss" scoped&gt;
 ::v-deep(.dark-panel.p-panel) {
     .p-panel-titlebar {
diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue
index bcf037288..3fb33571f 100755
--- a/src/views/tieredmenu/TieredMenuDoc.vue
+++ b/src/views/tieredmenu/TieredMenuDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import TieredMenu from 'primevue/tieredmenu';
 
 </code></pre>
@@ -14,14 +13,12 @@ import TieredMenu from 'primevue/tieredmenu';
 
 				<h5>Getting Started</h5>
 				<p>TieredMenu requires a collection of menuitems as its model.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;TieredMenu :model="items" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -165,15 +162,13 @@ export default {
                 <h5>Popup Mode</h5>
                 <p>TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
 &lt;TieredMenu ref="menu" :model="items" :popup="true" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 toggle(event) {
     this.$refs.menu.toggle(event);
 }
@@ -308,8 +303,7 @@ toggle(event) {
                </a>
                <LiveEditor name="TieredMenuDemo" :sources="sources" :router="true" :components="['Button']" />
             </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Inline&lt;/h3&gt;
 &lt;TieredMenu :model="items" /&gt;
 
@@ -319,8 +313,7 @@ toggle(event) {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/timeline/TimelineDoc.vue b/src/views/timeline/TimelineDoc.vue
index 7e5c5b513..a96854db8 100644
--- a/src/views/timeline/TimelineDoc.vue
+++ b/src/views/timeline/TimelineDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Timeline from 'primevue/timeline';
 
 </code></pre>
@@ -12,8 +11,7 @@ import Timeline from 'primevue/timeline';
 				<h5>Getting Started</h5>
 				<p>Timeline receives the events with the <i>value</i> property as a collection of arbitrary objects. In addition, <i>content</i> template is required to display the representation of an event.
 					Example below is a sample events array that is used throughout the documentation.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -32,8 +30,7 @@ export default {
 
 </code></pre>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Timeline :value="events"&gt;
 	&lt;template #content="slotProps"&gt;
 		&#123;&#123;slotProps.item.status&#125;&#125;
@@ -44,8 +41,7 @@ export default {
 
 				<h5>Layout</h5>
 				<p>Default layout of the timeline is vertical, setting <i>layout</i> to "horizontal" displays the items horizontally.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Timeline :value="events"&gt;
 	&lt;template #content="slotProps"&gt;
 		&#123;&#123;slotProps.item.status&#125;&#125;
@@ -56,8 +52,7 @@ export default {
 
 				<h5>Alignment</h5>
 				<p>Location of the timeline bar is defined using the <i>align</i> property.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Timeline :value="events" align="right"&gt;
 	&lt;template #content="slotProps"&gt;
 		&#123;&#123;slotProps.item.status&#125;&#125;
@@ -67,8 +62,7 @@ export default {
 </code></pre>
 
 				<p>In addition, the "alternate" alignment option make the contents take turns around the timeline bar.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Timeline :value="events" align="alternate"&gt;
 	&lt;template #content="slotProps"&gt;
 		&#123;&#123;slotProps.item.status&#125;&#125;
@@ -79,8 +73,7 @@ export default {
 
 				<h5>Opposite</h5>
 				<p>Content to be placed at the other side of the bar is defined with the <i>opposite</i> template.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Timeline :value="events"&gt;
 	&lt;template #opposite="slotProps"&gt;
 		&lt;small class="p-text-secondary"&gt;&#123;&#123;slotProps.item.date&#125;&#125;&lt;/small&gt;
@@ -94,8 +87,7 @@ export default {
 
 				<h5>Custom Markers</h5>
 				<p><i>marker</i> template allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Timeline :value="events" align="alternate" class="customized-timeline"&gt;
 	&lt;template #marker="slotProps"&gt;
 		&lt;span class="custom-marker p-shadow-2" :style="&#123;backgroundColor: slotProps.item.color&#125;"&gt;
@@ -244,8 +236,7 @@ export default {
 					</a>
 					<LiveEditor name="TimelineDemo" :sources="sources" :components="['Card', 'Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
 	&lt;h5&gt;Left Align&lt;/h5&gt;
 	&lt;Timeline :value="events1"&gt;
@@ -341,8 +332,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index 006a26ae8..ec3e5a7a1 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -4,8 +4,7 @@
 			<TabPanel header="Documentation">
                 <h5>Mitt EventBus</h5>
                 <p>Toast requires <a href="https://www.npmjs.com/package/mitt">Mitt</a>, a tiny 200b EventBus implementation.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 npm install mitt --save
 
 </code></pre>
@@ -13,8 +12,7 @@ npm install mitt --save
                 <h5>ToastService</h5>
                 <p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application
                     instance is created.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import {createApp} from 'vue';
 import ToastService from 'primevue/toastservice';
 
@@ -24,8 +22,7 @@ app.use(ToastService);
 </code></pre>
 
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Toast from 'primevue/toast';
 
 </code></pre>
@@ -36,8 +33,7 @@ import Toast from 'primevue/toast';
 
                 <h5>Options API</h5>
                 <p><i>$toast</i> is available as a property in the application instance.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     mounted() {
         this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});
@@ -48,8 +44,7 @@ export default {
 
                 <h5>Composition API</h5>
                 <p>The toast instance can be injected with the <i>useToast</i> function.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import { defineComponent } from "vue";
 import { useToast } from "primevue/usetoast";
 
@@ -159,8 +154,7 @@ export default defineComponent({
 				<p>There are four positions available for the toast container defined by the <i>position</i> property that defaults to "top-right". Other
 					valid values are "top-left", "top-center", "bottom-left", "botton-center", "bottom-right" and "center".
 				</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Toast /&gt;
 &lt;Toast position="top-left" /&gt;
 &lt;Toast position="top-center" /&gt;
@@ -177,15 +171,13 @@ export default defineComponent({
                     are forwarded to the default Toast component that does not have a group defined.
                 </p>
 
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Toast /&gt;
 &lt;Toast position="mykey" /&gt;
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 this.$toast.add({severity:'success', summary: 'Default Message'});
 this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'});
 
@@ -288,8 +280,7 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
                     </a>
                     <LiveEditor name="ToastDemo" :sources="sources" :toastService="true" :components="['Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h5&gt;Severities&lt;/h5&gt;
 &lt;Button label="Success" class="p-button-success" @click="showSuccess" /&gt;
 &lt;Button label="Info" class="p-button-info" @click="showInfo" /&gt;
@@ -310,8 +301,7 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/togglebutton/ToggleButtonDoc.vue b/src/views/togglebutton/ToggleButtonDoc.vue
index 02c042474..2b56ec339 100755
--- a/src/views/togglebutton/ToggleButtonDoc.vue
+++ b/src/views/togglebutton/ToggleButtonDoc.vue
@@ -3,23 +3,20 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import ToggleButton from 'primevue/togglebutton';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ToggleButton v-model="checked" /&gt;
 
 </code></pre>
 
 				<p>As model is two-way binding enabled, setting the bound value as true displays the state as checked.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -32,8 +29,7 @@ export default {
 
 				<h5>Labels and Icons</h5>
 				<p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" /&gt;
 
 </code></pre>
@@ -149,8 +145,7 @@ export default {
                     </a>
                     <LiveEditor name="ToggleButtonDemo" :sources="sources"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" /&gt;
 
@@ -159,8 +154,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {
diff --git a/src/views/toolbar/ToolbarDoc.vue b/src/views/toolbar/ToolbarDoc.vue
index 7d2ad103d..e0ce6485f 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Toolbar from 'primevue/toolbar';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>Toolbar provides <i>left</i> and <i>right</i> templates to place content at these sections.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;Toolbar&gt;
     &lt;template #left&gt;
         &lt;Button label="New" icon="pi pi-plus" class="p-mr-2" /&gt;
@@ -68,8 +66,7 @@ import Toolbar from 'primevue/toolbar';
                     </a>
                     <LiveEditor name="ToolbarDemo" :sources="sources" :components="['Button', 'SplitButton']"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Toolbar&gt;
     &lt;template #left&gt;
         &lt;Button label="New" icon="pi pi-plus" class="p-mr-2" /&gt;
@@ -87,8 +84,7 @@ import Toolbar from 'primevue/toolbar';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/tooltip/TooltipDoc.vue b/src/views/tooltip/TooltipDoc.vue
index 3f96882d1..886d28a1b 100755
--- a/src/views/tooltip/TooltipDoc.vue
+++ b/src/views/tooltip/TooltipDoc.vue
@@ -4,8 +4,7 @@
 			<TabPanel header="Documentation">
 				<h5>Getting Started</h5>
 				<p>Tooltip is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>Vue.directive</i> function.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Tooltip from 'primevue/tooltip';
 
 Vue.directive('tooltip', Tooltip);
@@ -13,8 +12,7 @@ Vue.directive('tooltip', Tooltip);
 </code></pre>
 
                 <p>Tooltip can also be configured locally using the directives property of your component.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 directives: {
     'tooltip': Tooltip
 }
@@ -22,16 +20,14 @@ directives: {
 </code></pre>
 
                 <p>Once the tooltip is configured, it can be attached to a target using the v- prefix.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;InputText type="text" v-tooltip="'Enter your username'" /&gt;
 </template>
 </code></pre>
 
 				<h5>Positions</h5>
 				<p>There are four choices to position the tooltip, default value is "right" and alternatives are "top", "bottom", "left". Position is specified using a modifier.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;InputText type="text" v-tooltip.right="'Enter your username'" /&gt;
 &lt;InputText type="text" v-tooltip.top="'Enter your username'" /&gt;
 &lt;InputText type="text" v-tooltip.bottom="'Enter your username'" /&gt;
@@ -41,8 +37,7 @@ directives: {
 
                 <h5>Events</h5>
                 <p>Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;InputText type="text" v-tooltip.focus="'Enter your username'" /&gt;
 </template>
 </code></pre>
@@ -51,8 +46,7 @@ directives: {
                 <p>As seen in positions and event sections, tooltip is configured via modifiers that can be chained. Tooltip below,
                     gets displayed at the top of the input at focus event.
                 </p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;InputText type="text" v-tooltip.top.focus="'Enter your username'" /&gt;
 </template>
 </code></pre>
@@ -95,8 +89,7 @@ directives: {
                 </a>
                 <LiveEditor name="TooltipDemo" :sources="sources" :directives="['Tooltip']" :components="['InputText', 'Button']"/>
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Positions&lt;/h3&gt;
 &lt;div class="p-grid p-fluid"&gt;
     &lt;div class="p-col-12 p-md-3"&gt;
@@ -121,8 +114,7 @@ directives: {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {}
 
 </code></pre>
diff --git a/src/views/tree/TreeDoc.vue b/src/views/tree/TreeDoc.vue
index d8dc39b8c..ba582d6ab 100755
--- a/src/views/tree/TreeDoc.vue
+++ b/src/views/tree/TreeDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import Tree from 'primevue/tree';
 
 </code></pre>
@@ -89,14 +88,12 @@ import Tree from 'primevue/tree';
                 </div>
 
                 <p>Example below loads the tree nodes from a remote datasource via a service called NodeService.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Tree :value="nodes"&gt;&lt;/Tree&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -116,8 +113,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import axios from 'axios';
 
 export default class NodeService {
@@ -131,8 +127,7 @@ export default class NodeService {
 </code></pre>
 
                 <p>The json response sample would be as following.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 {
     "root": [
         {
@@ -196,8 +191,7 @@ export default class NodeService {
                 </p>
 
                 <p>Example below expands and collapses all nodes with buttons.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div&gt;
     &lt;Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /&gt;
     &lt;Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /&gt;
@@ -206,8 +200,7 @@ export default class NodeService {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -249,8 +242,7 @@ export default {
 </code></pre>
 
                 <p>To display some nodes as expanded by default, simply add their keys to the map.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -282,8 +274,7 @@ export default {
 
                 <p>Similarly to the <i>expandedKeys</i>, <i>selectionKeys</i> is a Map instance whose key is the key of a node and value is a boolean in "single" and "multiple" cases. On the other hand
                 in "checkbox" mode, instead of a boolean, value should be an object that has "checked" and "partialChecked" properties to represent the checked state of a node.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Single Selection&lt;/h3&gt;
 &lt;Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"&gt;&lt;/Tree&gt;
 
@@ -302,8 +293,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -337,8 +327,7 @@ export default {
 </code></pre>
 
                 <p>To display some nodes as selected by default, simply add their keys to the map.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -381,14 +370,12 @@ export default {
                     tree would render an expand icon. Example below uses an in memory collection to mimic a lazy loading scenario with timeouts.
                 </p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"&gt;&lt;/Tree&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -459,8 +446,7 @@ export default {
                 <h5>Templating</h5>
                 <p>The <i>type</i> property of a TreeNode is used to map a template to a node to create the node label. If it is undefined and no default template is available,
                 label of the node is used.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Tree :value="nodes"&gt;
     &lt;template #default="slotProps"&gt;
         &lt;b&gt;&#123;&#123;slotProps.node.label&#125;&#125;&lt;/b&gt;
@@ -472,8 +458,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -512,8 +497,7 @@ export default {
                 <p>In addition <i>filterMode</i> specifies the filtering strategy. In <b>lenient</b> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand,
                  in <b>strict</b> mode when the query matches a node, filtering continues on all descendants.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Lenient Filter&lt;/h3&gt;
 &lt;Tree :value="nodes" :filter="true" filterMode="lenient"&gt;&lt;/Tree&gt;
 
@@ -522,8 +506,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -756,8 +739,7 @@ export default {
                     </a>
                     <LiveEditor name="TreeDemo" :sources="sources" service="NodeService" data="treenodes" :components="['Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;Tree :value="nodes"&gt;&lt;/Tree&gt;
 
@@ -770,8 +752,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/tree/TreeFilterDemo.vue b/src/views/tree/TreeFilterDemo.vue
index 4a3f6d838..4044420c4 100755
--- a/src/views/tree/TreeFilterDemo.vue
+++ b/src/views/tree/TreeFilterDemo.vue
@@ -23,8 +23,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeDemo" :sources="sources" service="NodeService" data="treenodes" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Lenient Filter&lt;/h3&gt;
 &lt;Tree :value="nodes" :filter="true" filterMode="lenient"&gt;&lt;/Tree&gt;
 
@@ -33,8 +32,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/tree/TreeLazyDemo.vue b/src/views/tree/TreeLazyDemo.vue
index 70f623c1e..01ed28a84 100755
--- a/src/views/tree/TreeLazyDemo.vue
+++ b/src/views/tree/TreeLazyDemo.vue
@@ -19,14 +19,12 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeDemo" :sources="sources" service="NodeService" data="treenodes" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"&gt;&lt;/Tree&gt;
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/tree/TreeSelectionDemo.vue b/src/views/tree/TreeSelectionDemo.vue
index ae6be1154..f52be810f 100755
--- a/src/views/tree/TreeSelectionDemo.vue
+++ b/src/views/tree/TreeSelectionDemo.vue
@@ -33,8 +33,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeDemo" :sources="sources" :toastService="true" service="NodeService" data="treenodes" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Single Selection&lt;/h3&gt;
 &lt;Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"&gt;&lt;/Tree&gt;
 
@@ -53,8 +52,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/tree/TreeTemplatingDemo.vue b/src/views/tree/TreeTemplatingDemo.vue
index 04fdf8599..decb1b9fc 100755
--- a/src/views/tree/TreeTemplatingDemo.vue
+++ b/src/views/tree/TreeTemplatingDemo.vue
@@ -26,8 +26,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeDemo" :sources="sources" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;Tree :value="nodes"&gt;
     &lt;template #default="slotProps"&gt;
         &lt;b&gt;&#123;&#123;slotProps.node.label&#125;&#125;&lt;/b&gt;
@@ -39,8 +38,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/treetable/TreeTableColResizeDemo.vue b/src/views/treetable/TreeTableColResizeDemo.vue
index f3ee29c17..3c5dacc3b 100755
--- a/src/views/treetable/TreeTableColResizeDemo.vue
+++ b/src/views/treetable/TreeTableColResizeDemo.vue
@@ -34,8 +34,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Fit Mode&lt;/h3&gt;
 &lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit" class="p-treetable-gridlines"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
@@ -52,8 +51,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/treetable/TreeTableColToggleDemo.vue b/src/views/treetable/TreeTableColToggleDemo.vue
index 7b7c67a7e..8721636bc 100755
--- a/src/views/treetable/TreeTableColToggleDemo.vue
+++ b/src/views/treetable/TreeTableColToggleDemo.vue
@@ -27,8 +27,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'MultiSelect']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align:left"&gt;
@@ -41,8 +40,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 7b23f4252..389c18f04 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -3,8 +3,7 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import TreeTable from 'primevue/treetable';
 import Column from 'primevue/column';
 
@@ -66,8 +65,7 @@ import Column from 'primevue/column';
                 </div>
 
                 <p>Example below loads the nodes from a remote datasource via a service called NodeService.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
@@ -76,8 +74,7 @@ import Column from 'primevue/column';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -97,8 +94,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import axios from 'axios';
 
 export default class NodeService {
@@ -114,8 +110,7 @@ export default class NodeService {
                 <p>The json response sample would be as following.</p>
 
 <div style="height: 400px; overflow: auto">
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 {
     "root":
     [
@@ -476,8 +471,7 @@ export default class NodeService {
                 <h5>Dynamic Columns</h5>
                 <p>Column components can be dynamically generated using a v-for as well.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes"&gt;
     &lt;Column v-for="col of columns" :key="col.field"
         :field="col.field" :header="col.header" :expander="col.expander"&gt;&lt;/Column&gt;
@@ -485,8 +479,7 @@ export default class NodeService {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -637,8 +630,7 @@ export default {
                 </p>
 
                 <p>Example below expands and collapses all nodes with buttons.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div style="margin-bottom: 1em"&gt;
     &lt;Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /&gt;
     &lt;Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /&gt;
@@ -651,8 +643,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -695,8 +686,7 @@ export default {
 </code></pre>
 
                 <p>To display some nodes as expanded by default, simply add their keys to the map.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -725,8 +715,7 @@ export default {
                 <p>Field data of a corresponding node is displayed as the cell content by default, this can be customized using a <i>body</i> template where current node data and column properties are passed via the slot props.
                     On the other hand, <i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly TreeTable itself also provides header and footer properties along with the templates for the main header and footer of the table.</p>
 
-                <pre v-code>
-<code><template v-pre>
+                <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes"&gt;
     &lt;template #header&gt;
         FileSystem
@@ -756,8 +745,7 @@ export default {
                 <p>In addition to the regular table, a smal and a large version are available with different paddings. For a table
                 with smaller paddings use <i>p-treetable-sm</i> class and for a larger one use <i>p-treetable-lg</i>.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" class="p-treetable-sm"&gt;
     &lt;template #header&gt;
         Small Table
@@ -792,8 +780,7 @@ export default {
                     See the <router-link to="/paginator">Paginator</router-link> for the available customization options such as paginator templates, page links,
                     rows per page options and more which can be passed through the TreeTable.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :paginator="true" :rows="10"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
@@ -803,8 +790,7 @@ export default {
 </code></pre>
 
                 <p>paginatorLeft and paginatorLeft templates are available to specify custom content at the left and right side.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :paginator="true" :rows="10"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
@@ -822,8 +808,7 @@ export default {
                 <p>Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the
                 first element to display. For example setting first to zero will reset the paginator to the very first page. This property
                 also supports the v-model directive in case you'd like your binding to be updated whenever the user changes the page.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :paginator="true" :rows="10" :first="firstRecordIndex"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
@@ -836,8 +821,7 @@ export default {
                 <p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable.
                 The property to use when sorting is the <i>field</i> by default and can be customized using the <i>sortField</i>.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" sortMode="single"&gt;
     &lt;Column field="name" header="Name" :expander="true" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" :sortable="true"&gt;&lt;/Column&gt;
@@ -847,8 +831,7 @@ export default {
 </code></pre>
 
                 <p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" sortMode="multiple"&gt;
     &lt;Column field="name" header="Name" :expander="true" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" :sortable="true"&gt;&lt;/Column&gt;
@@ -859,8 +842,7 @@ export default {
 
                 <p>In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These
                 two properties also support the v-model directive to get updated when the user applies sort a column.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" sortField="size" :sortOrder="1""&gt;
     &lt;Column field="name" header="Name" :expander="true" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" :sortable="true"&gt;&lt;/Column&gt;
@@ -876,8 +858,7 @@ export default {
 </code></pre>
 
                 <p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" sortMode="multiple" :multiSortMeta="multiSortMeta"&gt;
     &lt;Column field="name" header="Name" :expander="true" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" :sortable="true"&gt;&lt;/Column&gt;
@@ -886,8 +867,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 data() {
     return {
         multiSortMeta: [
@@ -908,8 +888,7 @@ data() {
 
                 <p>In addition <i>filterMode</i> specifies the filtering strategy. In <b>lenient</b> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand,
                  in <b>strict</b> mode when the query matches a node, filtering continues on all descendants.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :filters="filters" filterMode="lenient"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align: right"&gt;
@@ -936,8 +915,7 @@ data() {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -965,8 +943,7 @@ export default {
 
                 <p>Similarly to the <i>expandedKeys</i>, <i>selectionKeys</i> is a Map instance whose key is the key of a node and value is a boolean in "single" and "multiple" cases. On the other hand
                 in "checkbox" mode, instead of a boolean, value should be an object that has "checked" and "partialChecked" properties to represent the checked state of a node.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
@@ -997,8 +974,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -1032,8 +1008,7 @@ export default {
 </code></pre>
 
                 <p>To display some nodes as selected by default, simply add their keys to the map.</p>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -1083,8 +1058,7 @@ export default {
 
                 <p> Example below uses an in memory collection to mimic a lazy loading scenario with timeouts.</p>
 
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
     @node-expand="onExpand" @page="onPage" :totalRecords="totalRecords"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
@@ -1094,8 +1068,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
@@ -1188,8 +1161,7 @@ export default {
                 <h5>Column Resize</h5>
                 <p>Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
                     In "expand" mode, table width also changes along with the column width. <i>column-resize-end</i> is a callback that passes the resized column header and delta change as a parameter.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Fit Mode&lt;/h3&gt;
 &lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
@@ -1207,8 +1179,7 @@ export default {
 </code></pre>
 
             <p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :resizableColumns="true"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column headerStyle="width: 20%"&gt;
     &lt;Column field="size" header="Size" headerStyle="width: 40%"&gt;&lt;/Column&gt;
@@ -1219,8 +1190,7 @@ export default {
 
                 <h5>Responsive</h5>
                 <p>TreeTable display can be optimized according to screen sizes, this example demonstrates a demo where columns are stacked on small screens.</p>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" class="p-treetable-responsive"&gt;
     &lt;template #header&gt;
         Responsive
@@ -1238,8 +1208,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -1259,8 +1228,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .sm-visible {
     display: none;
 }
@@ -1645,8 +1613,7 @@ export default {
                     </a>
                     <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'Button']" />
                 </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;TreeTable :value="nodes"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
@@ -1673,8 +1640,7 @@ export default {
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/treetable/TreeTableFilterDemo.vue b/src/views/treetable/TreeTableFilterDemo.vue
index f9af16883..56d7855f2 100755
--- a/src/views/treetable/TreeTableFilterDemo.vue
+++ b/src/views/treetable/TreeTableFilterDemo.vue
@@ -73,8 +73,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'InputText']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="card"&gt;
 &lt;h5&gt;Lenient Filter&lt;/h5&gt;
 &lt;TreeTable :value="nodes" :filters="filters1" filterMode="lenient"&gt;
@@ -135,8 +134,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/treetable/TreeTableLazyDemo.vue b/src/views/treetable/TreeTableLazyDemo.vue
index 8acd5c972..c213a4c7c 100755
--- a/src/views/treetable/TreeTableLazyDemo.vue
+++ b/src/views/treetable/TreeTableLazyDemo.vue
@@ -25,8 +25,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeTableDemo" :sources="sources" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
     @node-expand="onExpand" @page="onPage" :totalRecords="totalRecords"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
@@ -36,8 +35,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/treetable/TreeTablePaginatorDemo.vue b/src/views/treetable/TreeTablePaginatorDemo.vue
index 732c5c30d..642e2000c 100755
--- a/src/views/treetable/TreeTablePaginatorDemo.vue
+++ b/src/views/treetable/TreeTablePaginatorDemo.vue
@@ -23,8 +23,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeTableDemo" :sources="sources" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :paginator="true" :rows="10"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
@@ -33,8 +32,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
     data() {
         return {
diff --git a/src/views/treetable/TreeTableResponsiveDemo.vue b/src/views/treetable/TreeTableResponsiveDemo.vue
index 0e7f356d4..8ff5c4340 100755
--- a/src/views/treetable/TreeTableResponsiveDemo.vue
+++ b/src/views/treetable/TreeTableResponsiveDemo.vue
@@ -32,8 +32,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" class="p-treetable-responsive"&gt;
     &lt;template #header&gt;
         Responsive
@@ -51,8 +50,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -72,8 +70,7 @@ export default {
 
 </code></pre>
 
-<pre v-code.css>
-<code>
+<pre v-code.css><code>
 .sm-visible {
     display: none;
 }
diff --git a/src/views/treetable/TreeTableSelectionDemo.vue b/src/views/treetable/TreeTableSelectionDemo.vue
index 01e84b588..fa1112756 100755
--- a/src/views/treetable/TreeTableSelectionDemo.vue
+++ b/src/views/treetable/TreeTableSelectionDemo.vue
@@ -61,8 +61,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeTableDemo" :sources="sources" :toastService="true" service="NodeService" data="treetablenodes" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Single Selection&lt;/h3&gt;
 &lt;TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
@@ -101,8 +100,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/treetable/TreeTableSizeDemo.vue b/src/views/treetable/TreeTableSizeDemo.vue
index 833dfd912..dac99895e 100644
--- a/src/views/treetable/TreeTableSizeDemo.vue
+++ b/src/views/treetable/TreeTableSizeDemo.vue
@@ -48,8 +48,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'Button']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" class="p-treetable-sm" style="margin-bottom: 2rem"&gt;
     &lt;template #header&gt;
         Small Table
@@ -79,8 +78,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/treetable/TreeTableSortDemo.vue b/src/views/treetable/TreeTableSortDemo.vue
index d708f6e84..2a4c33971 100755
--- a/src/views/treetable/TreeTableSortDemo.vue
+++ b/src/views/treetable/TreeTableSortDemo.vue
@@ -42,8 +42,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;h3&gt;Single Column Sorting&lt;/h3&gt;
 &lt;TreeTable :value="nodes" sortMode="single"&gt;
     &lt;Column field="name" header="Name" :expander="true" :sortable="true"&gt;&lt;/Column&gt;
@@ -67,8 +66,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/treetable/TreeTableTemplatingDemo.vue b/src/views/treetable/TreeTableTemplatingDemo.vue
index c8aab2e0a..3243a4dde 100755
--- a/src/views/treetable/TreeTableTemplatingDemo.vue
+++ b/src/views/treetable/TreeTableTemplatingDemo.vue
@@ -40,8 +40,7 @@
                     <div class="p-d-flex p-jc-end">
                         <LiveEditor name="TreeTableDemo" :sources="sources" service="NodeService" data="treetablenodes" :components="['Column', 'Button']" />
                     </div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes"&gt;
     &lt;template #header&gt;
         FileSystem
@@ -67,8 +66,7 @@
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
index c3459caad..804b4d6ba 100755
--- a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
@@ -3,16 +3,14 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Import</h5>
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 import TriStateCheckbox from 'primevue/tristatecheckbox';
 
 </code></pre>
 
 				<h5>Getting Started</h5>
 				<p>A model can be bound using the standard v-model directive.</p>
-<pre v-code>
-<code>
+<pre v-code><code>
 &lt;TriStateCheckbox v-model="value" /&gt;
 
 </code></pre>
@@ -85,8 +83,7 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
 					</a>
 					<LiveEditor name="TriStateCheckboxDemo" :sources="sources"/>
 				</div>
-<pre v-code>
-<code><template v-pre>
+<pre v-code><code><template v-pre>
 &lt;div class="p-field-checkbox p-m-0"&gt;
     &lt;TriStateCheckbox v-model="value" /&gt;
     &lt;label&gt;{{value == null ? 'null' : value}}&lt;/label&gt;
@@ -94,8 +91,7 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
 </template>
 </code></pre>
 
-<pre v-code.script>
-<code>
+<pre v-code.script><code>
 export default {
 	data() {
 		return {