diff --git a/doc/chart/ChartJSDoc.vue b/doc/chart/ChartJSDoc.vue
index d655538e3..90fe0a951 100644
--- a/doc/chart/ChartJSDoc.vue
+++ b/doc/chart/ChartJSDoc.vue
@@ -11,7 +11,8 @@ export default {
         return {
             code: {
                 basic: `
-npm install chart.js`
+npm install chart.js
+`
             }
         };
     }
diff --git a/doc/confirmdialog/ConfirmationServiceDoc.vue b/doc/confirmdialog/ConfirmationServiceDoc.vue
index af81d1b20..f5d29058f 100644
--- a/doc/confirmdialog/ConfirmationServiceDoc.vue
+++ b/doc/confirmdialog/ConfirmationServiceDoc.vue
@@ -19,13 +19,15 @@ import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
 const app = createApp(App);
-app.use(ConfirmationService);`
+app.use(ConfirmationService);
+`
             },
             code2: {
                 basic: `
 import { useConfirm } from "primevue/useconfirm";
 
-const confirm = useConfirm();`
+const confirm = useConfirm();
+`
             }
         };
     }
diff --git a/doc/confirmpopup/ConfirmationServiceDoc.vue b/doc/confirmpopup/ConfirmationServiceDoc.vue
index 2ae1ccd6d..bb3499fa0 100644
--- a/doc/confirmpopup/ConfirmationServiceDoc.vue
+++ b/doc/confirmpopup/ConfirmationServiceDoc.vue
@@ -19,13 +19,15 @@ import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
 const app = createApp(App);
-app.use(ConfirmationService);`
+app.use(ConfirmationService);
+`
             },
             code2: {
                 basic: `
 import { useConfirm } from "primevue/useconfirm";
 
-const confirm = useConfirm();`
+const confirm = useConfirm();
+`
             }
         };
     }
diff --git a/doc/dataview/PrimeFlexDoc.vue b/doc/dataview/PrimeFlexDoc.vue
index dff475d5d..1ae651414 100644
--- a/doc/dataview/PrimeFlexDoc.vue
+++ b/doc/dataview/PrimeFlexDoc.vue
@@ -11,7 +11,9 @@ export default {
     data() {
         return {
             code1: {
-                basic: `npm install primeflex`
+                basic: `
+npm install primeflex
+`
             },
             code2: {
                 basic: `
diff --git a/doc/dynamicdialog/CloseDialogDoc.vue b/doc/dynamicdialog/CloseDialogDoc.vue
index d5a4b4ccd..ccbfe1801 100644
--- a/doc/dynamicdialog/CloseDialogDoc.vue
+++ b/doc/dynamicdialog/CloseDialogDoc.vue
@@ -10,14 +10,16 @@ export default {
     data() {
         return {
             code: {
-                basic: `export default {
+                basic: `
+export default {
     inject: ['dialogRef'],
     methods:{
         closeDialog() {
             this.dialogRef.close();
         }
     }
-}`,
+}
+`,
                 options: `
 export default {
     inject: ['dialogRef'],
diff --git a/doc/dynamicdialog/DialogServiceDoc.vue b/doc/dynamicdialog/DialogServiceDoc.vue
index 4c9ca587b..bb5c8ea82 100644
--- a/doc/dynamicdialog/DialogServiceDoc.vue
+++ b/doc/dynamicdialog/DialogServiceDoc.vue
@@ -19,13 +19,15 @@ import {createApp} from 'vue';
 import DialogService from 'primevue/dialogservice';
 
 const app = createApp(App);
-app.use(DialogService);`
+app.use(DialogService);
+`
             },
             code2: {
                 basic: `
 import { useDialog } from 'primevue/usedialog';
 
-const dialog = useDialog();`,
+const dialog = useDialog();
+`,
                 options: `const dialogRef = this.$dialog;`,
                 composition: `
 import { useDialog } from 'primevue/usedialog';
diff --git a/doc/dynamicdialog/EmitsDoc.vue b/doc/dynamicdialog/EmitsDoc.vue
index 5a1adc5ec..fe212173d 100644
--- a/doc/dynamicdialog/EmitsDoc.vue
+++ b/doc/dynamicdialog/EmitsDoc.vue
@@ -22,7 +22,8 @@ this.$dialog.open(ProductListDemo, {
             console.log(e);  // {user: 'primetime'}
         }
     },
-};`
+};
+`
             },
             code2: {
                 basic: `
diff --git a/doc/dynamicdialog/OpenDialogDoc.vue b/doc/dynamicdialog/OpenDialogDoc.vue
index a77a96672..74a1e6500 100644
--- a/doc/dynamicdialog/OpenDialogDoc.vue
+++ b/doc/dynamicdialog/OpenDialogDoc.vue
@@ -19,7 +19,8 @@ export default {
             this.$dialog.open(ProductListDemo, {});
         }
     }
-}`,
+}
+`,
                 options: `
 import ProductListDemo from './ProductListDemo';
 
diff --git a/doc/dynamicdialog/PassingDataDoc.vue b/doc/dynamicdialog/PassingDataDoc.vue
index 39a4babb3..f4fd8ac85 100644
--- a/doc/dynamicdialog/PassingDataDoc.vue
+++ b/doc/dynamicdialog/PassingDataDoc.vue
@@ -21,15 +21,18 @@ this.$dialog.open(ProductListDemo, {
     data: {
         user: 'primetime'
     }
-};`
+};
+`
             },
             code2: {
-                basic: `export default {
+                basic: `
+export default {
     inject: ['dialogRef'],
     mounted:{
         const params = this.dialogRef.data; // {user: 'primetime'}
     }
-}`
+}
+`
             },
             code3: {
                 basic: `
@@ -37,17 +40,20 @@ this.$dialog.open(ProductListDemo, {
     onClose(options) {
         const callbackParams = options.data; // {id: 12}
     }
-);`
+);
+`
             },
             code4: {
-                basic: `export default {
+                basic: `
+export default {
     inject: ['dialogRef'],
     methods:{
         closeDialog() {
             this.dialogRef.close({id: 12});
         }
     }
-}`
+}
+`
             }
         };
     }
diff --git a/doc/editor/QuillDoc.vue b/doc/editor/QuillDoc.vue
index 1b2ce3fd0..ebb74cfd9 100644
--- a/doc/editor/QuillDoc.vue
+++ b/doc/editor/QuillDoc.vue
@@ -10,7 +10,9 @@ export default {
     data() {
         return {
             code: {
-                basic: `npm install quill`
+                basic: `
+npm install quill
+`
             }
         };
     }
diff --git a/doc/focustrap/ImportDoc.vue b/doc/focustrap/ImportDoc.vue
index 70aba55de..b748259cd 100644
--- a/doc/focustrap/ImportDoc.vue
+++ b/doc/focustrap/ImportDoc.vue
@@ -11,7 +11,8 @@ export default {
                 basic: `
 import FocusTrap from 'primevue/focustrap';
 
-app.directive('focustrap', FocusTrap);`
+app.directive('focustrap', FocusTrap);
+`
             }
         };
     }
diff --git a/doc/message/TemplateDoc.vue b/doc/message/TemplateDoc.vue
index f2f49ed33..44e93b407 100644
--- a/doc/message/TemplateDoc.vue
+++ b/doc/message/TemplateDoc.vue
@@ -19,7 +19,7 @@
         </div>
         <DocSectionCode :code="code1" />
 
-        <p><i>container</i> templating allows customizing the Dialog component.</p>
+        <p><i>container</i> templating allows customizing the Message component.</p>
         <div class="card">
             <Message style="border: none">
                 <template #container>
diff --git a/doc/ripple/ConfigurationDoc.vue b/doc/ripple/ConfigurationDoc.vue
index f8699e88c..068ba8901 100644
--- a/doc/ripple/ConfigurationDoc.vue
+++ b/doc/ripple/ConfigurationDoc.vue
@@ -13,7 +13,8 @@ export default {
                 basic: `
 mounted() {
     this.$primevue.config.ripple = true;
-}`,
+}
+`,
                 options: `
 mounted() {
     this.$primevue.config.ripple = true;
diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue
index f24058d9d..337457612 100644
--- a/doc/ripple/CustomDoc.vue
+++ b/doc/ripple/CustomDoc.vue
@@ -3,9 +3,9 @@
         <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>
     </DocSectionText>
     <div class="card flex justify-content-center align-items-center gap-2">
-        <div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>
+        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
+        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
+        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,21 +16,18 @@ export default {
         return {
             code: {
                 basic: `
-<div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
-<div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
-<div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>`,
+<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
+<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
+<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>`,
                 options: `
 <template>
     <div class="flex justify-content-center align-items-center">
-        <div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>
+        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
+        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
+        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
     </div>
 </template>
 
-<script>
-<\/script>
-
 <style scoped>
 ::v-deep(.styled-box-green .p-ink) {
     background: rgba(75, 175, 80, 0.3);
@@ -42,19 +39,24 @@ export default {
 ::v-deep(.styled-box-purple .p-ink) {
     background: rgba(156, 39, 176, 0.3);
 }
+
+.box {
+    background: var(--surface-card);
+    padding: 2rem;
+    border-radius: 10px;
+    width: 110px;
+    text-align: center;
+}
 </style>`,
                 composition: `
 <template>
     <div class="flex justify-content-center align-items-center">
-        <div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
-        <div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>
+        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
+        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
+        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
     </div>
 </template>
 
-<script setup>
-<\/script>
-
 <style scoped>
 ::v-deep(.styled-box-green .p-ink) {
     background: rgba(75, 175, 80, 0.3);
@@ -66,6 +68,14 @@ export default {
 ::v-deep(.styled-box-purple .p-ink) {
     background: rgba(156, 39, 176, 0.3);
 }
+
+.box {
+    background: var(--surface-card);
+    padding: 2rem;
+    border-radius: 10px;
+    width: 110px;
+    text-align: center;
+}
 </style>`
             }
         };
@@ -74,6 +84,14 @@ export default {
 </script>
 
 <style scoped>
+.box {
+    background: var(--surface-card);
+    padding: 2rem;
+    border-radius: 10px;
+    width: 110px;
+    text-align: center;
+}
+
 ::v-deep(.styled-box-green .p-ink) {
     background: rgba(75, 175, 80, 0.3);
 }
diff --git a/doc/ripple/ImportDoc.vue b/doc/ripple/ImportDoc.vue
index 9037e59a0..38ede2bbf 100644
--- a/doc/ripple/ImportDoc.vue
+++ b/doc/ripple/ImportDoc.vue
@@ -20,13 +20,15 @@ import { createApp } from 'vue';
 import PrimeVue from 'primevue/config';
 const app = createApp(App);
 
-app.use(PrimeVue, { ripple: true });`
+app.use(PrimeVue, { ripple: true });
+`
             },
             code2: {
                 basic: `
 import Ripple from 'primevue/ripple';
 
-app.directive('ripple', Ripple);`
+app.directive('ripple', Ripple);
+`
             }
         };
     }
diff --git a/doc/styleclass/ImportDoc.vue b/doc/styleclass/ImportDoc.vue
index 6bb554e12..2dd972ada 100644
--- a/doc/styleclass/ImportDoc.vue
+++ b/doc/styleclass/ImportDoc.vue
@@ -11,7 +11,8 @@ export default {
                 basic: `
 import StyleClass from 'primevue/styleclass';
                 
-app.directive('styleclass', StyleClass);`
+app.directive('styleclass', StyleClass);
+`
             }
         };
     }
diff --git a/doc/terminal/ImportDoc.vue b/doc/terminal/ImportDoc.vue
index e8052956f..6cd9c5e72 100644
--- a/doc/terminal/ImportDoc.vue
+++ b/doc/terminal/ImportDoc.vue
@@ -10,7 +10,8 @@ export default {
             code: {
                 basic: `
 import Terminal from 'primevue/terminal';
-import TerminalService from 'primevue/terminalservice'`
+import TerminalService from 'primevue/terminalservice'
+`
             }
         };
     }
diff --git a/doc/toast/ToastServiceDoc.vue b/doc/toast/ToastServiceDoc.vue
index 1ff9475ba..b58559160 100644
--- a/doc/toast/ToastServiceDoc.vue
+++ b/doc/toast/ToastServiceDoc.vue
@@ -19,13 +19,15 @@ import {createApp} from 'vue';
 import ToastService from 'primevue/toastservice';
 
 const app = createApp(App);
-app.use(ToastService);`
+app.use(ToastService);
+`
             },
             code2: {
                 basic: `
 import { useToast } from 'primevue/usetoast';
 
-const toast = useToast();`
+const toast = useToast();
+`
             }
         };
     }
diff --git a/doc/tooltip/ImportDoc.vue b/doc/tooltip/ImportDoc.vue
index 81a535934..556bb7e4a 100644
--- a/doc/tooltip/ImportDoc.vue
+++ b/doc/tooltip/ImportDoc.vue
@@ -11,7 +11,8 @@ export default {
                 basic: `
 import Tooltip from 'primevue/tooltip';
 
-app.directive('tooltip', Tooltip);`
+app.directive('tooltip', Tooltip);
+`
             }
         };
     }