HTML, CEM-ML, and CSS syntax coloring

This decision page puts HTML event/markup-token families, CEM-ML tokenizer families, and CSS lexical and grammar-owned semantic contexts on one palette. It is intentionally broad: use it when changing role assignments, theme mappings, or contrast.

Contrast light and contrast dark are included because they are public CEM theme modes. Today syntax colors intentionally share the corresponding light/dark emotional endpoints; keeping them here exposes any future mode remapping. Operating-system forced colors remain a separate browser setting.

Variable-like identifiers and attributes receive the strongest scan color, --cem-action-destructive-pending-background. Tag names receive the next emphasis level from --cem-action-primary-active-background, while keywords use --cem-action-primary-pending-background and strings use --cem-action-contextual-pending-background. Invalid source and error diagnostics use --cem-action-destructive-hover-background.

CSS property keys use an IDE-inspired red/light-blue pair; ordinary values use blue/peach. CSS functions use a gold pair. These colors remain explicit when no close CEM emotional token exists.

The rendered source uses native elements as its compact visual vocabulary:  for tags, <var> for attributes and variables, <dfn> for CSS properties, <data> for CSS values, <kbd> for CSS functions,  for keywords,  for strings,  for numbers,  for comments, <samp> for source text, and  for errors. Only the enclosing <code> carries classes; punctuation and raw source remain unwrapped.

Source model coverage

HTML events: Doctype, StartElement, EndElement, Text, RawText, Rcdata, and Comment
HTML markup tokens: Delimiter, ElementName, Whitespace, AttributeName, Equals, Quote, AttributeValue, Keyword, and Raw
CEM-ML tokenizer: NodeStart, NodeEnd, Attribute, Text, Trivia, Comment, ProcessingInstruction, ExpressionNode, AnonymousScopeStart, Directive, RichContent, and Error
CSS lossless events: AtKeyword, Ident, Hash, IDHash, String, Url, Number, Percentage, Dimension, Comment, Function, BlockOpen, BlockClose, and Trivia
CSS semantic contexts: Selector, Property, CustomProperty, Value, and Function

Semantic role mapping

Formatter role	Specimen	CEM emotional source
`syntax.punctuation`	`< > / = " ' { } @ \|`	`--cem-palette-conservative-x`, subdued
`syntax.name`	`article section`	`--cem-action-primary-active-background`
`syntax.attribute`	`$variable class data-state`	`--cem-action-destructive-pending-background`
`syntax.property`	`color inline-size`	IDE-inspired red/light-blue pair
`syntax.value`	`grid rebeccapurple #312e81`	IDE-inspired blue/peach pair
`syntax.function`	`var( calc( color-mix(`	IDE-inspired gold pair
`syntax.string`	`hero / {.ready}`	`--cem-action-contextual-pending-background`
`syntax.number`	`32 1.5`	`--cem-palette-creativity-x`; generic formatter role (HTML/CEM-ML attribute values are strings)
`syntax.keyword`	`DOCTYPE @doc`	`--cem-action-primary-pending-background`
`syntax.comment`	`<!-- note --> // note`	`--cem-palette-calm-x`, subdued
`syntax.text`	`Rendered text`	`--cem-palette-comfort-text`
`syntax.raw`	`spaces and unclassified source`	`--cem-palette-conservative-x`, subdued
`diagnostic.error`	`invalid source and error diagnostics`	`--cem-action-destructive-hover-background`

HTML AST surface

Covers doctype, comment, start/end elements, text, raw text, RCDATA, foreign content, void/self-closing syntax, boolean, quoted and unquoted attributes, equals signs, quotes, and source whitespace. Open the source specimen.

HTML recovery surface

Exercises browser recovery boundaries without changing the authored bytes shown by the formatter. Open the recovery specimen.

CEM-ML AST surface

Covers directives, line/block comments, named and anonymous nodes, attributes with every value form, trivia/content boundaries, text, expression nodes, processing instructions, rich content, and closes. Open the source specimen.

CEM-ML error surface

Keeps the tokenizer error path visible beside valid syntax. Open the error specimen.

CSS AST surface

Covers selectors, at-rules, declaration properties, custom-property definitions and references, identifiers, hashes, strings, numeric forms, functions, URLs, selector operators, nesting, and blocks. Open the source specimen.