2023-06-30 17:25:49 +08:00

287 lines
4.9 KiB
SCSS

// ===============================
// Forked and modified from prismjs/themes/prism-tomorrow.css
code[class*='language-'],
pre[class*='language-'] {
color: var(--vp-code-block-color);
background: none;
font-family: var(--vp-font-family-mono);
font-size: var(--vp-code-font-size);
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: var(--vp-code-line-height);
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*='language-'] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
}
// :not(pre) > code[class*='language-'],
// pre[class*='language-'] {
// background: var(--vp-code-block-bg);
// }
// /* Inline code */
// :not(pre) > code[class*='language-'] {
// padding: 0.1em;
// border-radius: 0.3em;
// white-space: normal;
// }
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999;
}
.token.punctuation {
color: #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color: #ec5975;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: #7ec699;
}
.token.operator,
.token.entity,
.token.url {
color: #67cdcc;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: #3eaf7c;
}
// ===============================
.plume-content {
pre,
pre[class*='language-'] {
// line-height: 1.4;
padding: 1.3rem 1.5rem;
margin: 0 0 0.85rem 0;
border-radius: 6px;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--c-brand) var(--c-border);
font-size: 14px;
&::-webkit-scrollbar {
width: 7px;
height: 7px;
}
&::-webkit-scrollbar-track {
background-color: var(--vp-code-block-bg);
}
&::-webkit-scrollbar-thumb {
background-color: rgba(220, 220, 220, 0.35);
border-radius: 3px;
}
code {
color: #fff;
padding: 0;
background-color: transparent;
border-radius: 0;
overflow-wrap: unset;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
}
.line-number {
font-family: var(--vp-font-family-mono);
}
.code-tabs {
.div[class*='language-'] {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}
.code-tabs-nav {
margin-bottom: 0rem;
}
div[class*='language-'] {
position: relative;
background-color: var(--vp-code-block-bg);
border-radius: 6px;
&::before {
content: attr(data-ext);
position: absolute;
z-index: 3;
top: 0.8em;
right: 1em;
font-size: 0.75rem;
color: var(--vp-code-line-number-color);
}
pre,
pre[class*='language-'] {
// force override the background color to be compatible with shiki
background: transparent !important;
position: relative;
z-index: 1;
}
.highlight-lines {
user-select: none;
padding-top: 1.3rem;
position: absolute;
top: 0;
left: 0;
width: 100%;
line-height: 1.4;
.highlight-line {
background-color: var(--vp-code-block-bg);
}
}
&:not(.line-numbers-mode) {
.line-numbers {
display: none;
}
}
&.line-numbers-mode {
.highlight-lines .highlight-line {
position: relative;
&::before {
content: ' ';
position: absolute;
z-index: 2;
left: 0;
top: 0;
display: block;
// width: var(--code-ln-wrapper-width);
height: 100%;
}
}
pre {
margin-left: 2rem;
padding-left: 1rem;
vertical-align: middle;
}
.line-numbers {
position: absolute;
top: 0;
left: 0;
width: 2rem;
height: 100%;
text-align: center;
z-index: 1;
color: var(--vp-code-line-number-color);
padding-top: 1.14rem;
line-height: var(--vp-code-line-height);
counter-reset: line-number;
border-right: var(--vp-code-block-divider-color) 1px solid;
.line-number {
position: relative;
z-index: 3;
user-select: none;
height: 1.5rem;
&::before {
counter-increment: line-number;
content: counter(line-number);
font-size: 0.85em;
}
}
}
}
}
// narrow mobile
@media (max-width: 419px) {
.plume-content {
div[class*='language-'] {
margin: 0.85rem -1.5rem;
border-radius: 0;
}
}
.plume-content .vp-code-tabs-nav {
margin: 0 -1.5rem -0.85rem;
}
}
.hint-container.info pre code {
background-color: transparent;
}