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

2026-03-25 00:13:06 +03:00
parent ad78917e91
commit 2c490c8359
8 changed files with 122 additions and 19 deletions
@@ -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",
@@ -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"
  }
 }
@@ -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 {
@@ -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>
@@ -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;
@@ -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>
@@ -2,7 +2,7 @@
 const props = defineProps({
    isSuccess: {
        type: Boolean,
-        required: true
+        required: false
    },
    to: {
        type: String,
@@ -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');