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```jsfunction 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],6function 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.jsfunction 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```jsfunction 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 annotationsimport MyThing from "./MyThing"```jsfunction 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.```jsfunction 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.jsfunction 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:7function 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 1Lorem 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:9import Circle from "./circle"const red = "hsl(0 85% 60%)"export default function App() { return ( <div> <Circle color={red} /> </div> )}```---### Step 2Lorem 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:9import 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 3Lorem 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 4Lorem 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:10import 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.
Demos
Code and focusFilenames and tabsAnnotationsComment annotationsCode linksSpotlightSpotlight & previewScrollycodingScrollycoding & previewSlideshowSlideshow & 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
Meta
facebookMenlo Park, CaliforniaOuterbounds
outerboundsFran Méndez
fmvilasSpainMatthias Zepper
MatthiasZepperGermanyCodeCrafters
codecrafters-ioUnited States of AmericaRich Haines
moleboxÖrnsköldsvik, SverigeTravis Cooper
traviscooperAlex Rosenkranz
arosenkranzNew JerseykickstartDS
kickstartDSBrendan Gibson
obgibsonBrian Espinosa
brianespinosaTacoma, WAMichael Carter
kilimanNorth Carolina, USAJesse Hall
codeSTACKrDriv.ly
drivlyUnited States of AmericaNathan Clevenger
nathanclevengerSpeakeasy Bot
speakeasybotBeehiveJesse Katsumata
NaturalclarChiba, JapanNolan Di Mare Sullivan
ndimaresLondon- yacinelakel
Alexzander Flores
AlexzanderFloresCalifornia