Skip to content

Commit 1a22984

Browse files
pavverpavver
committed
update code higlighter example
1 parent 8dd7339 commit 1a22984

6 files changed

Lines changed: 591 additions & 562 deletions

File tree

‎.github/workflows/deploy-code-highlighter-demo.yml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ on:
66
branches:
77
- master # Або 'main'
88
paths:
9-
- 'src/genius-parser/code-highlighter/example/index.html'
10-
- 'src/genius-parser/code-highlighter/src/index.js'
9+
- 'src/genius-parser/code-highlighter/example/**'
10+
- 'src/genius-parser/code-highlighter/src/index.js'
1111
workflow_dispatch:
1212

1313
permissions:
@@ -31,12 +31,12 @@ jobs:
3131

3232
- name: Prepare build directory
3333
run: |
34-
mkdir -p ./_site/src
35-
cp src/genius-parser/code-highlighter/example/index.html ./_site/index.html
34+
mkdir -p ./_site/src/genius-parser/code-highlighter/example
35+
cp -r src/genius-parser/code-highlighter/example/* ./_site/src/genius-parser/code-highlighter/example/
3636
cp src/genius-parser/code-highlighter/src/index.js ./_site/src/index.js
3737
3838
- name: Fix script path in index.html
39-
run: sed -i 's|../src/index.js|./src/index.js|g' ./_site/index.html
39+
run: sed -i 's|../src/index.js|./src/index.js|g' ./_site/src/genius-parser/code-highlighter/example/index.html
4040

4141
- name: Upload artifact
4242
uses: actions/upload-pages-artifact@v3

‎src/genius-parser/code-highlighter/example/css/styles.css‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
9+
padding: 20px;
10+
background: #121212;
11+
color: #e0e0e0;
12+
}
13+
14+
.container {
15+
max-width: 1400px;
16+
margin: 0 auto;
17+
}
18+
19+
h1 {
20+
text-align: center;
21+
color: #ffffff;
22+
margin-bottom: 10px;
23+
font-family: 'Segoe UI', sans-serif;
24+
}
25+
26+
.subtitle {
27+
text-align: center;
28+
color: #a0a0a0;
29+
margin-bottom: 30px;
30+
font-family: 'Segoe UI', sans-serif;
31+
}
32+
33+
.controls {
34+
background: #1e1e1e;
35+
padding: 20px;
36+
border-radius: 8px;
37+
border: 1px solid #333;
38+
margin-bottom: 20px;
39+
}
40+
41+
.control-group {
42+
display: flex;
43+
align-items: center;
44+
gap: 15px;
45+
margin-bottom: 15px;
46+
flex-wrap: wrap;
47+
}
48+
49+
.control-group label {
50+
font-weight: bold;
51+
min-width: 150px;
52+
font-family: 'Segoe UI', sans-serif;
53+
}
54+
55+
input[type="color"] {
56+
width: 60px;
57+
height: 40px;
58+
border: 1px solid #444;
59+
border-radius: 4px;
60+
cursor: pointer;
61+
}
62+
63+
input[type="text"] {
64+
flex: 1;
65+
padding: 8px;
66+
border: 1px solid #444;
67+
border-radius: 4px;
68+
font-family: monospace;
69+
background-color: #333;
70+
color: #e0e0e0;
71+
}
72+
73+
.preset-buttons {
74+
display: flex;
75+
gap: 10px;
76+
flex-wrap: wrap;
77+
}
78+
79+
.preset-btn {
80+
padding: 8px 15px;
81+
border: none;
82+
border-radius: 4px;
83+
cursor: pointer;
84+
font-size: 12px;
85+
transition: transform 0.1s;
86+
font-family: 'Segoe UI', sans-serif;
87+
}
88+
89+
.preset-btn:hover {
90+
transform: scale(1.05);
91+
}
92+
93+
.preset-btn:active {
94+
transform: scale(0.95);
95+
}
96+
97+
.main-content {
98+
display: grid;
99+
grid-template-columns: 1fr 350px;
100+
gap: 20px;
101+
}
102+
103+
.editor-panel {
104+
background: #1e1e1e;
105+
padding: 20px;
106+
border-radius: 8px;
107+
border: 1px solid #333;
108+
}
109+
110+
.editor-header {
111+
display: flex;
112+
justify-content: space-between;
113+
align-items: center;
114+
margin-bottom: 15px;
115+
padding-bottom: 10px;
116+
border-bottom: 2px solid #333;
117+
}
118+
119+
.editor-header h2 {
120+
font-family: 'Segoe UI', sans-serif;
121+
color: #ffffff;
122+
}
123+
124+
.stats {
125+
font-size: 12px;
126+
color: #a0a0a0;
127+
font-family: 'Segoe UI', sans-serif;
128+
}
129+
130+
.gcode-editor {
131+
padding: 20px;
132+
border-radius: 4px;
133+
font-size: 16px;
134+
line-height: 1.6;
135+
overflow-x: auto;
136+
min-height: 600px;
137+
transition: background-color 0.3s;
138+
font-family: "Cascadia Code", "Consolas", "Monaco", monospace;
139+
}
140+
141+
.gcode-line {
142+
white-space: pre;
143+
margin: 0;
144+
transition: color 0.3s;
145+
}
146+
147+
.legend-panel {
148+
background: #1e1e1e;
149+
padding: 0px 20px 20px 20px;
150+
border-radius: 8px;
151+
border: 1px solid #333;
152+
max-height: 800px;
153+
overflow-y: auto;
154+
scrollbar-width: thin;
155+
scrollbar-color: #4a4a4a #1e1e1e;
156+
}
157+
158+
.legend-panel h2 {
159+
font-family: 'Segoe UI', sans-serif;
160+
margin: -20px -20px 15px -20px;
161+
color: #ffffff;
162+
position: sticky;
163+
top: 0;
164+
background: #1e1e1e;
165+
padding: 20px 20px 10px 20px;
166+
border-bottom: 2px solid #333;
167+
z-index: 1;
168+
border-top-left-radius: 8px;
169+
border-top-right-radius: 8px;
170+
}
171+
172+
.legend-item {
173+
display: flex;
174+
align-items: center;
175+
padding: 8px;
176+
margin-bottom: 8px;
177+
border-radius: 4px;
178+
background: #2a2a2a;
179+
transition: background 0.2s;
180+
}
181+
182+
.legend-item:hover {
183+
background: #3a3a3a;
184+
}
185+
186+
.legend-color {
187+
width: 30px;
188+
height: 20px;
189+
border-radius: 3px;
190+
margin-right: 10px;
191+
border: 1px solid #444;
192+
transition: background-color 0.3s;
193+
}
194+
195+
.legend-info {
196+
flex: 1;
197+
font-size: 12px;
198+
}
199+
200+
.legend-name {
201+
font-weight: bold;
202+
margin-bottom: 2px;
203+
font-family: 'Segoe UI', sans-serif;
204+
}
205+
206+
.legend-desc {
207+
color: #a0a0a0;
208+
font-size: 11px;
209+
font-family: 'Segoe UI', sans-serif;
210+
}
211+
212+
.contrast-info {
213+
font-size: 10px;
214+
color: #888;
215+
margin-top: 2px;
216+
}
217+
218+
@media (max-width: 1200px) {
219+
.main-content {
220+
grid-template-columns: 1fr;
221+
}
222+
223+
.legend-panel {
224+
max-height: none;
225+
}
226+
}
227+
228+
.footer {
229+
text-align: center;
230+
margin-top: 30px;
231+
padding: 20px;
232+
color: #a0a0a0;
233+
font-size: 12px;
234+
font-family: 'Segoe UI', sans-serif;
235+
}
236+
237+
/* Dark Scrollbar for Legend Panel */
238+
.legend-panel::-webkit-scrollbar,
239+
#gcodeTextarea::-webkit-scrollbar {
240+
width: 12px;
241+
}
242+
243+
.legend-panel::-webkit-scrollbar-track,
244+
#gcodeTextarea::-webkit-scrollbar-track {
245+
background: #1e1e1e;
246+
}
247+
248+
.legend-panel::-webkit-scrollbar-thumb,
249+
#gcodeTextarea::-webkit-scrollbar-thumb {
250+
background-color: #4a4a4a;
251+
border-radius: 6px;
252+
border: 3px solid #1e1e1e;
253+
}
254+
255+
.legend-panel::-webkit-scrollbar-thumb:hover,
256+
#gcodeTextarea::-webkit-scrollbar-thumb:hover {
257+
background-color: #6a6a6a;
258+
}
259+
260+
#gcodeTextarea {
261+
scrollbar-width: thin;
262+
scrollbar-color: #4a4a4a #1e1e1e;
263+
}

0 commit comments

Comments
 (0)