215 lines
3.4 KiB
CSS
215 lines
3.4 KiB
CSS
/* copy from [vitepress](https://github.com/vuejs/vitepress) */
|
|
code {
|
|
margin: 0;
|
|
border-radius: 3px;
|
|
padding: 0.25rem 0.5rem;
|
|
font-family: var(--code-font-family);
|
|
font-size: 0.85em;
|
|
color: var(--c-text-light);
|
|
background-color: var(--code-inline-bg-color);
|
|
}
|
|
|
|
code .token.deleted {
|
|
color: #ec5975;
|
|
}
|
|
|
|
code .token.inserted {
|
|
color: var(--c-brand);
|
|
}
|
|
|
|
div[class*='language-'] {
|
|
position: relative;
|
|
margin: 1rem -1.5rem;
|
|
background-color: #fafafa;
|
|
overflow-x: auto;
|
|
border: 1px solid #eaeefb;
|
|
}
|
|
|
|
li > div[class*='language-'] {
|
|
border-radius: 6px 0 0 6px;
|
|
margin: 1rem -1.5rem 1rem -1.25rem;
|
|
}
|
|
|
|
@media (min-width: 420px) {
|
|
div[class*='language-'] {
|
|
margin: 1rem 0;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
li > div[class*='language-'] {
|
|
margin: 1rem 0 1rem 0rem;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
|
|
[class*='language-'] pre,
|
|
[class*='language-'] code {
|
|
text-align: left;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
word-break: normal;
|
|
word-wrap: normal;
|
|
-moz-tab-size: 4;
|
|
-o-tab-size: 4;
|
|
tab-size: 4;
|
|
-webkit-hyphens: none;
|
|
-moz-hyphens: none;
|
|
-ms-hyphens: none;
|
|
hyphens: none;
|
|
}
|
|
|
|
[class*='language-'] pre {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 0;
|
|
padding: 1.25rem 1.5rem;
|
|
background: transparent;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
[class*='language-'] pre p {
|
|
margin: auto !important;
|
|
}
|
|
|
|
[class*='language-'] code {
|
|
padding: 0;
|
|
line-height: var(--code-line-height);
|
|
font-size: var(--code-font-size);
|
|
color: #000;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
/* Line highlighting */
|
|
|
|
.highlight-lines {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 1.25rem 0;
|
|
width: 100%;
|
|
line-height: var(--code-line-height);
|
|
font-family: var(--code-font-family);
|
|
font-size: var(--code-font-size);
|
|
user-select: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.highlight-lines .highlighted {
|
|
background-color: rgba(0, 0, 0, 0.66);
|
|
}
|
|
|
|
/* Line numbers mode */
|
|
|
|
div[class*='language-'].line-numbers-mode {
|
|
padding-left: 3.5rem;
|
|
}
|
|
|
|
.line-numbers-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
border-right: 1px solid rgba(0, 0, 0, 0.5);
|
|
padding: 1.25rem 0;
|
|
width: 3.5rem;
|
|
text-align: center;
|
|
line-height: var(--code-line-height);
|
|
font-family: var(--code-font-family);
|
|
font-size: var(--code-font-size);
|
|
color: #888;
|
|
}
|
|
|
|
/* Language marker */
|
|
|
|
[class*='language-']:before {
|
|
position: absolute;
|
|
top: 0.6em;
|
|
right: 1em;
|
|
z-index: 2;
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
}
|
|
|
|
/**
|
|
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML.
|
|
* Based on https://github.com/chriskempson/tomorrow-theme
|
|
*
|
|
* @author Rose Pritchard
|
|
*/
|
|
.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: #e2777a;
|
|
}
|
|
|
|
.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: green;
|
|
}
|