preview-mode-syntax-highlighting.css

preview-mode-syntax-highlighting.css

:root {
  /* material: palenight theme */
  --cm-font-weight: 500;
  --cm-font-size: var(--editor-font-size);
  --cm-font-monospace: Jetbrains Mono, SFMono-Regular, Consolas, "Roboto Mono", monospace;
  --cm-wrap-lines: pre-wrap;
  --cm-line-height: 1.5;
  --cm-keyword: #c792ea;
  --cm-atom: #f78c6c;
  --cm-number: #ff5370;
  --cm-type: #decb6b;
  --cm-def: #82aaff;
  --cm-property: #c792ea;
  --cm-variable: #f07178;
  --cm-variable-2: #eeffff;
  --cm-variable-3: #f07178;
  --cm-definition: #82aaff;
  --cm-callee: #89ddff;
  --cm-qualifier: #decb6b;
  --cm-operator: #89ddff;
  --cm-hr: #98e342;
  --cm-link: #696d70;
  --cm-error-bg: #ff5370;
  --cm-header: #da7dae;
  --cm-builtin: #ffcb6b;
  --cm-meta: #ffcb6b;
  --cm-matching-bracket: #ffffff;
  --cm-tag: #ff5370;
  --cm-tag-in-comment: #ff5370;
  --cm-string-2: #f07178;
  --cm-bracket: #ff5370;
  --cm-comment: #676e95;
  --cm-string: #c3e88d;
  --cm-attribute: #c792ea;
  --cm-attribute-in-comment: #c792ea;
  --cm-background-color: #292d3e;
  --cm-active-line-background-color: #353a50;
  --cm-foreground-color: #d4d4d4;
}

/* FALL BACK CODE BLOCK PREVIEW MODE SYNTAX HIGHLIGHTING */

body[class*="theme-"] .markdown-preview-view pre[class*="language-"] {
  /* material: palenight theme */
  background-color: var(--cm-background-color);
}

body[class*="theme-"] .markdown-preview-view code[class*="language-"] {
  --font-monospace: var(--cm-font-monospace);
  color: var(--cm-foreground-color);
  font-family: var(--cm-font-monospace);
  font-weight: var(--cm-font-weight);
  line-height: var(--cm-line-height);
  font-size: var(--cm-font-size);
  white-space: var(--cm-wrap-lines);
}

body[class*="theme-"] .markdown-preview-view pre code,
body[class*="theme-"] .markdown-preview-view pre code * {
  text-shadow: none;
  color: var(--cm-foreground-color);
}

body[class*="theme-"] .markdown-preview-view pre code span.keyword {
  color: var(--cm-keyword);
}

body[class*="theme-"] .markdown-preview-view pre code span.class-name {
  color: var(--cm-def);
}

body[class*="theme-"] .markdown-preview-view pre code span.class {
  color: var(--cm-qualifier);
}

body[class*="theme-"] .markdown-preview-view pre code span.function {
  color: var(--cm-def);
}

body[class*="theme-"] .markdown-preview-view pre code span.punctuation {
  color: var(--cm-foreground-color);
}

body[class*="theme-"] .markdown-preview-view pre code span.operator {
  color: var(--cm-operator);
  background: transparent;
}

body[class*="theme-"] .markdown-preview-view pre code span.entity {
  color: var(--cm-attribute);
}

body[class*="theme-"] .markdown-preview-view pre code span.parameter {
  color: var(--cm-property);
}

body[class*="theme-"] .markdown-preview-view pre code span.property {
  color: var(--cm-property);
}

body[class*="theme-"] .markdown-preview-view pre code span.important {
  color: var(--cm-error-bg);
}

body[class*="theme-"] .markdown-preview-view pre code span.attr-name,
body[class*="theme-"] .markdown-preview-view pre code span.tag {
  color: var(--cm-tag);
}

body[class*="theme-"] .markdown-preview-view pre code span.attr-value {
  color: var(--cm-string);
}

body[class*="theme-"] .markdown-preview-view pre code span.builtin {
  color: var(--cm-builtin);
}

body[class*="theme-"] .markdown-preview-view pre code span.string {
  color: var(--cm-string);
}

body[class*="theme-"] .markdown-preview-view pre code span.number {
  color: var(--cm-number);
}

body[class*="theme-"] .markdown-preview-view pre code span.unit {
  color: var(--cm-number);
}