make syntax highlighting nicer

This commit is contained in:
madrilene 2024-02-07 11:53:29 +01:00
parent f5ea5575da
commit 072f858772

View file

@ -1,7 +1,5 @@
code { code {
--color-code-red: var(--color-primary);
--color-code-orange: hsl(30, 70%, 60%); --color-code-orange: hsl(30, 70%, 60%);
--color-code-yellow: var(--color-terriary);
--color-code-blue: var(--color-secondary); --color-code-blue: var(--color-secondary);
--color-code-indigo: hsl(260, 48%, 56%); --color-code-indigo: hsl(260, 48%, 56%);
--color-code-violet: hsl(314, 70%, 60%); --color-code-violet: hsl(314, 70%, 60%);
@ -86,7 +84,7 @@ pre[class*='language-'] {
.language-css > code, .language-css > code,
.language-sass > code, .language-sass > code,
.language-scss > code { .language-scss > code {
color: var(--color-code-violet); color: var(--color-text);
} }
[class*='language-'] .namespace { [class*='language-'] .namespace {
@ -94,15 +92,15 @@ pre[class*='language-'] {
} }
.token.atrule { .token.atrule {
color: var(--color-code-red); color: var(--color-code-pink);
} }
.token.attr-name { .token.attr-name {
color: var(--color-code-yellow); color: var(--color-code-orange);
} }
.token.attr-value { .token.attr-value {
color: var(--color-code-blue); color: var(--color-text);
} }
.token.attribute { .token.attribute {
@ -110,11 +108,11 @@ pre[class*='language-'] {
} }
.token.boolean { .token.boolean {
color: var(--color-code-red); color: var(--color-code-pink);
} }
.token.builtin { .token.builtin {
color: var(--color-code-yellow); color: var(--color-code-orange);
} }
.token.cdata { .token.cdata {
@ -126,15 +124,15 @@ pre[class*='language-'] {
} }
.token.class { .token.class {
color: var(--color-code-yellow); color: var(--color-code-orange);
} }
.token.class-name { .token.class-name {
color: var(--color-code-yellow); color: var(--color-code-orange);
} }
.token.color { .token.color {
color: var(--color-code-yellow); color: var(--color-code-orange);
} }
.token.comment { .token.comment {
@ -142,7 +140,7 @@ pre[class*='language-'] {
} }
.token.constant { .token.constant {
color: var(--color-code-red); color: var(--color-code-pink);
} }
.token.deleted { .token.deleted {
@ -158,20 +156,20 @@ pre[class*='language-'] {
} }
.token.function { .token.function {
color: var(--color-code-red); color: var(--color-code-pink);
} }
.token.hexcode { .token.hexcode {
color: var(--color-code-yellow); color: var(--color-code-orange);
} }
.token.id { .token.id {
color: var(--color-code-red); color: var(--color-code-pink);
font-weight: bold; font-weight: bold;
} }
.token.important { .token.important {
color: var(--color-code-red); color: var(--color-code-pink);
font-weight: bold; font-weight: bold;
} }
@ -180,16 +178,16 @@ pre[class*='language-'] {
} }
.token.keyword { .token.keyword {
color: var(--color-code-red); color: var(--color-code-pink);
font-style: italic; font-style: italic;
} }
.token.number { .token.number {
color: var(--color-code-violet); color: var(--color-text);
} }
.token.operator { .token.operator {
color: var(--color-code-indigo); color: var(--color-code-gray);
} }
.token.prolog { .token.prolog {
@ -209,11 +207,11 @@ pre[class*='language-'] {
} }
.token.punctuation { .token.punctuation {
color: var(--color-code-indigo); color: var(--color-code-gray);
} }
.token.regex { .token.regex {
color: var(--color-code-yellow); color: var(--color-code-orange);
} }
.token.selector { .token.selector {
@ -221,11 +219,11 @@ pre[class*='language-'] {
} }
.token.string { .token.string {
color: var(--color-code-blue); color: var(--color-text);
} }
.token.symbol { .token.symbol {
color: var(--color-code-red); color: var(--color-code-pink);
} }
.token.tag { .token.tag {