compare-code — Lattice component
Lattice

compare-code

ComparisonSplitStructure

Two fenced code blocks side-by-side, each with a label.

Open in Playground

Use to contrast a before/after refactor, two API styles, or two configurations. Each side gets an h3 label and one fenced block.

snippetcontrasttradeoff

When to use

  • Concrete code on both sides. Both sides hold short, readable snippets — refactor before/after, two API styles, two configurations. The diff is the point of the slide.
  • Equal-length snippets. Snippets render side-by-side. Wildly different lengths break the visual balance — trim aggressively or split into two slides.
  • Names the change. The inline-code label on each side names what the reader is looking at (` Before , After , v1 , v2 `). Without labels the audience has to infer.

When not to use

  • One side is prose. If one column is code and the other is description, use a single fenced block with surrounding prose. compare-code is for code-versus-code.
  • Snippets longer than 14 lines. The text shrinks below readability past 14 lines per side. Split into two slides or extract the key delta into a smaller diff.
  • Three-way comparison. compare-code is binary. For three configurations or three implementations, use prose with successive fenced blocks or a compare-table.
  • Lines wider than the pane. A landscape half-pane fits about 57 characters and does not wrap, so a longer line is clipped. Trim it, or use a full-width code slide.

Common mistakes

  • Using a markdown heading (### Before) for a column label instead of an inline-code paragraph. The transform splits columns on <p><code> boundaries only — a heading isn't recognized at all, so both fenced blocks collapse into one lopsided column instead of two. Label each side with a backtick-wrapped paragraph (` Before `), matching the sample.
  • Omitting the second column's label. The split happens at each label boundary — a missing second label leaves the second fenced block trailing inside the first column instead of starting a new one. Every side needs its own inline-code label.
  • Letting a fenced line run past the pane width. It is clipped, not wrapped — the tail is cut at the pane edge. Keep fenced lines under ~55 characters so each source line renders whole and lines up with its counterpart across the gutter. Portrait and square decks DO wrap instead, because they stack the panes into one column where there is no pairing to preserve.

Authoring

<!-- _class: compare-code -->

## Heading framing the comparison.

`Before`

```js
function before() {
  return 'old';
}
```

`After`

```js
function after() {
  return 'new';
}
```

Slots

SlotSelectorRequiredDescription
titleh2yesSlide heading framing the comparison.
leftp:has(> code:only-child):first-of-type + preyesLeft label (an inline-code-only paragraph, e.g. ` Before `) and the code block right after it.
rightp:has(> code:only-child):nth-of-type(2) + preyesRight label (an inline-code-only paragraph, e.g. ` After `) and the code block right after it.

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│  Code comparison heading.               │
│                                         │
│  ┌──────────────┐     ┌──────────────┐  │
│  │ // before    │     │ // after     │  │
│  │ foo();       │     │ bar();       │  │
│  │ baz();       │     │ qux();       │  │
│  └──────────────┘     └──────────────┘  │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Related