Skip to content
Starlight QuizStarlight Quiz

Advanced formatting

Because a quiz is just markdown, the question, the answers and the content section can all contain rich markdown: code blocks, tables, lists, images and inline formatting.

Code in the question

Section titled “Code in the question”

What does this snippet log?

const xs = [1, 2, 3];
console.log(xs.map((x) => x * 2));
  • [1, 2, 3]
  • [2, 4, 6]
  • [1, 4, 9]

Array.prototype.map returns a new array with the callback applied to each element.

Code block features

Section titled “Code block features”

Code blocks in a quiz are rendered by Expressive Code, so the full meta-string syntax works inside a quiz too: a filename title, highlighted lines ({2}), and ins/del diff markers:

This refactor introduced a bug. Which highlighted change causes it?

cart.js
function total(items) {
  let sum = 0;
  for (const item of items) {
    sum += item;
    sum += item.price;
  }
  return sum;
}
  • The inserted line should read item.price, not the removed item
  • The highlighted initialiser
  • The loop header

You can also give a marker a label on its own line with the {"label":line} syntax, handy for walking through an answer in the content section:

```js {"This runs first, the accumulator starts at zero:":1}
let sum = 0;
```

Rich content section

Section titled “Rich content section”

The content section revealed after submitting can hold headings, lists, tables and more:

Which status code means “Not Found”?

  • 200
  • 301
  • 404
  • 500

Common status codes

Section titled “Common status codes”
Code Meaning
200 OK
301 Moved Permanently
404 Not Found
500 Internal Server Error

Formatting in answers

Section titled “Formatting in answers”

Answers themselves accept inline markdown: code, bold, italic and links:

Which command installs the package?

  • npm install starlight-quiz
  • npm start starlight-quiz
  • npm run starlight-quiz