https://codehike.org/

Code Hike

  

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 Lakomy
Tomasz LakomyEgghead 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

Code and focusFilenames and tabsAnnotationsComment annotationsCustom
annotationsCode linksSpotlightSpotlight & previewScrollycoding
Scrollycoding & preview

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

Sponsors

  * [69631]

    Facebook Open Source

    facebookMenlo Park, California
  * [242119]

    Fran Mendez

    fmvilasSpain
  * [6963520]

    Matthias Zepper

    MatthiasZepperGermany
  * [19754257]

    Cassie Evans

    cassieevansBrighton
  * [116461]

    Jonathan Carter

    lostintangentSeattle, WA
  * [42671]

    Varun Vachhar

    winkerVSbecksToronto
  * [81371]

    Nicolas Berger

    nbergerBay Area, CA
  * [76307]

    Davo Galavotti

    davoNew York, NY
  * [1016190]

    Bobby Dresser

    bdresserUnited States
  * [8620144]

    Josep M Sobrepere

    josepotBarcelona
  * [59406945]

    ui.dev

    uidotdev
  * [58904235]

    CodeCrafters

    codecrafters-ioUnited Kingdom
  * [20285232]

    Guido Curcio

    guicurcioBuenos Aires
  * [6764957]

    swyx

    sw-yxSeattle
  * [73602268]

    c0d3t3k

    c0d3t3kPonte Vedra Beach
  * [962099]

    Stefan Judis

    stefanjudisBerlin
  * [9745039]

    Rochez Benjamin

    BenjaminRochezBelgium
  * [22930449]

    Rich Haines

    moleboxOrnskoldsvik, Sverige

Sponsor on GitHubSponsor on Open Collective