223015b: inline code syntax highlighting style parity

marp.config.js

@@ -0,0 +1,21 @@
+const { Marp } = require('@marp-team/marp-core');
+const hljs = require('highlight.js');
+
+module.exports = {
+  engine: (opts) => {
+    const marp = new Marp(opts);
+    const md = marp.markdown;
+    const defaultInline = md.renderer.rules.code_inline
+      || ((tokens, idx, options, env, self) => `<code>${md.utils.escapeHtml(tokens[idx].content)}</code>`);
+    md.renderer.rules.code_inline = (tokens, idx, options, env, self) => {
+      const content = tokens[idx].content;
+      try {
+        const highlighted = hljs.highlight(content, { language: 'html', ignoreIllegals: true }).value;
+        return `<code class="hljs language-html">${highlighted}</code>`;
+      } catch (e) {
+        return defaultInline(tokens, idx, options, env, self);
+      }
+    };
+    return marp;
+  }
+};

package.json

@@ -13,11 +13,18 @@
     "deploy": "make deploy",
     "test": "echo \"No tests specified\" && exit 0"
   },
-  "keywords": ["marp", "slides", "hdm", "lectures"],
+  "keywords": [
+    "marp",
+    "slides",
+    "hdm",
+    "lectures"
+  ],
   "author": "Michael Czechowski <mail@librete.ch>",
   "license": "CC-BY-SA-4.0",
   "type": "commonjs",
   "devDependencies": {
-    "@marp-team/marp-cli": "^4.2.3"
+    "@marp-team/marp-cli": "^4.2.3",
+    "@marp-team/marp-core": "^4.3.0",
+    "highlight.js": "^11.11.1"
   }
 }

scripts/dev-server.sh

@@ -41,4 +41,4 @@ echo -e "  ${BLUE}http://localhost:$DEV_PORT${NC}"
 echo -e "  ${BLUE}$SERVE_DIR/${NC}"
 echo ""
 
-PORT=$DEV_PORT exec npx @marp-team/marp-cli --server "$SERVE_DIR/"
+PORT=$DEV_PORT exec npx @marp-team/marp-cli -c marp.config.js --server "$SERVE_DIR/"

slides/223015b/00-intro.md

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }

slides/223015b/01-grundlagen-text-audio.md

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }

slides/223015b/02-bild-audio-video.md

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }

slides/223015b/03-speichermedien-schnittstellen.md

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }

slides/223015b/04-distribution-apis-zukunft.md

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }

slides/223015b/05-vertiefung-offene-fragen.md

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }

slides/223015b/klausurfolien.md

@@ -39,11 +39,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }

slides/223015c/01-geschichte-grundlagen-html.md

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #d63384;
+  background: #0f0f23;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #d63384 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }
@@ -1039,14 +1041,7 @@ CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-![bg fit](./assets/hex-dec-lookup-table.png)
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/8bit-P-character.png)
+![bg fit](./assets/demos/hex-dec-table.png)
 
 ---
 
@@ -1161,6 +1156,11 @@ Formattierungssprache
     
 ---
 
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #fce4ec -->
+
 # HTML-Anatomie (2/2)
 
 * Wir unterscheiden zwischen **umschließende** und **selbst-schließende** HTML-Tags
@@ -1283,7 +1283,7 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
 ![bg right:35%](./assets/demos/input-date.png)
 
 ```html
-<input type="" />
+Geburtsdatum <input type="date" />
 ```
 
 | Teil | Bezeichnung |
@@ -1520,7 +1520,7 @@ Accessibility ist eingebaut
 |---------|---------------|
 | **Maus** | Klicken, Scrollen |
 | **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
-| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
+| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, TalkBack, Orca) |
 | **Sprachsteuerung** | "Klicke auf Anmelden" |
 | **Augensteuerung** | Eye-Tracking |
 | **Switch-Geräte** | Ein-/Aus-Schalter |
@@ -1553,7 +1553,7 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
 
 # Web-Zugänglichkeit – Vertiefung
 
-**a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.
+Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.
 
 **Arten von Einschränkungen:**
 
@@ -1565,7 +1565,7 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
 | Kognitiv | Legasthenie | Müdigkeit | Ablenkung |
 
 **Assistive Technologien:**
-- **Screenreader:** NVDA (Windows, kostenlos), VoiceOver (Apple, integriert), JAWS (kommerziell)
+- **Screenreader:** NVDA & Narrator (Windows), VoiceOver (macOS/iOS), TalkBack (Android), Orca (Linux) – überwiegend builtin oder Open Source; JAWS (Windows) kommerziell
 - **Braillezeilen:** Taktile Ausgabe, ~40–80 Zeichen
 - **Switch-Geräte:** Ein-Knopf-Steuerung für motorische Einschränkungen
 - **Eye-Tracking:** Blicksteuerung für Bewegungsunfähige
@@ -1585,7 +1585,7 @@ Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`,
 - Digitale Inklusion
 
 **Praktisch:**
-- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
+- Bessere UX für **alle** (SEO, Mobile, ältere Menschen, temporäre Einschränkungen)
 - Größerer Markt (~15% der Bevölkerung)
 
 <!--
@@ -1637,9 +1637,13 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
 # WCAG: Der Standard
 
-**W**eb **C**ontent **A**ccessibility **G**uidelines
+<small>**W**eb **C**ontent **A**ccessibility **G**uidelines · Herausgeber: **W3C** / WAI · **WCAG 2.2** (Okt. 2023) verbindlich · WCAG 3 Working Draft (März 2026)</small>
 
 **4 Prinzipien (POUR):**
 
@@ -1650,6 +1654,8 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
 | **Understandable** | Verständlich – Inhalte müssen klar sein |
 | **Robust** | Robust – Funktioniert mit verschiedenen Technologien |
 
+**Konformitätslevel:** A · AA (gesetzlicher Standard) · AAA  <small>· [w3.org/WAI/WCAG22/quickref](https://www.w3.org/WAI/WCAG22/quickref/)</small>
+
 <!--
 WCAG vom W3C (World Wide Web Consortium)
 Aktuelle Version: WCAG 2.2 (2023)
@@ -1665,7 +1671,11 @@ Gesetzlich meist Level AA gefordert
 
 **Textalternativen für Nicht-Text:**
 ```html
-<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
+<img src="tankman.jpg"
+     alt="Ein Mann mit Einkaufstüten steht
+          allein vor einer Reihe Panzer –
+          Tiananmen-Platz, Peking,
+          5. Juni 1989">
 ```
 
 * **Kontrast:** Mindestens 4,5:1 für Text
@@ -1680,22 +1690,25 @@ Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
 # Operable: Bedienbar
 
 ![bg right:35%](./assets/demos/a11y-focus.png)
 
 **Tastaturzugänglich:**
 ```css
-/* Fokus-Indikator NIE entfernen! */
-:focus {
-    outline: 2px solid blue;
-    outline-offset: 2px;
+/* Fokus-Ring nur bei Tastatur-Navigation */
+button:focus-visible {
+  outline: 3px solid #d63384;
+  outline-offset: 3px;
+  border-radius: 4px;
 }
 
-/* Wenn custom styling: */
-button:focus-visible {
-    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
-}
+/* Anti-Pattern: Tastatur-Nutzer sind "blind" */
+button:focus { outline: none; }
 ```
 
 **Genügend Zeit:** Session-Timeouts ankündigen, Verlängerung ermöglichen

slides/223015c/assets/demos/a11y-focus.html

@@ -4,19 +4,17 @@
   <meta charset="UTF-8">
   <title>Fokus-Indikator</title>
   <style>
-    body { font-family: system-ui, sans-serif; padding: 1.2rem; }
-    :focus, .is-focused {
-      outline: 2px solid blue;
-      outline-offset: 2px;
-    }
+    body { font-family: system-ui, sans-serif; padding: 1.4rem; font-size: 1rem; }
+    button { font: inherit; padding: 10px 18px; margin: 8px 0; display: block; border: 1.5px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; }
     button:focus-visible, button.is-focused {
-      box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
+      outline: 3px solid #d63384;
+      outline-offset: 3px;
+      border-radius: 4px;
     }
-    button { font: inherit; padding: 6px 14px; margin: 6px 0; display: block; }
   </style>
 </head>
 <body>
-  <p>Tab-Taste drücken:</p>
+  <p><strong>Tab-Taste drücken:</strong></p>
   <button class="is-focused">Erster Button</button>
   <button>Zweiter Button</button>
   <button>Dritter Button</button>

slides/223015c/assets/demos/hex-dec-table.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Hex → Dezimal</title>
+<style>
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
+  body { padding: 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.6rem; color: #1a1a2e; }
+  .sub { text-align: center; color: #6b7280; margin-bottom: 18px; font-size: 0.95rem; }
+  table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
+  th, td { border: 1px solid #cbd5e1; padding: 7px 10px; text-align: center; font-size: 0.95rem; }
+  thead th { background: #1a1a2e; color: #fff; }
+  tbody th { background: #334155; color: #fff; font-weight: 600; }
+  tbody td.ascii { background: #f3f4f6; }
+  tbody td.nonascii { background: #fff; color: #6b7280; }
+  .corner { background: #0f0f23; color: #d63384; }
+  .legend { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 0.9rem; color: #374151; }
+  .sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #cbd5e1; vertical-align: middle; margin-right: 6px; }
+  .example { margin: 20px auto 0; max-width: 720px; padding: 14px 18px; background: #fef3f8; border-left: 4px solid #d63384; border-radius: 4px; font-size: 1rem; color: #1a1a2e; }
+  code { background: #1a1a2e; color: #d63384; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-weight: 700; }
+</style>
+</head>
+<body>
+  <h1>Hex → Dezimal</h1>
+  <div class="sub">Dezimalwert = (Zeile × 16) + Spalte</div>
+  <table>
+    <thead>
+      <tr>
+        <th class="corner">×16 / +</th>
+        <th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th>
+        <th>8</th><th>9</th><th>A <small style="opacity:.7;font-weight:400">(10)</small></th><th>B <small style="opacity:.7;font-weight:400">(11)</small></th><th>C <small style="opacity:.7;font-weight:400">(12)</small></th><th>D <small style="opacity:.7;font-weight:400">(13)</small></th><th>E <small style="opacity:.7;font-weight:400">(14)</small></th><th>F <small style="opacity:.7;font-weight:400">(15)</small></th>
+      </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+
+  <div class="legend">
+    <span><span class="sw" style="background:#f3f4f6"></span>ASCII (0–127)</span>
+    <span><span class="sw" style="background:#fff"></span>Non-ASCII (128–255)</span>
+  </div>
+
+  <div class="example">
+    <strong>Beispiel:</strong> <code>4D</code> → Zeile <code>4</code> × 16 + Spalte <code>D</code> = 64 + 13 = <strong>77</strong> (= "M" in ASCII)
+  </div>
+
+<script>
+  const rows = '0123456789ABCDEF';
+  const tb = document.querySelector('tbody');
+  for (let r = 0; r < 16; r++) {
+    const tr = document.createElement('tr');
+    const th = document.createElement('th');
+    th.innerHTML = r >= 10 ? rows[r] + ' <small style="opacity:.7;font-weight:400">('+r+')</small>' : rows[r];
+    tr.appendChild(th);
+    for (let c = 0; c < 16; c++) {
+      const td = document.createElement('td');
+      const v = r*16 + c;
+      td.textContent = v;
+      td.className = v <= 127 ? 'ascii' : 'nonascii';
+      tr.appendChild(td);
+    }
+    tb.appendChild(tr);
+  }
+</script>
+</body>
+</html>