Example lecture¶

This page demonstrates every feature you'll use when writing lecture notes: callouts, code samples with syntax highlighting, and images.

Callouts¶

Standard types are styled by the theme:

Note

A neutral note.

Warning

Something to be careful about.

Danger

A critical pitfall.

The custom task callout is styled by assets/stylesheets/extra.css:

Task

Build a small web page using the snippets below.

Callouts can be collapsible — append - to start folded (or + to start open):

Optional bonus task (click to expand)

Add a dark-mode toggle to your page using CSS custom properties.

Code samples¶

Fenced code blocks get syntax highlighting and a copy button. Give each block a language for correct highlighting.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hello</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">Hello, world!</h1>
    <button id="go">Click me</button>
    <script src="app.js"></script>
  </body>
</html>

:root {
  --brand: #7c4dff;
}

#title {
  color: var(--brand);
  font-family: system-ui, sans-serif;
}

document.getElementById("go").addEventListener("click", () => {
  document.getElementById("title").textContent = "You clicked!";
});

Inline code also works: press Ctrl+C to copy, and reference variables inline.

Images¶

Store images under docs/assets/images/ and reference them with a relative path:

Images travel with the repository, so they're versioned alongside the text.