256 lines
5.5 KiB
CSS
256 lines
5.5 KiB
CSS
|
|
:root {
|
||
|
|
--prism-scheme: light;
|
||
|
|
|
||
|
|
/* Colors */
|
||
|
|
--prism-foreground: #6e6e6e;
|
||
|
|
--prism-background: #f4f4f4;
|
||
|
|
|
||
|
|
/* Tokens */
|
||
|
|
--prism-comment: #a8a8a8;
|
||
|
|
--prism-string: #555555;
|
||
|
|
--prism-literal: #333333;
|
||
|
|
--prism-keyword: #000000;
|
||
|
|
--prism-function: #4f4f4f;
|
||
|
|
--prism-deleted: #333333;
|
||
|
|
--prism-class: #333333;
|
||
|
|
--prism-builtin: #757575;
|
||
|
|
--prism-property: #333333;
|
||
|
|
--prism-namespace: #4f4f4f;
|
||
|
|
--prism-punctuation: #ababab;
|
||
|
|
--prism-decorator: var(--prism-class);
|
||
|
|
--prism-operator: var(--prism-punctuation);
|
||
|
|
--prism-number: var(--prism-literal);
|
||
|
|
--prism-boolean: var(--prism-literal);
|
||
|
|
--prism-variable: var(--prism-literal);
|
||
|
|
--prism-constant: var(--prism-literal);
|
||
|
|
--prism-symbol: var(--prism-literal);
|
||
|
|
--prism-interpolation: var(--prism-literal);
|
||
|
|
--prism-selector: var(--prism-keyword);
|
||
|
|
--prism-keyword-control: var(--prism-keyword);
|
||
|
|
--prism-regex: var(--prism-string);
|
||
|
|
--prism-json-property: var(--prism-property);
|
||
|
|
--prism-inline-background: var(--prism-background);
|
||
|
|
|
||
|
|
/* Token Styles */
|
||
|
|
--prism-comment-style: italic;
|
||
|
|
--prism-url-decoration: underline;
|
||
|
|
|
||
|
|
/* Extension */
|
||
|
|
--prism-line-number: #a5a5a5;
|
||
|
|
--prism-line-number-gutter: #333333;
|
||
|
|
--prism-line-highlight-background: #eeeeee;
|
||
|
|
--prism-selection-background: #dddddd;
|
||
|
|
--prism-marker-color: var(--prism-foreground);
|
||
|
|
--prism-marker-opacity: 0.4;
|
||
|
|
--prism-marker-font-size: 0.8em;
|
||
|
|
|
||
|
|
/* Font */
|
||
|
|
--prism-font-size: 1em;
|
||
|
|
--prism-line-height: 1.5em;
|
||
|
|
--prism-font-family: monospace;
|
||
|
|
--prism-inline-font-size: var(--prism-font-size);
|
||
|
|
--prism-block-font-size: var(--prism-font-size);
|
||
|
|
|
||
|
|
/* Sizing */
|
||
|
|
--prism-tab-size: 2;
|
||
|
|
|
||
|
|
--prism-block-padding-x: 1em;
|
||
|
|
--prism-block-padding-y: 1em;
|
||
|
|
--prism-block-margin-x: 0;
|
||
|
|
--prism-block-margin-y: 0.5em;
|
||
|
|
--prism-block-radius: 0.3em;
|
||
|
|
--prism-inline-padding-x: 0.3em;
|
||
|
|
--prism-inline-padding-y: 0.1em;
|
||
|
|
--prism-inline-radius: 0.3em;
|
||
|
|
}
|
||
|
|
|
||
|
|
div[class*='language-'],
|
||
|
|
pre[class*='language-'],
|
||
|
|
code[class*='language-'] {
|
||
|
|
font-size: var(--prism-font-size);
|
||
|
|
font-family: var(--prism-font-family);
|
||
|
|
direction: ltr;
|
||
|
|
text-align: left;
|
||
|
|
white-space: pre;
|
||
|
|
word-spacing: normal;
|
||
|
|
word-break: normal;
|
||
|
|
line-height: var(--prism-line-height);
|
||
|
|
-moz-tab-size: var(--prism-tab-size);
|
||
|
|
-o-tab-size: var(--prism-tab-size);
|
||
|
|
tab-size: var(--prism-tab-size);
|
||
|
|
-webkit-hyphens: none;
|
||
|
|
-moz-hyphens: none;
|
||
|
|
-ms-hyphens: none;
|
||
|
|
hyphens: none;
|
||
|
|
color: var(--prism-foreground) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Code blocks */
|
||
|
|
div[class*='language-'],
|
||
|
|
pre[class*='language-'] {
|
||
|
|
font-size: var(--prism-block-font-size);
|
||
|
|
padding: var(--prism-block-padding-y) var(--prism-block-padding-x);
|
||
|
|
margin: var(--prism-block-margin-y) var(--prism-block-margin-x);
|
||
|
|
border-radius: var(--prism-block-radius);
|
||
|
|
overflow: auto;
|
||
|
|
background: var(--prism-background);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Inline code */
|
||
|
|
:not(pre) > code[class*='language-'] {
|
||
|
|
font-size: var(--prism-inline-font-size);
|
||
|
|
padding: var(--prism-inline-padding-y) var(--prism-inline-padding-x);
|
||
|
|
border-radius: var(--prism-inline-radius);
|
||
|
|
background: var(--prism-inline-background);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Selection */
|
||
|
|
pre[class*='language-']::-moz-selection,
|
||
|
|
pre[class*='language-'] ::-moz-selection,
|
||
|
|
code[class*='language-']::-moz-selection,
|
||
|
|
code[class*='language-'] ::-moz-selection {
|
||
|
|
background: var(--prism-selection-background);
|
||
|
|
}
|
||
|
|
|
||
|
|
pre[class*='language-']::selection,
|
||
|
|
pre[class*='language-'] ::selection,
|
||
|
|
code[class*='language-']::selection,
|
||
|
|
code[class*='language-'] ::selection {
|
||
|
|
background: var(--prism-selection-background);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Tokens */
|
||
|
|
.token.comment,
|
||
|
|
.token.prolog,
|
||
|
|
.token.doctype,
|
||
|
|
.token.cdata {
|
||
|
|
color: var(--prism-comment);
|
||
|
|
font-style: var(--prism-comment-style);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.namespace {
|
||
|
|
color: var(--prism-namespace);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.interpolation {
|
||
|
|
color: var(--prism-interpolation);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.string {
|
||
|
|
color: var(--prism-string);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.punctuation {
|
||
|
|
color: var(--prism-punctuation);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.operator {
|
||
|
|
color: var(--prism-operator);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.keyword.module,
|
||
|
|
.token.keyword.control-flow {
|
||
|
|
color: var(--prism-keyword-control);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.url,
|
||
|
|
.token.symbol,
|
||
|
|
.token.inserted {
|
||
|
|
color: var(--prism-symbol);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.constant {
|
||
|
|
color: var(--prism-constant);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.string.url {
|
||
|
|
text-decoration: var(--prism-url-decoration);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.boolean,
|
||
|
|
.language-json .token.boolean {
|
||
|
|
color: var(--prism-boolean);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.number,
|
||
|
|
.language-json .token.number {
|
||
|
|
color: var(--prism-number);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.variable {
|
||
|
|
color: var(--prism-variable);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.keyword {
|
||
|
|
color: var(--prism-keyword);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.atrule,
|
||
|
|
.token.attr-value,
|
||
|
|
.token.selector {
|
||
|
|
color: var(--prism-selector);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.function {
|
||
|
|
color: var(--prism-function);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.deleted {
|
||
|
|
color: var(--prism-deleted);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.important,
|
||
|
|
.token.bold {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.italic {
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.class-name {
|
||
|
|
color: var(--prism-class);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.tag,
|
||
|
|
.token.builtin {
|
||
|
|
color: var(--prism-builtin);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.attr-name,
|
||
|
|
.token.property,
|
||
|
|
.token.entity {
|
||
|
|
color: var(--prism-property);
|
||
|
|
}
|
||
|
|
|
||
|
|
.language-json .token.property {
|
||
|
|
color: var(--prism-json-property);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.regex {
|
||
|
|
color: var(--prism-regex);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.decorator,
|
||
|
|
.token.annotation {
|
||
|
|
color: var(--prism-decorator);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* overrides color-values for the Line Numbers plugin
|
||
|
|
* http://prismjs.com/plugins/line-numbers/
|
||
|
|
*/
|
||
|
|
.line-numbers .line-numbers-rows {
|
||
|
|
border-right-color: var(--prism-line-number);
|
||
|
|
}
|
||
|
|
|
||
|
|
.line-numbers-rows > span:before {
|
||
|
|
color: var(--prism-line-number-gutter);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* overrides color-values for the Line Highlight plugin
|
||
|
|
* http://prismjs.com/plugins/line-highlight/
|
||
|
|
*/
|
||
|
|
.line-highlight {
|
||
|
|
background: var(--prism-line-highlight-background);
|
||
|
|
}
|