Not just a syntax highlighter.

Write with MDX
some.mdx

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
## Basic syntax highlighting
```js
function lorem(ipsum, dolor) {
const sit = "lorem ipsum"
dolor = elit(dolor, 3)
while (++consectetur < amet) {
sit.eiusmod("dolor sit amet")
tempor(ipsum, adipiscing)
}
}
```
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
## Focusing parts of the code
```js focus=2,4[9:30],6
function lorem(ipsum, dolor) {
const sit = "lorem ipsum"
dolor = elit(dolor, 3)
while (++consectetur < amet) {
sit.eiusmod("dolor sit amet")
tempor(ipsum, adipiscing)
}
}
```
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
## Multiple files together
<CH.Code>
```js index.js
function lorem(ipsum, dolor) {
const sit = ipsum - amet(dolor)
return sit + "lorem ipsum"
}
```
---
```css styles.css
.lorem-ipsum > .dolor pre {
background-color: var(--color-bg);
padding: 1em 0px 10vh 300px;
}
```
</CH.Code>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
## Annotations
```js bg=2:3 box=5[9:15]
function lorem(ipsum, dolor) {
const sit = "lorem ipsum"
dolor = elit(dolor, 3)
while (++consectetur < amet) {
sit.eiusmod("dolor sit amet")
tempor(ipsum, adipiscing)
}
}
```
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
## And more annotations
```js
function lorem(ipsum, dolor) {
const sit = "lorem ipsum"
dolor = elit(dolor, 3)
// link[12:22] http://codehike.org
while (++consectetur < amet) {
tempor(ipsum, adipiscing)
// label lorem ipsum dolor
sit.eiusmod("hover me")
}
}
```
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
## And even custom annotations
import MyThing from "./MyThing"
```js
function lorem(ipsum, dolor) {
const sit = "lorem ipsum"
dolor = elit(dolor, 3)
while (++consectetur < amet) {
sit.eiusmod("dolor sit amet")
tempor(ipsum, adipiscing)
}
}
```
<CH.Annotation as={MyThing} focus="3[11:24]">
Lorem **ipsum** dolor sit: [amet](#)
</CH.Annotation>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
## Code links
<CH.Section>
Lorem ipsum [loop](focus://4:7) sit.
```js
function lorem(ipsum, dolor) {
const sit = "lorem ipsum"
dolor = elit(dolor, 3)
while (++consectetur < amet) {
sit.eiusmod("dolor sit amet")
tempor(ipsum, adipiscing)
}
}
```
</CH.Section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
# Spotlight
<CH.Spotlight>
```js app.js
function lorem(ipsum, dolor) {
const sit = "lorem ipsum"
dolor = elit(dolor, 3)
while (++consectetur < amet) {
// TODO
}
}
```
---
Change focus
```js app.js focus=4:6
```
---
Or change the code
```js app.js focus=4:7
function lorem(ipsum, dolor) {
const sit = "lorem ipsum"
dolor = elit(dolor, 3)
while (++consectetur < amet) {
sit.eiusmod("dolor sit amet")
tempor(ipsum, adipiscing)
}
}
```
---
Or change the file
<CH.Code>
```js app.js focus=4:6
```
---
```css styles.css
.lorem-ipsum > .dolor pre {
padding: 1em 0px 10vh 300px;
}
```
</CH.Code>
---
Lorem ipsum
```js app.js
```
</CH.Spotlight>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
## Scrollycoding
<CH.Scrollycoding
preset="https://codesandbox.io/s/zzgrb"
>
### Step 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
```jsx app.js focus=3:9
import Circle from "./circle"
const red = "hsl(0 85% 60%)"
export default function App() {
return (
<div>
<Circle color={red} />
</div>
)
}
```
---
### Step 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
```jsx app.js focus=5:9
import Circle from "./circle"
const red = "hsl(0 85% 60%)"
export default function App() {
return (
<div>
<Circle color={red} />
<Circle color={red} />
<Circle color={red} />
</div>
)
}
```
---
### Step 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
```jsx app.js focus=2,6:8
```
---
### Step 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
```jsx app.js focus=8:10
import Circle from "./circle"
const red = "hsl(0 85% 60%)"
const blue = "hsl(240 50% 60%)"
const gold = "hsl(60 60% 60%)"
export default function App() {
return (
<div>
<Circle color={red} />
<Circle color={blue} />
<Circle color={gold} />
</div>
)
}
```
</CH.Scrollycoding>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

Show with React

Build first-class code walkthroughs for the web. Whether you are writing blog posts, documentation, tutorials, coding videos, or any type of technical content, Code Hike helps you create a superior code reading experience.

Guillermo Rauch
Guillermo RauchVercel CEO

This looks like the future of documentation

Tomasz Łakomy
Tomasz ŁakomyEgghead instructor

This is one of the most impressive tools for teaching I've seen in quite some time

Cassie Evans
Cassie EvansSVG magician

This would definitely raise the bar on the formatting of technical content

Get started

There isn't a stable version yet, but there's a preview version for people who want to try it out and give feedback. You can use it in any project that has MDX v2 configured by following the instructions on how to set it up. Or you can clone this starter project.

There are no docs yet, but you can explore the demos for an overview of all the features and how to use them. Don't hestitate to ask for help.

Demos

Everyone can see all the demos, but only sponsors can see the code for demos marked with Locked. Locked demos are unlocked for everyone after being sponsored by five sponsors.

Sponsors