admin/probody
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
Ilia Miheev
2026-03-25 00:13:06 +03:00
parent ad78917e91
commit 2c490c8359
8 changed files with 122 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+18 -11
View File
@@ -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
+1
View File
@@ -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
+5
View File
@@ -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
+26
View File
@@ -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
+5 -7
View File
@@ -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
+62
View File
@@ -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
+1 -1
View File
@@ -2,7 +2,7 @@
const props = defineProps({
isSuccess: {
type: Boolean,
required: true
required: false
},
to: {
type: String,
src/renderer.js
+4
View File
@@ -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');