Skip to content

Commit dd5800e

Browse files
xxxsfxxxsf
committed
feat: 代码调试界面优化调整
1 parent 6b2c49e commit dd5800e

11 files changed

Lines changed: 1067 additions & 390 deletions

File tree

‎example/src/sites/assets/styles/highlight.scss‎

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@ code {
44
padding: 16px;
55
overflow-x: auto;
66
color: #58727e;
7+
color: #a6accd;
78
font-weight: 400;
89
font-size: 14px;
9-
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
10+
font-family: var(--font-family-mono);
1011
line-height: 26px;
1112
white-space: pre-wrap;
1213
word-wrap: break-word;
1314
-webkit-font-smoothing: auto;
1415
background-color: #fafafa;
15-
border-radius: 16px;
16+
background-color: #161618;
17+
border-radius: 8px;
1618
}
1719

1820
pre {
@@ -30,56 +32,42 @@ pre {
3032
background: #f7f8fa;
3133
}
3234

33-
.hljs-subst {
34-
color: #58727e;
35+
.hljs-comment,
36+
.hljs-quote {
37+
color: #a0a1a7;
38+
font-style: italic;
3539
}
3640

37-
.hljs-string,
38-
.hljs-meta,
39-
.hljs-symbol,
40-
.hljs-template-tag,
41-
.hljs-template-variable,
42-
.hljs-addition {
43-
color: #fa2400;
41+
.hljs-doctag,
42+
.hljs-formula,
43+
.hljs-keyword {
44+
color: #89ddff;
4445
}
4546

46-
.hljs-comment,
47-
.hljs-quote {
48-
color: #999;
47+
.hljs-deletion,
48+
.hljs-name,
49+
.hljs-section,
50+
.hljs-selector-tag,
51+
.hljs-subst {
52+
color: #e45649;
53+
color: #f07178;
4954
}
5055

51-
.hljs-params,
52-
.hljs-keyword,
53-
.hljs-attribute {
54-
color: #986801;
56+
.hljs-literal {
57+
color: #0184bb;
5558
}
5659

57-
.hljs-deletion,
58-
.hljs-variable,
59-
.hljs-number,
60+
.hljs-addition,
61+
.hljs-attribute,
62+
.hljs-meta-string,
6063
.hljs-regexp,
61-
.hljs-literal,
62-
.hljs-bullet,
63-
.hljs-link {
64-
color: #eb6f6f;
64+
.hljs-string {
65+
color: #c3e88d;
6566
}
6667

67-
.hljs-attr,
68-
.hljs-selector-tag,
69-
.hljs-title,
70-
.hljs-section,
7168
.hljs-built_in,
72-
.hljs-doctag,
73-
.hljs-type,
74-
.hljs-name,
75-
.hljs-selector-id,
76-
.hljs-selector-class,
77-
.hljs-strong {
78-
color: #e45649;
79-
}
80-
81-
.hljs-emphasis {
82-
font-style: italic;
69+
.hljs-class .hljs-title {
70+
color: #c18401;
8371
}
8472

8573
.hljs-attr,
@@ -90,12 +78,27 @@ pre {
9078
.hljs-template-variable,
9179
.hljs-type,
9280
.hljs-variable {
93-
color: #986801;
81+
// color: #986801;
82+
color: #c792ea;
9483
}
95-
.hljs-addition,
96-
.hljs-attribute,
97-
.hljs-meta-string,
98-
.hljs-regexp,
99-
.hljs-string {
100-
color: #50a14f;
84+
85+
.hljs-bullet,
86+
.hljs-link,
87+
.hljs-meta,
88+
.hljs-selector-id,
89+
.hljs-symbol,
90+
.hljs-title {
91+
color: #4078f2;
92+
}
93+
94+
.hljs-emphasis {
95+
font-style: italic;
96+
}
97+
98+
.hljs-strong {
99+
font-weight: 700;
100+
}
101+
102+
.hljs-link {
103+
text-decoration: underline;
101104
}

‎example/src/sites/assets/styles/md-style.scss‎

Lines changed: 36 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@import "highlight.scss";
22

33
.doc-content-document {
4+
min-height: 800px;
5+
flex-shrink: 0;
46
position: relative;
5-
padding-top: 48px;
6-
padding-bottom: 48px;
7-
padding-left: 40px;
8-
padding-right: 445px;
7+
padding: 40px;
8+
99
.card {
1010
margin-bottom: 24px;
1111
padding: 24px;
@@ -16,37 +16,27 @@
1616

1717
a {
1818
margin: 0 1px;
19-
color: #0088ff;
20-
-webkit-font-smoothing: auto;
19+
color: #646cff;
20+
text-decoration-line: underline;
2121

2222
&:hover {
23-
color: darken(#0088ff, 10%);
23+
color: #bcc0ff;
2424
}
2525

2626
&:active {
27-
color: darken(#0088ff, 20%);
27+
color: #bcc0ff;
2828
}
2929
}
3030

31-
h1,
32-
h2,
33-
h3,
34-
h4,
35-
h5,
36-
h6 {
37-
color: #333;
38-
font-weight: bold;
39-
line-height: 1.5;
40-
41-
&[id] {
42-
cursor: pointer;
31+
&.isComponent {
32+
h1 {
33+
display: none;
4334
}
4435
}
4536

4637
h1 {
4738
margin: 0 0 30px;
4839
font-size: 30px;
49-
color: #333;
5040
font-weight: bold;
5141
position: relative;
5242
margin-bottom: 56px;
@@ -76,33 +66,26 @@
7666
}
7767

7868
p {
79-
color: #666;
80-
font-size: 14px;
69+
font-size: 16px;
8170
line-height: 22px;
8271
}
72+
8373
strong {
8474
margin: 24px 0 12px;
8575
font-weight: bold;
86-
font-size: 14px;
87-
color: #333;
76+
font-size: 16px;
8877
}
78+
8979
table {
9080
width: 100%;
9181
margin-top: 12px;
92-
color: #666;
9382
font-size: 14px;
9483
line-height: 1.5;
9584
border-collapse: collapse;
96-
border: 1px solid #eee;
9785
th {
9886
padding: 8px 20px;
9987
font-weight: 600;
10088
text-align: left;
101-
border-left: 1px solid #e9e9e9;
102-
background-color: #f7f8fa;
103-
// &:first-child {
104-
// padding-left: 0;
105-
// }
10689

10790
&:last-child {
10891
padding-right: 0;
@@ -111,19 +94,17 @@
11194

11295
td {
11396
padding: 8px 20px;
114-
border-top: 1px solid #f1f4f8;
115-
border-left: 1px solid #e9e9e9;
97+
color: #fff;
98+
11699
&:first-child {
117-
// padding-left: 0;
118100
border-left: 0px;
119-
// version tag
120101
code {
121102
margin: 0;
122103
padding: 2px 6px;
123-
color: #0088ff;
104+
color: #38bdf7;
124105
font-weight: 600;
125106
font-size: 11px;
126-
background-color: fade(#0088ff, 10%);
107+
background-color: fade(#38bdf7, 10%);
127108
border-radius: 20px;
128109
}
129110
}
@@ -136,7 +117,8 @@
136117
em {
137118
color: #fa2400;
138119
font-size: 14px;
139-
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
120+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
121+
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
140122
font-style: normal;
141123
-webkit-font-smoothing: auto;
142124
}
@@ -145,11 +127,11 @@
145127
ul li,
146128
ol li {
147129
position: relative;
148-
margin: 5px 0 5px 10px;
149-
padding-left: 15px;
150-
color: #666;
151-
font-size: 15px;
130+
// margin: 5px 0 5px 10px;
131+
// padding-left: 15px;
132+
font-size: 16px;
152133
line-height: 26px;
134+
list-style-type: disc;
153135

154136
&::before {
155137
position: absolute;
@@ -159,7 +141,7 @@
159141
width: 6px;
160142
height: 6px;
161143
margin-top: 10px;
162-
border: 1px solid #666;
144+
border: 1px solid #eee;
163145
border-radius: 50%;
164146
content: "";
165147
}
@@ -180,9 +162,10 @@
180162
font-size: 14px;
181163
font-family: inherit;
182164
word-break: keep-all;
183-
background-color: #f7f8fa;
184165
border-radius: 4px;
185166
-webkit-font-smoothing: antialiased;
167+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
168+
Consolas, "Liberation Mono", "Courier New", monospace;
186169
}
187170

188171
p > code {
@@ -197,11 +180,11 @@
197180
blockquote {
198181
margin: 16px 0px;
199182
padding: 16px;
200-
background-color: #f7f8fa;
201-
border-left: 6px solid #128dff;
202-
border-radius: 3px;
183+
background-color: rgba(100, 108, 255, 0.08);
184+
border: 1px solid var(--brand-color);
185+
border-radius: 8px;
203186
p {
204-
color: #333;
187+
color: #fff;
205188
}
206189
}
207190

@@ -242,4 +225,8 @@
242225
}
243226
}
244227
}
228+
229+
ul li::before {
230+
display: none;
231+
}
245232
}

0 commit comments

Comments
 (0)