| name | amvcp-code-syntax |
| description | Syntax-highlight surface — dependency-free tokenizer, 12-token palette, gutter, copy, light + dark themes. Use when scaffolding a syntax-highlighted code block, configuring tokenizer / language detection, defining `--ve-code-*` theme tokens, or debugging gutter / copy / selection chrome. Trigger with 'syntax highlight', 'code block', 'tokenizer', 'line numbers', 'copy code button', 'gutter', 'token palette', 'language detect'. |
| license | MIT |
| compatibility | Any modern browser supporting CSS `:has()` (Chromium 105+, Safari 15.4+, Firefox 121+). Pure JS, no npm runtime dependency. Requires `scripts/amvcp-designmd.js` (token engine) + `scripts/amvcp-runtime.js` (gutter + selection chrome) + `scripts/amvcp-code-highlight.js` (tokenizer) + `scripts/amvcp-code-highlight.css` (12-token palette). |
| metadata | {"author":"Emasoft"} |
Code Syntax
Parent umbrella: skills/amvcp-visual-communication/SKILL.md — load the umbrella first to route between category skills.
Router: skills/amvcp-code-highlight/SKILL.md — load the router to choose between code-syntax, code-diff, code-snippets, code-fences.
Substrate sub-skills: amvcp-code-syntax-engine (tokenizer + gutter + selection) · amvcp-code-syntax-chrome (visual chrome + inline hand-wrap).
Sibling code skills: amvcp-code-diff · amvcp-code-snippets · amvcp-code-fences.
Overview
Umbrella for the code-display substrate — how a <pre><code> becomes a
highlighted, gutter-decorated, copy-able, selectable, theme-coherent block.
The substrate is split into two focused sub-skills (route via the table
below); this umbrella holds only the shared troubleshooting + examples.
- amvcp-code-syntax-engine — the
dependency-free 7-language tokenizer, the 12-token
--ve-code-* palette,
the per-line .ve-code-line gutter atom, the copy button, the drag-paint
selection model (9-level ladder), the byte-fidelity integrity probe.
- amvcp-code-syntax-chrome — the
block 3-state model, blueprint theme, slate-bg panel, file-path / tab-bar
headers, inline
<code> chip, 4-class hand-wrap palette, keyword-arrow
highlight, author-vs-runtime + light/dark discipline.
Does NOT own diff blocks (→ amvcp-code-diff), multi-perspective
compositions (→ amvcp-code-snippets), data fences (→ amvcp-code-fences),
or the palette definition (→ amvcp-design-tokens; the substrate
consumes --ve-code-*).
Routing table
| User says / job | Load this sub-skill |
|---|
| "tokenizer", "language detect", "line numbers", "copy button", "gutter", "selection on code lines", "integrity probe", "token roles" | amvcp-code-syntax-engine — tokenizer + gutter + selection. Load FIRST for any code surface. |
| "block hover/select states", "blueprint theme", "slate-bg panel", "file-path header", "tab-bar header", "inline code chip", "hand-wrap palette", "keyword highlight in a line", "author-vs-runtime boundary", "light/dark mirror for code tokens" | amvcp-code-syntax-chrome — visual chrome + inline hand-wrap. |
Most code surfaces load both: the engine produces the tokenized,
gutter-decorated, selectable block; the chrome styles its container.
Prerequisites
Modern browser; no npm/WASM/build step. Load in order: DESIGN.md engine
(scripts/amvcp-designmd.js, live re-theme), then the runtime
(scripts/amvcp-runtime.js, owns .ve-code-block chrome), then the
tokenizer + CSS (scripts/amvcp-code-highlight.js +
scripts/amvcp-code-highlight.css).
Instructions
Author semantic HTML only; the runtime + tokenizer build the rest.
This umbrella routes; the step-level detail lives in the two sub-skills.
- Identify what you need from the routing table above — tokenizer / gutter / selection (engine) vs container chrome / inline hand-wrap (chrome).
- Load amvcp-code-syntax-engine FIRST — it owns the
<pre><code class="language-<id> ve-code-block"> markup contract, language resolution, the integrity probe, mandatory wrap, line selection, and the 12 token roles.
- Load amvcp-code-syntax-chrome if your block needs a styled container (3-state, blueprint, slate-bg), a header (file-path / tab-bar), an inline chip / hand-wrap, or the light/dark mirror discipline.
- Follow each loaded sub-skill's checklist, then verify in BOTH themes.
Checklist: ☐ engine sub-skill loaded as substrate ☐ chrome sub-skill loaded
if container styling needed ☐ semantic language-<id> markup ☐ no
hand-injected ve-tok-* ☐ no overflow-x:auto ☐ both :root token mirrors
present ☐ screenshot-tested light + dark.
Output
A self-contained HTML page where every code surface is a token-themed,
selectable, copy-able, no-inner-scrollbar block; a DESIGN.md token swap
re-themes every color and chrome detail. Authors write semantic HTML only.
Error Handling
Symptom → fix table → troubleshooting (its
full TOC is embedded in the Resources index below).
Examples
Authoring snippets (basic highlight · file-path header · inline chip)
→ examples (full TOC in the Resources index below).
Visual verification
Screenshot-test EVERY technique in BOTH light + dark themes (single-theme =
defect). Loop → ../amvcp-self-debug-rules/SKILL.md
(dev-browser → JPEG-97 → side-by-side). Verify tokens differentiated, lines
byte-match source, chrome reads on both themes.
Modes
data-ve-mode="readonly" only. Lines are selectable for comment (each
carries data-ve-comment-id), but the per-line 3-state decision pill
(R20-R23 of amvcp-self-debug-rules) does NOT apply — code is for
explanation/review, not multiple-choice.
Composability
Composes with every amvcp-* skill on the same page (R22); multiple code
blocks coexist independently. The only exclusive skill is the
overlay-runtime (R24).
Resources
The substrate's technique references live in the two sub-skills — route
to them via the Routing table above:
- amvcp-code-syntax-engine — tokenizer-contract, token-roles-palette, gutter-anatomy, wrap-and-no-inner-scroll, copy-button, code-atom-selection, language-resolution, integrity-probe (8 references with complete embedded TOCs).
- amvcp-code-syntax-chrome — block-3-state-model, blueprint-theme, slate-bg-code-panel, code-block-with-file-path, code-block-with-tab-bar, inline-4class-handwrap, inline-code-chip, keyword-arrow-highlight, author-vs-runtime-boundary, light-dark-mirror-discipline (10 references with complete embedded TOCs).
This umbrella holds only the shared troubleshooting + examples below.
Each carries its OWN complete ## Table of Contents; the embedded title
list mirrors it verbatim (per the never-shrink-a-TOC rule).
-
troubleshooting — the symptom → fix table.
Complete TOC of troubleshooting.md:
-
examples — basic highlight · file-path header · inline chip authoring snippets.
Complete TOC of examples.md:
- Example 1 — basic syntax highlight
- Example 2 — code block with a file-path header
- Example 3 — inline code chip in prose
