This is a working specimen of the site’s reading styles. Everything below is real rendered content, so you can compare the typography, spacing, and behavior in one place.

The first section covers Markdown. The final section demonstrates optional HTML you can place inside a Markdown file. These are presentation examples, ready to replace with your own words.

On this page

• Headings
• Paragraphs and inline formatting
• Links
• Lists and tasks
• Quotations
• Code
• Tables
• Images
• Rules and footnotes
• HTML extras

Headings

Headings should describe the content that follows them. The post title normally supplies the only level-one heading; this specimen includes another solely to show the complete scale.

Heading level one

A page-level heading. Use this sparingly inside an article.

Heading level two

A major section of the story, with space above and a closer relationship to the paragraph below.

Heading level three

A subsection within a larger idea.

Heading level four

A smaller supporting heading.

Heading level five

A fine-grained label for detailed documents.

Heading level six

The smallest heading level, still distinguishable from ordinary body text.

Paragraphs and inline formatting

A standard paragraph has enough room to read comfortably without stretching across the whole window. This slightly longer example shows where lines wrap, how the spaces between words behave, and how a paragraph sits between its neighbors. The measure stays consistent as you move down the page.

This is a second paragraph. Notice that paragraph spacing is different from line spacing: it gives a complete thought a clear ending without making the text feel disconnected.

Use italic emphasis for a change in voice, strong emphasis for an important phrase, and strong italic emphasis when both are warranted. You can also show deleted or superseded wording and inline code within an ordinary sentence.

Nested emphasis works too: a strong statement with an emphasized detail, or an aside containing a stronger phrase.

An intentional line break ends here.
The next line belongs to the same paragraph.

Escaped characters stay literal: *asterisks*, _underscores_, #hashes, and [square brackets]. An escaped asterisk is different from emphasis.

Punctuation and symbols: “double quotes,” ‘single quotes,’ an apostrophe in it’s, an en dash – between values, an em dash — for an aside, an ellipsis …, ©, ™, ±, ×, →, and café.

Links

Here is an ordinary text link, a link with a descriptive title, and a reference-style link.

An automatic URL: https://example.com.

An example email link: [email protected]. This is an illustrative address.

An internal link to a real post and a link to a section on this page use the same understated treatment.

Lists and tasks

Unordered list

• A short item.
• A slightly longer item that has enough text to wrap onto another line on a narrow screen, allowing you to inspect the hanging indent and spacing.
• An item containing strong text, emphasis, a link, and code.

Ordered list

1. Start with a clear idea.
2. Add the details that make it useful.
3. Check the result at desktop and mobile sizes.

Nested lists

• A first-level item.
  • A second-level item.
  • Another second-level item.
    • A third-level item.
• Another first-level item.
  1. Nested ordered step one.
  2. Nested ordered step two.

A list with multiple paragraphs

1. A step with context. This first paragraph introduces the action.

   This additional paragraph belongs to the same list item. Its left edge should align with the item’s text, rather than the number.

2. The next step. A separate item starts here.

Task list

• Write a first draft.
• Review the typography.
• Replace the sample content.
• Publish the finished site.

These are read-only checkboxes rendered from Markdown, rather than a saved interactive task app.

Quotations

A simple quotation should feel like a pause in the reading, with enough distinction to be recognizable and enough restraint to belong to the page.

Text after a quotation returns to the normal body style.

A quotation can contain more than one paragraph.

It can also contain emphasis and a link, just like the surrounding text.

Nested quotation

The outer quotation establishes the context.

A nested quotation introduces another voice.

The outer voice continues here.

Code

Inline code can name a file.md, a CSS property such as line-height, or a command such as npm run build.

JavaScript

const notes = [
  { title: 'An idea worth keeping', published: true },
  { title: 'A work in progress', published: false },
];

function publishedNotes(items) {
  return items.filter(({ published }) => published);
}

console.log(publishedNotes(notes));

CSS

.reading-column {
  max-width: 40rem;
  margin-inline: auto;
  font-size: 1.125rem;
  line-height: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  .tab-indicator {
    transition: none;
  }
}

HTML

<article>
  <h1>A useful thought</h1>
  <p>Something worth writing down.</p>
</article>

JSON

{
  "title": "A useful thought",
  "draft": false,
  "tags": ["notes", "design"]
}

Shell commands

npm run check
npm run build
npm run preview

Plain text and long lines

Plain text has no syntax highlighting.
Indentation stays intact:
    four spaces
        eight spaces
This deliberately long line demonstrates horizontal scrolling inside the code block, keeping the surrounding page at its normal width even when the code exceeds the available reading measure.

A Markdown source example

## A heading

A paragraph with **strong emphasis**, *italics*, and `code`.

- A list item
- Another list item

Tables

Basic table

Element	Purpose	Example
Heading	Introduce a section	A clear, useful label
Paragraph	Develop an idea	A few connected sentences
Link	Offer another route	A supporting reference
Code	Preserve exact syntax	const value = 42;

Column alignment

Left aligned	Center aligned	Right aligned
Short label	In progress	12
Longer label	Complete	1,240
A total	—	1,252

A wide table

On a small screen, this table scrolls within its own area.

Images

Standard Markdown image

The image below is the original folded-paper illustration used on the homepage.

An image with a caption

Markdown images do not have a built-in caption syntax. A small HTML figure supplies one:

A linked image

Selecting this image opens the original SVG file.

Rules and footnotes

A horizontal rule separates two distinct parts of an article:

---

This paragraph appears after the rule. Use rules when the subject changes, rather than between every section.

A footnote can hold context without interrupting a sentence.¹ A second reference can contain more detail.²

HTML extras

These examples use standard HTML inside the Markdown file. They are useful when basic Markdown does not have the element you need.

Highlights, annotations, and technical terms

Use highlighted text to draw attention to a phrase. An API can expose its expansion on hover. You can also write removed text and inserted text.

Subscripts and superscripts: H₂O, CO₂, x², and 10³.

A keyboard shortcut: press Ctrl + K. On a Mac, use ⌘ + K.

Small supporting text is available for a short qualification or source note. It should remain readable.

Definition list

Markdown

A plain-text format for writing structured content.

Frontmatter

The title, date, tags, and other fields at the beginning of an entry.

Static build

The generated pages and assets that you upload to your host.

An aside

Expandable details

What does an expanded disclosure look like?

This content starts visible. Select the summary to close it, or use Enter or Space when the summary has keyboard focus.

And a closed disclosure?

This content is revealed when the disclosure opens. Its state is local to the current page.

Explicit line breaks

A line with an HTML break.
Another line in the same paragraph.

What needs extra tooling?

Mathematical notation, Mermaid diagrams, and automatic embeds are not enabled in this starter. The examples here cover ordinary Markdown, GitHub-style tables and tasks, footnotes, and the HTML elements shown above.

Footnotes

1. This is the first footnote. Its return link takes you back to the reference in the text. ↩

2. A footnote can include emphasis, strong text, a source link, and inline code. ↩