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


function lorem(ipsum, dolor) {
  const sit = "lorem ipsum"
  dolor = elit(dolor, 3)
  while (++consectetur < amet) {
    sit.eiusmod("dolor sit amet")
    tempor(ipsum, adipiscing)
  }
}

Focusing parts of the code


function lorem(ipsum, dolor) {
  const sit = "lorem ipsum"
  dolor = elit(dolor, 3)
  while (++consectetur < amet) {
    sit.eiusmod("dolor sit amet")
    tempor(ipsum, adipiscing)
  }
}

Multiple files together

index.js


function lorem(ipsum, dolor) {
  const sit = ipsum - amet(dolor)
  return sit + "lorem ipsum"
}

styles.css


.lorem-ipsum > .dolor pre {
  background-color: var(--color-bg);
  padding: 1em 0px 10vh 300px;
}

Annotations


function lorem(ipsum, dolor) {
  const sit = "lorem ipsum"
  dolor = elit(dolor, 3)
  while (++consectetur < amet) {
    sit.eiusmod("dolor sit amet")
    tempor(ipsum, adipiscing)
  }
}

And more annotations


function lorem(ipsum, dolor) {
  const sit = "lorem ipsum"
  dolor = elit(dolor, 3)
  while (++consectetur < amet) {
    tempor(ipsum, adipiscing)
    sit.eiusmod("hover me")
  }
}

Code links

Lorem ipsum loop sit.


function lorem(ipsum, dolor) {
  const sit = "lorem ipsum"
  dolor = elit(dolor, 3)
  while (++consectetur < amet) {
    sit.eiusmod("dolor sit amet")
    tempor(ipsum, adipiscing)
  }
}

Spotlight

Change focus

Or change the code

Or change the file

Lorem ipsum

app.js


function lorem(ipsum, dolor) {
  const sit = "lorem ipsum"
  dolor = elit(dolor, 3)
  while (++consectetur < amet) {
    // TODO
  }
}

Scrollycoding

Step 1

app.js


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.

app.js


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.

app.js


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 4

app.js


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

Step 1

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.

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.

Step 4

app.js


import Circle from "./circle"
const red = "hsl(0 85% 60%)"
export default function App() {
  return (
    <div>
      <Circle color={red} />
    </div>
  )
}