mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 18:50:29 -04:00
98 lines
3.1 KiB
CSS
98 lines
3.1 KiB
CSS
.code_block {
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
/* the following sub-classes MUST be global -- the highlight rehype plugin isn't aware of this file */
|
|
|
|
.code_block :global(.code-highlight) {
|
|
display: block;
|
|
overflow-x: auto;
|
|
padding: 1em;
|
|
tab-size: 2;
|
|
color: var(--code-text);
|
|
background-color: var(--code-background);
|
|
}
|
|
|
|
/* leave room for clipboard button to the right of the first line */
|
|
.code_block :global(.code-highlight) > :global(.code-line:first-of-type) {
|
|
margin-right: 3em;
|
|
}
|
|
|
|
.code_block :global(.code-highlight) > :global(.code-line.line-number::before) {
|
|
display: inline-block;
|
|
width: 1.5em;
|
|
margin-right: 1.5em;
|
|
text-align: right;
|
|
color: var(--code-comment);
|
|
content: attr(line); /* added to spans by prism */
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.comment),
|
|
.code_block :global(.code-highlight) :global(.token.prolog),
|
|
.code_block :global(.code-highlight) :global(.token.cdata) {
|
|
color: var(--code-comment);
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.delimiter),
|
|
.code_block :global(.code-highlight) :global(.token.boolean),
|
|
.code_block :global(.code-highlight) :global(.token.keyword),
|
|
.code_block :global(.code-highlight) :global(.token.selector),
|
|
.code_block :global(.code-highlight) :global(.token.important),
|
|
.code_block :global(.code-highlight) :global(.token.doctype),
|
|
.code_block :global(.code-highlight) :global(.token.atrule),
|
|
.code_block :global(.code-highlight) :global(.token.url) {
|
|
color: var(--code-keyword);
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.tag),
|
|
.code_block :global(.code-highlight) :global(.token.builtin),
|
|
.code_block :global(.code-highlight) :global(.token.regex) {
|
|
color: var(--code-namespace);
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.property),
|
|
.code_block :global(.code-highlight) :global(.token.constant),
|
|
.code_block :global(.code-highlight) :global(.token.variable),
|
|
.code_block :global(.code-highlight) :global(.token.attr-value),
|
|
.code_block :global(.code-highlight) :global(.token.class-name),
|
|
.code_block :global(.code-highlight) :global(.token.string),
|
|
.code_block :global(.code-highlight) :global(.token.char) {
|
|
color: var(--code-variable);
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.literal-property),
|
|
.code_block :global(.code-highlight) :global(.token.attr-name) {
|
|
color: var(--code-attribute);
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.function) {
|
|
color: var(--code-literal);
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.tag .punctuation),
|
|
.code_block :global(.code-highlight) :global(.token.attr-value .punctuation) {
|
|
color: var(--code-punctuation);
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.inserted) {
|
|
background-color: var(--code-addition);
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.deleted) {
|
|
background-color: var(--code-deletion);
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.url) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.bold) {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.code_block :global(.code-highlight) :global(.token.italic) {
|
|
font-style: italic;
|
|
}
|