Text Formatting

Text is plain HTML, and the theme styles the elements themselves: write semantic markup and it already looks right. No classes, no inline styles.

Bold and Italic

<strong>bold text</strong> and <em>italic text</em> and <strong><em>bold italic</em></strong>

**bold text** and *italic text* and ***bold italic***

Renders as: bold text and italic text and bold italic

Strikethrough

<s>deleted text</s>

~~deleted text~~

Renders as: deleted text

Inline Code

Use <code>const x = 1</code> for inline code.

Renders as: Use const x = 1 for inline code.

<kbd> marks a key: press Ctrl + C to copy.

Inline Code Highlighting

An inline <code> with a language-* class is highlighted like a block, in the same light and dark themes.

Run <code class="language-js">await build("docs")</code> first.

Run `await build("docs"){:js}` first.

Renders as: Run await build("docs") first.

Blockquotes

<blockquote><p>This is a blockquote.</p></blockquote>

> This is a blockquote.

Renders as:

This is a blockquote.

Lists

Unordered and ordered lists:

• First item
• Second item
  • Nested item

1. Step one
2. Step two
3. Step three

<ul>
  <li>First item</li>
  <li>Second item<ul><li>Nested item</li></ul></li>
</ul>
<ol><li>Step one</li><li>Step two</li></ol>

- First item
- Second item
  - Nested item

1. Step one
2. Step two

Task Lists

A list item led by a disabled checkbox:

<ul>
  <li><input type="checkbox" checked disabled> Completed task</li>
  <li><input type="checkbox" disabled> Pending task</li>
</ul>

- [x] Completed task
- [ ] Pending task

Renders as:

• Completed task
• Pending task

Horizontal Rules

<hr>

---

Footnotes

No component needed. A footnote reference is a <sup> link to an <li> with that id; hovering or focusing the reference previews its note, without the links back. Without the script, the link still jumps to the note.

Here is a sentence with a footnote<sup><a href="#note-1" id="ref-1">1</a></sup>.

<ol>
  <li id="note-1">This is a numbered footnote. <a href="#ref-1">↩</a></li>
</ol>

Renders as:

Here is a sentence with a footnote¹ and another².

1. This is a numbered footnote. ↩
2. Hover the reference to read the note in place. ↩

Definition Lists

Define terms with their descriptions:

<dl>
  <dt>Page</dt>
  <dd>An .html file in a project</dd>
  <dt>Escape</dt>
  <dd>A project file that replaces a built-in asset</dd>
  <dd>Kept under .htmlpress/</dd>
</dl>

Page
: An .html file in a project

Escape
: A project file that replaces a built-in asset
: Kept under .htmlpress/

Renders as:

Page

An .html file in a project

Escape

A project file that replaces a built-in asset

Kept under .htmlpress/

Abbreviations

No component needed. An <abbr title> shows its full form on hover or focus; without the script, the title stays a native tooltip.

The <abbr title="HyperText Markup Language">HTML</abbr> standard is maintained by <abbr title="World Wide Web Consortium">W3C</abbr>.

Renders as: The HTML standard is maintained by W3C.

Emoji

Write emoji characters directly; pages are UTF-8:

🚀 Launch 🎉 Celebrate ❤️ Love ⚠️ Careful ✅ Done

Renders as: 🚀 Launch 🎉 Celebrate ❤️ Love ⚠️ Careful ✅ Done

GitHub's shortcodes become emoji at build time; an unknown one, and anything inside code or a data-literal element, stays as written:

Ship it :rocket: :tada:

Ship it :rocket: :tada:

Renders as: Ship it 🚀 🎉