Skip to content

Illuminate Documentation

Illuminate

Home

CH.Slideshow

Learn how to use the experimental CH.Slideshow component from Code Hike in your documentation to create interactive code blocks that are displayed as a slideshow.

src/App.js

import { motion } from "framer-motion";
const transition = { duration: 1 };
export default function App() {
const bg = "hsl(20, 100%, 50%)";
return <div className="container"> </div>;
}

Slideshows present code and corresponding text in a vertically stacked format.

Note

This component is best viewed on larger screens, such as a desktop.

Overview

<CH.Slideshow> is used to wrap text and code into separate slides with buttons to navigate between slides. A CodeSandbox can be linked to the slideshow to add a live preview that updates to match the code in the current slide.

Caution

CH.Slideshow is currently still an experimental feature in Code Hike. Refer to Code Hike's website for more information.

Properties

NameTypeDescription
lineNumbers (optional)booleanOption to show line numbers for each row of code. The default is false.
preset (optional)urlOption to link to a Code Sandbox project if you would like to include a preview with the code.
rowsinteger or focusOption to set a custom height for the code block based on either a specified number of rows or focus annotation.
showCopyButton (optional)booleanOption to show copy button on the code block. The default is true

Examples

Tip

To display code blocks as tabs or panels within CH.Scrollycoding, wrap code blocks in a CH.Code component. Refer to CH.Code for detailed instructions and examples.

Simple slideshow

src/App.js

import { motion } from "framer-motion";
const transition = { duration: 1 };
export default function App() {
const bg = "hsl(20, 100%, 50%)";
return <div className="container"> </div>;
}

Wrap all text and code blocks with the CH.Slideshow component. Separate sections with a divider (---) between each step.

simple-slideshow.mdx

<CH.Slideshow>
Wrap all text and code blocks with the `CH.Slideshow` component. Separate
sections with a divider (`---`) between each step.
```jsx src/App.js
import { motion } from "framer-motion";
const transition = { duration: 1 };
export default function App() {
const bg = "hsl(20, 100%, 50%)";
return <div className="container"> </div>;
}
```
---
To focus on a specific piece of code for a section, add focus settings to the
corresponding code block.
```jsx src/App.js focus=1,6,9:15
import { motion } from "framer-motion";
const transition = { duration: 1 };
export default function App() {
const bg = "hsl(110, 100%, 50%)";
return (
<div className="container">
<motion.div
className="swatch"
animate={{
backgroundColor: bg,
}}
transition={transition}
/>
</div>
);
}
```
---
To add or remove code from the previous code block, put the complete new code in
the next code block.
```jsx src/App.js focus=1,6,9:15
import { motion } from "framer-motion";
const transition = { duration: 1 };
export default function App() {
const bg = "hsl(200, 100%, 50%)";
return (
<div className="container">
<motion.div
className="swatch"
animate={{
backgroundColor: bg,
}}
transition={transition}
/>
</div>
);
}
```
---
The differences between the two code blocks will be detected and animated
automatically when the reader navigates to the next slide.
```jsx src/App.js focus=1,6,9:15
import { motion } from "framer-motion";
const transition = { duration: 1 };
export default function App() {
const bg = "hsl(290, 100%, 50%)";
return (
<div className="container">
<motion.div
className="swatch"
animate={{
backgroundColor: bg,
}}
transition={transition}
/>
</div>
);
}
```
</CH.Slideshow>

Slideshow with preview

Here is an example of a slideshow that pairs text and a CodeSandbox preview with the code:

src/App.js

import { motion } from "framer-motion";
const transition = { duration: 1 };
export default function App() {
const bg = "hsl(20, 100%, 50%)";
return (
<div className="container">
<motion.div
className="swatch"
animate={{
backgroundColor: bg,
}}
transition={transition}
/>
</div>
);
}

The slideshow can be linked to a CodeSandbox to add a live preview. In this example, the circle background color will change with each slide.

slideshow-with-preview.mdx

<CH.Slideshow preset="https://codesandbox.io/s/w5wfe">
The slideshow can be linked to a CodeSandbox to add a live preview. In this
example, the circle background color will change with each slide.
```jsx src/App.js
import { motion } from "framer-motion";
const transition = { duration: 1 };
export default function App() {
const bg = "hsl(20, 100%, 50%)";
return (
<div className="container">
<motion.div
className="swatch"
animate={{
backgroundColor: bg,
}}
transition={transition}
/>
</div>
);
}
```
---
Here, the circle background color is changed from orange to neon green in the
code, and the CodeSandbox preview updates to match.
```jsx src/App.js focus=1,6,9:15
import { motion } from "framer-motion";
const transition = { duration: 1 };
export default function App() {
const bg = "hsl(110, 100%, 50%)";
return (
<div className="container">
<motion.div
className="swatch"
animate={{
backgroundColor: bg,
}}
transition={transition}
/>
</div>
);
}
```
---
Next, the circle background color changes from neon green to blue. Again, the
preview updates to match the code shown.
```jsx src/App.js focus=1,6,9:15
import { motion } from "framer-motion";
const transition = { duration: 1 };
export default function App() {
const bg = "hsl(200, 100%, 50%)";
return (
<div className="container">
<motion.div
className="swatch"
animate={{
backgroundColor: bg,
}}
transition={transition}
/>
</div>
);
}
```
---
In the final slide, the circle background color is changed to purple.
```jsx src/App.js focus=1,6,9:15
import { motion } from "framer-motion";
const transition = { duration: 1 };
export default function App() {
const bg = "hsl(290, 100%, 50%)";
return (
<div className="container">
<motion.div
className="swatch"
animate={{
backgroundColor: bg,
}}
transition={transition}
/>
</div>
);
}
```
</CH.Slideshow>

Built with by