package-lock.json

@@ -14,6 +14,7 @@
         "copy-to-clipboard": "^3.3.3",
         "electron-squirrel-startup": "^1.0.1",
         "izitoast": "^1.4.0",
+        "prismjs": "^1.30.0",
         "vue": "^3.5.28"
       },
       "devDependencies": {
@@ -616,6 +617,7 @@
       "integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chalk": "^4.1.1",
         "fs-extra": "^9.0.1",
@@ -1752,6 +1754,7 @@
       "integrity": "sha512-yl43JD/86CIj3Mz5mvvLJqAOfIup7ncxfJ0Btnl0/v5TouVUyeEdcpknfgc+yMevS/48oH9WAkkw93m7otLb/A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^3.0.1",
         "@inquirer/confirm": "^4.0.1",
@@ -2910,6 +2913,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2976,6 +2980,7 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -3193,6 +3198,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4499,17 +4505,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/encoding": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
-      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "iconv-lite": "^0.6.2"
-      }
-    },
     "node_modules/end-of-stream": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
@@ -6832,6 +6827,15 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/proc-log": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz",
@@ -8030,6 +8034,7 @@
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -8089,6 +8094,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
       "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.28",
         "@vue/compiler-sfc": "3.5.28",
@@ -8142,6 +8148,7 @@
       "integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",

package.json

@@ -35,6 +35,7 @@
     "copy-to-clipboard": "^3.3.3",
     "electron-squirrel-startup": "^1.0.1",
     "izitoast": "^1.4.0",
+    "prismjs": "^1.30.0",
     "vue": "^3.5.28"
   }
 }

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>
+        <CodeBlock :code="code" />
-            {{ code }}
+
-        </pre>
         <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');