Skip to content

Viewer: style non-table markdown in exhibit bodies (headings, lists, blockquotes, code) #46

Description

@EYH0602

Background

Issue #32 shipped client-side markdown rendering for exhibit bodies. The
renderer (crates/ara-viewer/src/markdown.rs, render_exhibit_body) runs
pulldown-cmark, which parses all of CommonMark plus the tables and
strikethrough extensions. So an exhibit body can legitimately render headings
(# …), lists, blockquotes (> …), inline code, code blocks, <strong>,
<em>, horizontal rules, links, and images — not just tables.

Problem

Rendering ≠ styling. The CSS added in #32 (crates/ara-viewer/public/styles.css)
only styles two things inside .exhibit-body:

  • .exhibit-body table / th / td — the data-table look (borders, padding,
    header shading).
  • .exhibit-body { overflow-x: auto; max-width: 100% } — the scroll container.

Every other rendered element (h1h6, blockquote, ul/ol/li, code,
pre, hr, strong/em, a) falls back to default/inherited browser styling.
Inline emphasis (bold/italic) and paragraphs look fine because they inherit the
body type, but headings, blockquotes, lists, and code blocks render unstyled
and won't match the viewer's design language.

Why it's currently low-impact

The corpus today is "captions + prose + tables" (per docs/hub-parity.md), so
exhibit bodies are mostly paragraphs, bold/italic, and tables — all already
covered. This only bites once exhibits start using headings, blockquotes, lists,
or fenced code.

Proposed fix

Add baseline .exhibit-body-scoped rules for the non-table elements, reusing the
existing design tokens (--ink, --muted, --line, --panel2, the mono font
already used by pre.diff / .recipe-body). Roughly:

  • .exhibit-body h1..h6 — size/weight scale consistent with .detail-title.
  • .exhibit-body blockquote — left border + muted text.
  • .exhibit-body ul/ol — indentation, marker spacing.
  • .exhibit-body code (inline) and .exhibit-body pre — mono font + --panel2
    background, mirroring pre.diff (styles.css:1179-1190).
  • .exhibit-body a — link color + hover.
  • .exhibit-body hr--line rule.

Acceptance

Refs

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions