Skip to content

Commit

Permalink
feat: 代码调试界面优化调整
Browse files Browse the repository at this point in the history
  • Loading branch information
@xxxsf
xxxsf committed Apr 28, 2023
1 parent 6b2c49e commit dd5800e
Show file tree
Hide file tree
Showing 11 changed files with 1,067 additions and 390 deletions.
97 changes: 50 additions & 47 deletions example/src/sites/assets/styles/highlight.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@ code {
padding: 16px;
overflow-x: auto;
color: #58727e;
color: #a6accd;
font-weight: 400;
font-size: 14px;
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
font-family: var(--font-family-mono);
line-height: 26px;
white-space: pre-wrap;
word-wrap: break-word;
-webkit-font-smoothing: auto;
background-color: #fafafa;
border-radius: 16px;
background-color: #161618;
border-radius: 8px;
}

pre {
Expand All @@ -30,56 +32,42 @@ pre {
background: #f7f8fa;
}

.hljs-subst {
color: #58727e;
.hljs-comment,
.hljs-quote {
color: #a0a1a7;
font-style: italic;
}

.hljs-string,
.hljs-meta,
.hljs-symbol,
.hljs-template-tag,
.hljs-template-variable,
.hljs-addition {
color: #fa2400;
.hljs-doctag,
.hljs-formula,
.hljs-keyword {
color: #89ddff;
}

.hljs-comment,
.hljs-quote {
color: #999;
.hljs-deletion,
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
color: #e45649;
color: #f07178;
}

.hljs-params,
.hljs-keyword,
.hljs-attribute {
color: #986801;
.hljs-literal {
color: #0184bb;
}

.hljs-deletion,
.hljs-variable,
.hljs-number,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string,
.hljs-regexp,
.hljs-literal,
.hljs-bullet,
.hljs-link {
color: #eb6f6f;
.hljs-string {
color: #c3e88d;
}

.hljs-attr,
.hljs-selector-tag,
.hljs-title,
.hljs-section,
.hljs-built_in,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-strong {
color: #e45649;
}

.hljs-emphasis {
font-style: italic;
.hljs-class .hljs-title {
color: #c18401;
}

.hljs-attr,
Expand All @@ -90,12 +78,27 @@ pre {
.hljs-template-variable,
.hljs-type,
.hljs-variable {
color: #986801;
// color: #986801;
color: #c792ea;
}
.hljs-addition,
.hljs-attribute,
.hljs-meta-string,
.hljs-regexp,
.hljs-string {
color: #50a14f;

.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
color: #4078f2;
}

.hljs-emphasis {
font-style: italic;
}

.hljs-strong {
font-weight: 700;
}

.hljs-link {
text-decoration: underline;
}
85 changes: 36 additions & 49 deletions example/src/sites/assets/styles/md-style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@import "highlight.scss";

.doc-content-document {
min-height: 800px;
flex-shrink: 0;
position: relative;
padding-top: 48px;
padding-bottom: 48px;
padding-left: 40px;
padding-right: 445px;
padding: 40px;

.card {
margin-bottom: 24px;
padding: 24px;
Expand All @@ -16,37 +16,27 @@

a {
margin: 0 1px;
color: #0088ff;
-webkit-font-smoothing: auto;
color: #646cff;
text-decoration-line: underline;

&:hover {
color: darken(#0088ff, 10%);
color: #bcc0ff;
}

&:active {
color: darken(#0088ff, 20%);
color: #bcc0ff;
}
}

h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
font-weight: bold;
line-height: 1.5;

&[id] {
cursor: pointer;
&.isComponent {
h1 {
display: none;
}
}

h1 {
margin: 0 0 30px;
font-size: 30px;
color: #333;
font-weight: bold;
position: relative;
margin-bottom: 56px;
Expand Down Expand Up @@ -76,33 +66,26 @@
}

p {
color: #666;
font-size: 14px;
font-size: 16px;
line-height: 22px;
}

strong {
margin: 24px 0 12px;
font-weight: bold;
font-size: 14px;
color: #333;
font-size: 16px;
}

table {
width: 100%;
margin-top: 12px;
color: #666;
font-size: 14px;
line-height: 1.5;
border-collapse: collapse;
border: 1px solid #eee;
th {
padding: 8px 20px;
font-weight: 600;
text-align: left;
border-left: 1px solid #e9e9e9;
background-color: #f7f8fa;
// &:first-child {
// padding-left: 0;
// }

&:last-child {
padding-right: 0;
Expand All @@ -111,19 +94,17 @@

td {
padding: 8px 20px;
border-top: 1px solid #f1f4f8;
border-left: 1px solid #e9e9e9;
color: #fff;

&:first-child {
// padding-left: 0;
border-left: 0px;
// version tag
code {
margin: 0;
padding: 2px 6px;
color: #0088ff;
color: #38bdf7;
font-weight: 600;
font-size: 11px;
background-color: fade(#0088ff, 10%);
background-color: fade(#38bdf7, 10%);
border-radius: 20px;
}
}
Expand All @@ -136,7 +117,8 @@
em {
color: #fa2400;
font-size: 14px;
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-style: normal;
-webkit-font-smoothing: auto;
}
Expand All @@ -145,11 +127,11 @@
ul li,
ol li {
position: relative;
margin: 5px 0 5px 10px;
padding-left: 15px;
color: #666;
font-size: 15px;
// margin: 5px 0 5px 10px;
// padding-left: 15px;
font-size: 16px;
line-height: 26px;
list-style-type: disc;

&::before {
position: absolute;
Expand All @@ -159,7 +141,7 @@
width: 6px;
height: 6px;
margin-top: 10px;
border: 1px solid #666;
border: 1px solid #eee;
border-radius: 50%;
content: "";
}
Expand All @@ -180,9 +162,10 @@
font-size: 14px;
font-family: inherit;
word-break: keep-all;
background-color: #f7f8fa;
border-radius: 4px;
-webkit-font-smoothing: antialiased;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
Consolas, "Liberation Mono", "Courier New", monospace;
}

p > code {
Expand All @@ -197,11 +180,11 @@
blockquote {
margin: 16px 0px;
padding: 16px;
background-color: #f7f8fa;
border-left: 6px solid #128dff;
border-radius: 3px;
background-color: rgba(100, 108, 255, 0.08);
border: 1px solid var(--brand-color);
border-radius: 8px;
p {
color: #333;
color: #fff;
}
}

Expand Down Expand Up @@ -242,4 +225,8 @@
}
}
}

ul li::before {
display: none;
}
}
Loading

0 comments on commit dd5800e

Please sign in to comment.