Renderer capabilities¶

This internal fixture exercises the authoring features enabled for the design system. It is deliberately outside the site navigation.

Annotations¶

Annotation proof¶

Annotations can be nested inside Markdown-aware blocks. (1)

The annotation body can contain formatted text and a nested marker. (2)
1. This is the nested annotation.

Formatting proof¶

The same specimen exercises strong text, nested structure, and inline code without adding a second renderer path.

List proof¶

The numbered annotation bodies above exercise the configured list renderer.

Code actions¶

Code-block proof¶

renderer.yml

theme:
  name: materialx
  code:
    fold:
      enabled: true # (1)!

Code annotations can explain a line without cluttering the example.

The canonical include marker is --8<-- "includes/renderer-snippet.md".

This sentence is supplied by the local, tracked snippets contract.

Copy-action proof¶

The rendered code block exposes the configured copy action.

Selection-action proof¶

The rendered code block exposes the configured selection action.

Download-action proof¶

The data-download="blob" attribute exercises the configured download action.

Folding proof¶

The data-fold="3" attribute exercises the configured fold action.

Code-annotation proof¶

The numbered marker in the YAML comment exercises code annotations.

Snippet proof¶

The tracked include above exercises the configured snippets extension.

Authored-button proof¶

Renderer action

Linked tabs¶

Content-tabs proof¶

SourceResult

The selected tab is linked across tab groups.

The rendered result stays selected.

Footnotes and glossary tooltips¶

Footnote proof¶

The DOM tooltip comes from the tracked glossary.¹

Emoji¶

Icon-and-emoji proof¶

MaterialX emits this icon as inline SVG.

Diagrams¶

Diagram proof¶

Flowchart proof¶

flowchart LR
  Markdown --> HTML

Mathematics¶

Mathematics proof¶

Block-math proof¶

\[ a^2 + b^2 = c^2 \]

Inline-math proof¶

The inline expression \(a^2 + b^2 = c^2\) is typeset by MathJax.

Image proof¶

FontLab renderer specimen — A captioned image opens in the existing GLightbox renderer.

Footnote tooltips keep short notes in the reader's context. ↩