Werkbank-Syntax · flooo.pro

Das Farbschema für die Codeblöcke auf dieser Seite — hier dokumentiert zum Mitnehmen. Es folgt drei Regeln:

Keine Rot-Grün-Achse. Die Palette arbeitet mit Blau (Keywords), Bernstein (Strings), Teal (Zahlen und Typen) und Violett (Funktionen) — Farben, die auch bei Rot-Grün-Schwäche auseinanderliegen.
Jede Tokenfarbe erreicht WCAG AA (mindestens 4,5:1) auf beiden Hintergründen. Das schaffen erstaunlich wenige verbreitete Schemata — Kommentare sind fast überall die ersten Opfer.
Bedeutung nie nur über Farbe. Keywords tragen zusätzlich Schriftgewicht, Kommentare Kursivschrift, Diffs ihre +/−-Präfixe; eingefügt ist Blau, entfernt Bernstein — nicht Grün und Rot.

Palette

Rolle	Hell	Dunkel	Kontrast (hell / dunkel)
Text & Operatoren	`#1C2127`	`#E8E6E1`	14.2 / 12.7
Keywords & Builtins	`#17549C`	`#7FB2EC`	6.6 / 7.1
Strings	`#8F4E00`	`#F0A64A`	5.7 / 7.7
Zahlen, Typen & Konstanten	`#0E5D66`	`#63CFC9`	6.6 / 8.5
Funktionen, Tags & Attribute	`#5B3E9E`	`#C7A6F2`	7.0 / 7.7
Kommentare (kursiv)	`#586069`	`#9AA4AE`	5.6 / 6.3
Diff eingefügt (Hintergrund)	`#DCE8F6`	`#1E3A5C`	13.1 / 9.3
Diff entfernt (Hintergrund)	`#F3E4D3`	`#4A3517`	13.0 / 9.3

Gemessen gegen die Code-Hintergründe #F1F0EB (hell) und #1D232B (dunkel).

Live-Beispiel

Rendert im Schema deines Betriebssystems — Hell/Dunkel wechselt mit:

// prune entfernt tote Endpoints nach dem Versand.
func (s *Store) prune(codes map[string]int) (n int, err error) {
	for ep, code := range codes {
		if code == 404 || code == 410 {
			delete(s.Subs, ep)
			n++
		}
	}
	return n, s.save()
}

# Karpenter NodePool — Spot zuerst, Fallback on-demand
spec:
  template:
    spec:
      requirements:
        - key: karpenter.sh/capacity-type
          operator: In
          values: ["spot", "on-demand"]
  limits:
    cpu: 64

Übernehmen

Eine CSS-Datei, keine Abhängigkeiten: werkbank-syntax.css. Die Klassen sind die von Chroma (Hugo mit noClasses = false) erzeugten und decken sich weitgehend mit Pygments. Der Dunkelmodus hängt an prefers-color-scheme; die Hintergrundfarben der Codeblöcke bringt dein eigenes Layout mit.

Lizenz: CC0 1.0 — nimm es, bau damit, was du willst. Ein Link zurück freut mich, nötig ist er nicht.

/* Werkbank Syntax — Chroma/Pygments-Farbschema von flooo.pro
   Blau = Keywords · Bernstein = Strings · Teal = Zahlen/Typen · Violett = Funktionen
   Jede Tokenfarbe >= 4.5:1 (WCAG AA) auf #F1F0EB (hell) bzw. #1D232B (dunkel),
   ohne Rot/Grün-Achse. Diff: Blau (+) / Bernstein (-), Bedeutung nie nur über Farbe.
   https://flooo.pro/werkbank-syntax/ · Lizenz: CC0 1.0 */

:root {
  --syn-fg: #1C2127;
  --syn-kw: #17549C;
  --syn-str: #8F4E00;
  --syn-num: #0E5D66;
  --syn-fn: #5B3E9E;
  --syn-com: #586069;
  --syn-ins-bg: #DCE8F6;
  --syn-del-bg: #F3E4D3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --syn-fg: #E8E6E1;
    --syn-kw: #7FB2EC;
    --syn-str: #F0A64A;
    --syn-num: #63CFC9;
    --syn-fn: #C7A6F2;
    --syn-com: #9AA4AE;
    --syn-ins-bg: #1E3A5C;
    --syn-del-bg: #4A3517;
  }
}

.chroma { color: var(--syn-fg); background: transparent; }
/* Keywords & Builtins */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp,
.chroma .kr, .chroma .nb, .chroma .bp { color: var(--syn-kw); font-weight: 600; }
/* Typen & Klassen */
.chroma .kt, .chroma .nc, .chroma .nn { color: var(--syn-num); }
/* Funktionen, Dekoratoren, Tags, Attribute */
.chroma .nf, .chroma .fm, .chroma .nd, .chroma .nt, .chroma .na { color: var(--syn-fn); }
/* Strings */
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc,
.chroma .sd, .chroma .dl, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx,
.chroma .sr { color: var(--syn-str); }
/* Zahlen & Konstanten */
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi,
.chroma .mo, .chroma .il, .chroma .no { color: var(--syn-num); }
/* Kommentare */
.chroma .c, .chroma .c1, .chroma .cm, .chroma .ch, .chroma .cs,
.chroma .cp, .chroma .cpf { color: var(--syn-com); font-style: italic; }
/* Operatoren, Interpunktion, sonstige Namen: Grundfarbe */
.chroma .o, .chroma .ow { color: var(--syn-fg); }
.chroma .p, .chroma .n, .chroma .nx, .chroma .nv, .chroma .vi,
.chroma .vc, .chroma .vg { color: var(--syn-fg); }
/* Diff: Blau eingefügt, Bernstein entfernt (nie Grün/Rot) */
.chroma .gi { color: var(--syn-kw); background: var(--syn-ins-bg); }
.chroma .gd { color: var(--syn-str); background: var(--syn-del-bg); }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: 700; }
/* Fehler-Token: nicht rot einfärben, nur markieren */
.chroma .err { color: var(--syn-fg); border-bottom: 2px dotted var(--syn-str); }
/* Zeilen-Hervorhebung (hl_lines) und Zeilennummern */
.chroma .hl { background: var(--syn-ins-bg); display: block; }
.chroma .lnt, .chroma .ln { color: var(--syn-com); margin-right: 0.7em; }