Code
Inline code and fenced blocks
Inline code uses IBM Plex Mono on the highlight token. Fenced blocks use a transparent fill within a 1px frame with a 5px radius. Padding keeps the copy control clear of the first line.
Filename blocks add a softly tinted header inside the same frame. Quarto supplies the source and the code-copy availability setting; Askr uses its shared text Copy button instead of Quarto’s icon-and-tooltip control.
After a successful copy, the button shows Copied! with a green outline for about two seconds, then returns to Copy. Long lines in scroll-enabled blocks stay inside the block instead of widening the page.
An inline sample is askr-html.
def describe_reading_surface(theme: str, width: int) -> str:
return f"{theme} surface at {width}px retains local overflow boundaries"
long_line = "qdk keeps this intentionally long source line in a local preformatted scroll area rather than allowing it to widen the whole page beyond the reader viewport"
print(describe_reading_surface("dark", 360), long_line)reading.py
def quiet(width: int) -> str:
return f"measure {width}px"Filename inside a callout
A native filename labels the block without adding another card. Long paths scroll within the code area; the filename can wrap on a narrow screen.
These generic paths illustrate a report manifest, not a live filesystem.
reports/example-run/output-manifest.txt
layout: /work/projects/example-study/runs/reference-model/exports/geometry/component-layout.svg
results: /work/projects/example-study/runs/reference-model/analysis/frequency-sweep/results.csv
report: /work/projects/example-study/runs/reference-model/reports/summary/index.htmlLimits
The filename example keeps a long source line inside its scrollable block. Do not wrap a paragraph in a code fence to force a measure; prose belongs in the article, and a fence is for source.