Code blocks and live code

Show code, run code at build time, or run it in the learner’s browser.
Code 9 min

By the end of this lesson you will

  • Show syntax-highlighted code with a filename and line numbers
  • Choose between static, build-time and in-browser execution
  • Know what to change when this template becomes an R course

Cheat sheet

python
Fence: static, highlighted
{python}
Fence: runs at build time
{webr-r}
Fence: live R in the browser
filename=“a.py”
Show a filename on a block

Resources

There are three levels of “code” in a lesson, from simplest to most interactive.

1. Static code

A normal fenced block is highlighted and gets a copy button. Add a filename and line numbers when you want to refer to specific lines.

greet.py
def greet(name):
    return f"Hello, {name}!"

print(greet("Ada"))

2. Build-time execution

Fence with the language in braces and Quarto runs the code when it renders, then embeds the output. Learners see the result but cannot edit it.

```{python}
squares = [n * n for n in range(1, 6)]
squares
```

This needs a Jupyter install (python3 -m pip install jupyter). The demo above is left unexecuted so this template renders with nothing but Quarto and PyYAML. For R, use the knitr engine with identical syntax: {r}.

3. Live, in-browser execution

For a course where learners edit and run code, add the quarto-webr extension. It runs a real R in the browser through WebAssembly, with nothing to install. The rprogramming course already uses it.

---
engine: knitr
filters:
  - webr
---

```{webr-r}
x <- c(1, 2, 3)
mean(x)
```
NoteTurning this template into the R course
  1. Copy this folder to courses/rprogramming-v2/.
  2. Run quarto add coatless/quarto-webr inside it.
  3. Add engine: knitr and filters: [webr] to lesson front matter (or once under format.html in _quarto.yml).
  4. Port the old lessons: the quiz and “discuss first” markup is identical, so they paste straight in.
  5. Copy qwebr-force-dark.js from the old course so the editor matches the dark theme.

Check your understanding

Q1. Which option lets learners edit and run code themselves?

  • Static blocks show code, build-time cells show its output.
  • quarto-webr makes R cells editable and runnable in the browser.
  • Quiz markup is shared with the old R course, so lessons port unchanged.
Back to top