Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This opening paragraph shows a floated logo.svg placed with the img() helper, which reads the image's intrinsic dimensions at build time.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat^[1]. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Section headings are emitted with h() and render uppercase with a horizontal rule beneath them.

Inline code is wrapped in a <code> tag. A second footnote^[2] is gathered automatically and numbered in order of appearance.

The picture() helper emits a <picture> element with a WebP <source> and a PNG fallback, so modern browsers get the smaller file. Width and height attributes are computed from the PNG at build time to avoid layout shift.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. The number after the path is a CSS width percentage.

SVGs scale cleanly at any size, which makes them ideal for diagrams. This one is placed at 100% width with img().

Pass "pixel" as the fourth argument to img() to add class="pixel", which keeps nearest-neighbor scaling so small pixel art stays crisp when enlarged.

Wrap fixed-width text or code in a <pre> block. It gets a white background, a border, and horizontal-overflow handling:

$ php gen.php
Generated ./index.html
Generated example_article/index.html

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.

— Someone worth quoting

^	[1]	A first reference, rendered as a numbered footnote
^	[2]	Footnotes are collected automatically and listed under References at the bottom