Highlighted Text

Inline passage of text with a coloured highlight background and an optional margin annotation note. The annotation appears as a side-note pill on hover (CSS :hover) or as a visible aside on smaller viewports. Useful for reading comprehension exercises, exam technique callouts, and annotated source analysis.

Surfaces
webmeet-stagepdfapps-script-web
Degraded on
SurfaceNote
googlechatHighlight background stripped — renders as plain text with annotation appended in brackets
emailHover annotation not supported — annotation rendered as inline parenthetical
Fields
FieldType
textstring. The passage to highlight.required
annotationstring. Margin note revealed on hover.optional
colorstring. Highlight background colour. Default "#fef08a" (yellow).optional
annotation_colorstring. Annotation pill background. Default "#fbbf24".optional
Example payload
{
  "type": "highlighted_text",
  "text": "A concise description of the content."
}
ARD catalog entry
{
  "identifier": "urn:air:a2uicatalog.ai:atom:highlighted_text",
  "displayName": "Highlighted Text",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/highlighted_text",
  "capabilities": [
    "web",
    "meet-stage",
    "pdf",
    "apps-script-web"
  ],
  "description": "Inline passage of text with a coloured highlight background and an optional margin annotation note. The annotation appears as a side-note pill on hover (CSS :hover) or as a visible aside on smaller viewports. Useful for reading comprehension exercises, exam technique callouts, and annotated source analysis.",
  "representativeQueries": [
    "show a highlighted text passage with optional hover margin annotation note",
    "inline passage of text with a coloured highlight background and an optional margin annotation note.",
    "render a highlighted text"
  ]
}
← Full ARD catalog Try it live →
Deploy your own renderer

The renderer is open source. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.

git clone https://github.com/a2uicatalog/a2ui
cd apps-script-surface/gas-schema-renderer
clasp push && clasp deploy
Full deploy guide →