Code walkthrough

Recorded in Legend Slides for macOS (release build).

Install in Slides Open example Download example

Requires a Legend Slides build with effect installation support. Installs the presenting pack (1.0.5, 22 KB source) and its dependencies. macOS host capabilities: reanimated, skia. Installed decks work offline.

Use it in a deck

code-walkthrough.mdx

---
title: Code walkthrough
---

import { View, Text } from "react-native";
import { CodeWalkthrough } from "slides:presenting/CodeWalkthrough";

export const code = `async function showResults(query) {
  const rows = await search(query);
  const visible = rows.slice(0, 20);
  setResults(visible);
  announce(visible.length);
}`;
export const highlights = [2, 3, 4];
export const notes = ["Fetch matching rows", "Keep the visible rows", "Publish the results"];

# Code walkthrough

<View style={{ width: 1696, height: 650 }}>
<Steps count={3}>{step => <CodeWalkthrough source={code} lines={[highlights[step], highlights[step]]} fontSize={34} explanation={<Text style={{ color: "white", fontSize: 52 }}>{notes[step]}</Text>} />}</Steps>
</View>

Configure

source: Source text to display.
lines: One-based selected lines.
explanation: Content beside the code.
fontSize: Set code text size; defaults to 25.

Only imported effects enter the compiled deck. Installation and versioning →

Code walkthrough

Use it in a deck

Configure

More in the presenting pack

Progressive detail

Comparison wipe

Content swap