code alignment

src/components/BlockViewer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive } from 'vue';
+import { reactive, ref } from 'vue';
 
 const props = defineProps({
     header: {
@@ -45,11 +45,14 @@ async function copyCode(event) {
                 <span class="badge-free" v-if="free">Free</span>
             </span>
             <div class="block-actions">
-                <a tabindex="0" :class="{ 'block-action-active': blockView === BlockView.PREVIEW }" @click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
-                <a :tabindex="'0'" :class="{ 'block-action-active': blockView === BlockView.CODE }" @click="activateView($event, BlockView.CODE)">
+                <a tabindex="0" :class="{ 'block-action-active': blockView === BlockView.PREVIEW }"
+                    @click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
+                <a :tabindex="'0'" :class="{ 'block-action-active': blockView === BlockView.CODE }"
+                    @click="activateView($event, BlockView.CODE)">
                     <span>Code</span>
                 </a>
-                <a :tabindex="0" class="block-action-copy" @click="copyCode($event)" v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
+                <a :tabindex="0" class="block-action-copy" @click="copyCode($event)"
+                    v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
             </div>
         </div>
         <div class="block-content">
@@ -57,7 +60,7 @@ async function copyCode(event) {
                 <slot></slot>
             </div>
             <div v-if="blockView === BlockView.CODE">
-                <pre class="app-code"><code>{{code}}</code></pre>
+                <pre class="app-code"><code>{{ code }}</code></pre>
             </div>
         </div>
     </div>
@@ -172,6 +175,7 @@ pre[class*='language-'] {
         padding: 0 2rem !important;
 
         .token {
+
             &.tag,
             &.keyword {
                 color: #2196f3 !important;

src/components/CodeSnippet.vue

@@ -10,10 +10,9 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
 import Button from 'primevue/button';
-import Toast from 'primevue/toast';
 import { useToast } from 'primevue/usetoast';
+import { computed } from 'vue';
 
 import Prism from 'prismjs';
 import 'prismjs/components/prism-javascript'; // Import necessary languages

src/components/SocketManager.vue

@@ -1,12 +1,12 @@
 <template>
-<div>
-       
+    <div>
+
     </div>
 </template>
 <script setup>
-import { ref, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue';
 import { Stomp } from "@stomp/stompjs";
 import SockJS from 'sockjs-client/dist/sockjs';
+import { defineEmits, defineProps, onBeforeUnmount, onMounted, ref } from 'vue';
 
 // Define props
 const props = defineProps(['topic', 'subtopic']);
@@ -23,7 +23,7 @@ let messageHandler = null;
 const connectWebSocket = (onMessageReceived) => {
     messageHandler = onMessageReceived; // Store the message handler
 
-    if (stompClient !== null){
+    if (stompClient !== null) {
         console.warn('Websocket is already Connected.');
         return;
     }
@@ -31,7 +31,7 @@ const connectWebSocket = (onMessageReceived) => {
     const socket = new SockJS(`http://localhost:8082/ws/endpoint`);
     stompClient = Stomp.over(socket);
     stompClient.reconnect_delay = 5000;
-    stompClient.connect({},(frame) => {
+    stompClient.connect({}, (frame) => {
         //console.log('Connected: '+frame); 
 
         // Correctly use props.topic and props.subtopic
@@ -39,15 +39,15 @@ const connectWebSocket = (onMessageReceived) => {
         console.log('Subscribing to: ' + subscriptionTopic);
 
         stompClient.subscribe(subscriptionTopic, (message) => {
-            if(messageHandler){
+            if (messageHandler) {
                 messageHandler(JSON.parse(message.body));
             }
         });
     }, (error) => {
-        console.warn('WebSocket Error: '+error);
+        console.warn('WebSocket Error: ' + error);
     });
 
-    
+
 };
 
 onMounted(() => {
@@ -56,7 +56,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-    if(stompClient !== null){
+    if (stompClient !== null) {
         stompClient.disconnect(() => {
             console.log('Disconnected');
         })
@@ -64,8 +64,8 @@ onBeforeUnmount(() => {
     }
 });
 
-const handleWebSocketMessage = (data) =>{
-    console.log('Received WebSocket message: ',data)
+const handleWebSocketMessage = (data) => {
+    console.log('Received WebSocket message: ', data)
     lastMessage.value = data;
     emit('update', data);
 }