e196aefcd3
* feat: improvement ui codeblock * chore: update ui code block * chore: finalize ui code block and latex * chore: fix jest testing and cleanup unused deps
168 lines
2.5 KiB
SCSS
168 lines
2.5 KiB
SCSS
.hljs-comment,
|
|
.hljs-quote {
|
|
color: var(--hljs-comment);
|
|
}
|
|
|
|
/* Red */
|
|
.hljs-variable,
|
|
.hljs-template-variable,
|
|
.hljs-tag,
|
|
.hljs-name,
|
|
.hljs-selector-id,
|
|
.hljs-selector-class,
|
|
.hljs-regexp,
|
|
.hljs-deletion {
|
|
color: var(--hljs-variable);
|
|
}
|
|
|
|
/* Orange */
|
|
.hljs-number,
|
|
.hljs-built_in,
|
|
.hljs-builtin-name,
|
|
.hljs-literal,
|
|
.hljs-type,
|
|
.hljs-params,
|
|
.hljs-meta,
|
|
.hljs-link {
|
|
color: var(--hljs-number);
|
|
}
|
|
|
|
/* Yellow */
|
|
.hljs-attribute {
|
|
color: var(--hljs-attribute);
|
|
}
|
|
|
|
/* Green */
|
|
.hljs-string,
|
|
.hljs-symbol,
|
|
.hljs-bullet,
|
|
.hljs-addition {
|
|
color: var(--hljs-string);
|
|
}
|
|
|
|
/* Blue */
|
|
.hljs-title,
|
|
.hljs-section {
|
|
color: var(--hljs-title);
|
|
}
|
|
|
|
/* Purple */
|
|
.hljs-keyword,
|
|
.hljs-selector-tag {
|
|
color: var(--hljs-keyword);
|
|
}
|
|
|
|
.hljs {
|
|
overflow: auto;
|
|
display: block;
|
|
padding: 16px;
|
|
font-size: 14px;
|
|
border-bottom-left-radius: 0.4rem;
|
|
border-bottom-right-radius: 0.4rem;
|
|
color: #f8f8f2;
|
|
}
|
|
|
|
pre {
|
|
background: hsla(var(--app-code-block));
|
|
overflow: auto;
|
|
padding: 8px 16px;
|
|
border-radius: 0.4rem;
|
|
}
|
|
pre > code {
|
|
text-indent: 0;
|
|
white-space: pre;
|
|
font-size: 14px;
|
|
overflow: auto;
|
|
color: #f8f8f2;
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.code-block {
|
|
pre {
|
|
padding: 0;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (-ms-high-contrast: active) {
|
|
.hljs-addition,
|
|
.hljs-attribute,
|
|
.hljs-built_in,
|
|
.hljs-builtin-name,
|
|
.hljs-bullet,
|
|
.hljs-comment,
|
|
.hljs-link,
|
|
.hljs-literal,
|
|
.hljs-meta,
|
|
.hljs-number,
|
|
.hljs-params,
|
|
.hljs-string,
|
|
.hljs-symbol,
|
|
.hljs-type,
|
|
.hljs-quote {
|
|
color: highlight;
|
|
}
|
|
|
|
.hljs-keyword,
|
|
.hljs-selector-tag {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.code-block-wrapper {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.code-line {
|
|
// padding-left: 12px;
|
|
padding-right: 12px;
|
|
margin-left: -12px;
|
|
margin-right: -12px;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
div.code-line:empty {
|
|
height: 21.5938px;
|
|
}
|
|
|
|
span.code-line {
|
|
// min-width: 100%;
|
|
white-space: pre;
|
|
display: inline-block;
|
|
max-width: 10vw;
|
|
}
|
|
|
|
.code-line.inserted {
|
|
background-color: var(--color-inserted-line);
|
|
}
|
|
|
|
.code-line.deleted {
|
|
background-color: var(--color-deleted-line);
|
|
}
|
|
|
|
.highlighted-code-line {
|
|
background-color: var(--color-highlighted-line);
|
|
border-left: 4px solid var(--color-highlighted-line-indicator);
|
|
}
|
|
|
|
.numbered-code-line::before {
|
|
content: attr(data-line-number);
|
|
|
|
margin-left: -8px;
|
|
margin-right: 16px;
|
|
width: 1rem;
|
|
font-size: 12px;
|
|
color: var(--color-text-weak);
|
|
text-align: right;
|
|
|
|
display: inline-block;
|
|
}
|