Сделал подсветку синтаксиса и кнопки перемещения

src/App.vue

@@ -342,6 +342,10 @@ html {
     font-size: 18px;
 }
 
+body {
+    margin: 0;
+}
+
 :root {
     --side: 75px;
 }
@@ -349,6 +353,7 @@ html {
 .wraper {
     display: flex;
     justify-content: center;
+    padding-top: 10px;
 }
 
 .grid {

src/components/CodeBlock.vue

@@ -0,0 +1,26 @@
+<template>
+    <pre><code class="language-python" v-html="highlighted"></code></pre>
+</template>
+
+<script setup>
+import {ref, onMounted} from 'vue'
+import Prism from 'prismjs'
+import 'prismjs/components/prism-python'
+
+const props = defineProps({
+    code: {type: String, required: true},
+})
+
+const highlighted = ref('')
+
+function highlight() {
+    // безопасно экранируем HTML и подсвечиваем через Prism
+    const escaped = props.code
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+    highlighted.value = Prism.highlight(escaped, Prism.languages['python'], 'python')
+}
+
+onMounted(highlight)
+</script>

src/components/CodeView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import CustomButton from '@/components/UI/CustomButton.vue'
-
+import CodeBlock from "./CodeBlock.vue";
+import MovementButtons from "./MovementButtons.vue";
 const props = defineProps({
     code: {
         required: true,
@@ -20,21 +21,18 @@ console.log(props.code)
             @click.stop="$emit('update:show', false)">
             Вернуться к сохранению сгенерированного кода
         </CustomButton>
-        <pre>
-            {{ code }}
-        </pre>
+        <CodeBlock :code="code" />
+
         <CustomButton
             @click.stop="$emit('update:show', false)">
             Вернуться к сохранению сгенерированного кода
         </CustomButton>
+        <MovementButtons/>
     </div>
 </template>
 
 <style scoped>
 .code-view {
-    position: fixed;
-    top: 0;
-    left: 0;
     background-color: #222222;
     overflow: auto;
     color: #eeeeee;

src/components/MovementButtons.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="movement-buttons">
+        <button @click="scrollToTop" class="up">↑</button>
+        <button @click="scrollToBottom" class="down">↓</button>
+    </div>
+</template>
+
+<script setup>
+
+function scrollToTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth' // Плавная прокрутка
+    });
+}
+
+function scrollToBottom() {
+    window.scrollTo({
+        top: document.body.scrollHeight,
+        behavior: 'smooth'
+    });
+}
+
+</script>
+
+<style scoped>
+:root {
+    --btnHeight: 50px;
+}
+.movement-buttons {
+    display: flex;
+    gap: 2px;
+    flex-direction: column;
+    position: fixed;
+    right: 25px;
+    bottom: calc(50% - 50px);
+}
+
+.movement-buttons > button {
+    width: auto;
+    font-size: 15px;
+    border: 2px solid white;
+    color: white;
+    background-color: #23aae3e2;
+    height: 50px;
+}
+
+@media (max-width: 900px) {
+    .movement-buttons > button {
+        width: 30px;
+        font-size: 15px;
+    }
+}
+
+.up {
+    border-radius: 10px 10px 0 0;
+}
+
+.down {
+    border-radius: 0 0 10px 10px;
+}
+</style>

src/components/UI/CustomButton.vue

@@ -2,7 +2,7 @@
 const props = defineProps({
     isSuccess: {
         type: Boolean,
-        required: true
+        required: false
     },
     to: {
         type: String,

src/renderer.js

@@ -29,5 +29,9 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import Prism from 'prismjs'
+import 'prismjs/themes/prism-okaidia.css'
+
+
 import ContextMenu from '@imengyu/vue3-context-menu'
 createApp(App).use(ContextMenu).mount('#app');