We are working on Code Hike v1.0

Not just a syntax highlighter.

DocumentationPlayground
Show with React
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.

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.

David Boyne
David BoyneAWS developer advocate

Code Hike is such a refreshing experience. I honestly think you will start to see these patterns everywhere across docs over the next few years.

Demos

Code and focusFilenames and tabsLockedAnnotationsLockedComment annotationsLockedCode linksSpotlightLockedSpotlight & previewLockedScrollycodingLockedScrollycoding & previewLockedSlideshowLockedSlideshow & previewLocked

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

Sponsor on GitHubSponsor on Open Collective