Code Highlight Demo

This is a demo of the code highlight component.

<div>Hello, world!</div>

.hello {
  color: red;
}

console.log("Hello, world!")

Long code blocks

Long fences preview 12 lines. Expand to read the rest; Copy includes every line.

const lessons = [
  "Getting started",
  "Sources",
  "Blocks",
  "Links",
  "Components",
  "Queries",
  "Layouts",
  "Themes",
  "Plugins",
  "Publishing",
]

for (const lesson of lessons) {
  console.log(lesson)
}

Add collapse=false to keep a long example fully visible:

const lessons = [
  "Getting started",
  "Sources",
  "Blocks",
  "Links",
  "Components",
  "Queries",
  "Layouts",
  "Themes",
  "Plugins",
  "Publishing",
]

for (const lesson of lessons) {
  console.log(lesson)
}