page.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <title>Every Markdown element</title>
    <meta name="description" content="What the theme does with each thing Markdown writes, and nothing else." />
    <meta property="og:title" content="Every Markdown element" />
    <meta property="og:description" content="What the theme does with each thing Markdown writes, and nothing else." />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary" />
    <style>
      /* Pagez's theme.css */
    </style>
  </head>
  <body>
    <main>
<h1 id="every-markdown-element-in-prose">Every Markdown element, in prose</h1>
<p>A paragraph with <em>emphasis</em>, <strong>strong</strong>, a <a href="https://example.com">link</a>, and <code>inline code</code>. This
sentence goes on long enough to wrap onto a second line, to show the measure and the leading at
work, as a real paragraph would. A long name in code wraps rather than widening the page:
<code>a-very-long-function-name-that-would-otherwise-push-the-page-sideways-on-a-phone</code>.</p>
<h2 id="a-second-level-heading-thats-long-enough-to-wrap-to-show-balanced-wrapping">A second-level heading that's long enough to wrap, to show balanced wrapping</h2>
<ul>
<li>An unordered list</li>
<li>with a second item<ul>
<li>and a nested one</li>
</ul>
</li>
</ul>
<ol>
<li>An ordered list</li>
<li>with two items</li>
</ol>
<blockquote>
<p>A quote, set off by a rule at its start.</p>
<p>It has a second paragraph.</p>
</blockquote>
<h3 id="code">Code</h3>
<pre><code class="language-js">function greet(name) {
  if (name) {
    return `Hello, ${name}! This line is long enough to wrap, and its wrapped part is indented under it.`;
  }
}
</code></pre>
<h4 id="a-table">A table</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th align="right">Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ada</td>
<td>Engineer</td>
<td align="right">1843</td>
</tr>
<tr>
<td>Grace</td>
<td>Admiral</td>
<td align="right">1947</td>
</tr>
</tbody>
</table>
<hr />
<p><img src="./square.svg" alt="A square" /> An image in a paragraph stays inline.</p>
<figure><p><img src="./square.svg" alt="A square, in a figure" /></p>
<figcaption>A caption under the square.</figcaption>
</figure>
<ul>
<li><input type="checkbox" disabled="" checked="" /> A task that's done</li>
<li><input type="checkbox" disabled="" /> and one that isn't</li>
</ul>
<h5 id="fifth-level">Fifth level</h5>
<h6 id="sixth-level">Sixth level</h6>
<h3 id="what-markz-writes-as-elements">What Markz writes as elements</h3>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd>. H<sub>2</sub>O and x<sup>2</sup>, in
<abbr title="HyperText Markup Language">HTML</abbr>, with <small>small print</small> and <mark>a mark</mark>.
<del>Old</del> <ins>new</ins>, <s>struck</s>, <b>bold</b>, <i>italic</i> and <u>underlined</u>. As
<cite>Ada Lovelace</cite> wrote, <q>the engine weaves algebraic patterns</q>. A <dfn>term</dfn> is
defined once. Let <var>n</var> be the count, and the output be <samp>Done.</samp> On
<time datetime="2026-05-01">the first of May</time>, <data value="42">forty-two</data> came. Arabic
<bdi>مرحبا</bdi> sits in a line, and <bdo dir="rtl">backwards</bdo> runs right to left.</p>
<dl><dt>Term</dt>
<dd>Its definition.</dd>
<dt>Another</dt>
<dd>And its own.</dd>
</dl>
<details><summary>More</summary>
<p>What was folded away.</p>
</details>
<aside><p>An aside, which is a block like any other.</p>
</aside>
<address><p>1 Example Street, Example City</p>
</address>
</main>
  </body>
</html>