js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Abstract Code Highlighter Syntax Coloring (#1647)

Browse Source 
* abstracting syntax coloring in code-highlighter.css

* adding initial custom properties to override colors
* light re-grouping of rules + color application

* fixup! removing `wa-` prefix
This commit is contained in:
Brian Talbot
2025-10-24 08:22:35 -04:00
committed by GitHub
parent 3612f72a3f
commit 1bfebe36a3
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/webawesome/docs/assets/styles/code-highlighter.css
View File

@@ -2,22 +2,25 @@
pre[id*='code-block-'] {
color-scheme: dark;
color: white;
background-color: var(--wa-color-neutral-20);
background-color: var(--code-background, var(--wa-color-neutral-20));
/* Ensures a discernible background color in dark mode
* Useful for themes that use gray-20 as --wa-color-surface-default */
.wa-dark & {
background-color: var(--wa-color-surface-lowered);
background-color: var(--code-background-dark, var(--wa-color-surface-lowered));
}
}
.code-comment,
.code-prolog,
.code-doctype,
.code-cdata,
.code-cdata {
color: var(--code-comment, var(--wa-color-gray-70));
}
.code-operator,
.code-punctuation {
color: var(--wa-color-gray-70);
color: var(--code-operator, var(--wa-color-gray-70));
}
.code-namespace {
@@ -28,24 +31,27 @@ pre[id*='code-block-'] {
.code-keyword,
.code-tag,
.code-url {
color: var(--wa-color-indigo-70);
color: var(--code-keyword, var(--wa-color-indigo-70));
}
.code-symbol,
.code-deleted,
.code-important {
color: var(--wa-color-red-70);
color: var(--code-error, var(--wa-color-red-70));
}
.code-string,
.code-char,
.code-constant {
color: var(--code-string, var(--wa-color-green-70));
}
.code-boolean,
.code-constant,
.code-selector,
.code-attr-name,
.code-string,
.code-char,
.code-builtin,
.code-inserted {
color: var(--wa-color-green-70);
color: var(--code-literal, var(--wa-color-green-70));
}
.code-atrule,
@@ -55,7 +61,7 @@ pre[id*='code-block-'] {
.code-function,
.code-class-name,
.code-regex {
color: var(--wa-color-blue-70);
color: var(--code-value, var(--wa-color-blue-70));
}
.code-important,