Home

CH.Spotlight

Learn how to use the experimental CH.Spotlight component from Code Hike in your documentation to create interactive code blocks that change on selection of linked text.

Select to change focus

Or change the code

Or add a code panel

app.js


function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null && 0;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum) : [];
}

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

Overview

<CH.Spotlight> is used to change the code view based on linked sections of text. The code shown is based on which section of text the reader selects. It will not change on hover.

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

Properties

Name	Type	Description
`lineNumbers` (optional)	boolean	Option to show line numbers for each row of code. The default is `false`.
`preset` (optional)	url	Option to link to a Code Sandbox project if you would like to include a preview with the code.
`rows`	integer or `focus`	Option to set a custom height for the code block based on either a specified number of rows or `focus` annotation.
`showCopyButton` (optional)	boolean	Option to show copy button on the code block. The default is `true`

Examples

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 spotlight

Step 1

Wrap all text and code blocks with the CH.Spotlight component. Separate sections with a divider (---) between each step. To focus on a specific piece of code for a section, add focus settings to the corresponding code block.

Step 2

If you want to use the same code example from the previous step but highlight a different section, place an empty code block with the same settings. Change the focus settings to the relevant lines of code to correspond with the current text.

Step 3

To add or remove code from the previous code block, put the complete new code in the next code block. The differences between the two code blocks will be detected and animated automatically when the reader selects the next section.

app.js


function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null && 0;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum) : [];
}

simple-spotlight.mdx


<CH.Spotlight>
```js app.js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null && 0;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum) : [];
}
```
---
#### Step 1
Wrap all text and code blocks with the `CH.Spotlight` component. Separate
sections with a divider (`---`) between each step. To focus on a specific piece
of code for a section, add focus settings to the corresponding code block.
```js app.js focus=2:4
```
---
#### Step 2
If you want to use the same code example from the previous step but highlight a
different section, place an empty code block with the same settings. Change the
focus settings to the relevant lines of code to correspond with the current
text.
```js app.js focus=6:10
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null && 0;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum) : [];
}
function adipiscing(...elit) {
  console.log(elit);
  return elit.map((ipsum) => ipsum.sit);
}
```
---
#### Step 3
To add or remove code from the previous code block, put the complete new code in
the next code block. The differences between the two code blocks will be
detected and animated automatically when the reader selects the next section.
<CH.Code>
```js app.js focus=1:4
function adipiscing(...elit) {
  console.log(elit);
  return elit.map((ipsum) => ipsum.sit);
}
```
---
```css styles.css
.lorem {
  color: #fff;
  padding: 10px;
  background: #000;
}
```
</CH.Code>
</CH.Spotlight>

Spotlight with preview

Step 1

Set the preset property as a link to a Code Sandbox project. For any corresponding code blocks that will be used as examples, change the code block title to the relative path of the file that the code block will reference. In this example, we are changing code in the src/App.js file.

Step 2

When the reader selects a section, the code will change to match the selected section. If the path to the file is not included as the code block title, the preview will not update.

Step 3

Any changes to the code from the previous section will be animated automatically. When a section is selected, the color changes in both the code and the preview.

Step 4

Lines to focus can also be specified in the fenced code block, just like any other Code Hike component. This helps highlight the most important parts of the code to the reader, even if they are not being altered.

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>
  );
}

spotlight-with-preview.mdx


<CH.Spotlight preset="https://codesandbox.io/s/w5wfe" >
```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>
  );
}
```
---
#### Step 1
Set the `preset` property as a link to a Code Sandbox project. For any
corresponding code blocks that will be used as examples, change the code block
title to the relative path of the file that the code block will reference. In
this example, we are changing code in the `src/App.js` file.
```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>
  );
}
```
---
#### Step 2
When the reader selects a section, the code will change to match the selected
section. If the path to the file is not included as the code block title, the
preview will not update.
```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>
  );
}
```
---
#### Step 3
Any changes to the code from the previous section will be animated
automatically. When a section is selected, the color changes in both the code
and the preview.
```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>
  );
}
```
---
#### Step 4
Lines to focus can also be specified in the fenced code block, just like any
other Code Hike component. This helps highlight the most important parts of the
code to the reader, even if they are not being altered.
```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.Spotlight>

Illuminate Documentation

Overview

Properties

Examples

Simple spotlight

Step 1

Step 2

Step 3

Spotlight with preview

Step 1

Step 2

Step 3

Step 4