This article exists to demonstrate every supported formatting option in one place. Each block is intentionally obvious so you can scan, copy, and verify behavior.

Inline text styles

This paragraph shows basic inline styles working together:

• Bold text for emphasis, italic text for tone, underlined text for callouts, and strikethrough text for edits
• Inline code like const example = true;
• Combined examples such as bold + italic or bold + strikethrough

Text alignment

This section demonstrates paragraph-level alignment options.

Text left aligned.

Text center aligned.

Text right aligned.

Subscript and superscript

Use these for formulas, footnotes, or precise notation:

• Chemical formula: H2O
• Mathematical exponent: x2 + y2
• Footnote-style reference: Example text[1]

Text colors + highlights

Each example below pairs a text color with a matching highlight to demonstrate stacking without wasting space.

• Grey text and highlight: Subtle, secondary information
• Brown text and highlight: Warm, muted annotation
• Orange text and highlight: Warnings or attention cues
• Yellow text and highlight: Notes and callouts
• Green text and highlight: Success or positive state
• Blue text and highlight: Informational or link-adjacent text
• Purple text and highlight: Creative or special emphasis
• Pink text and highlight: Playful or expressive tone
• Red text and highlight: Errors or critical warnings

Heading Level 1

Use H1 for the article title or major sections. There should usually be only one H1 per article.

Heading Level 2

Lists

Use H2 for main sections. This is where most structure lives in longer writing.

Heading Level 3

Use H3 for subsections, clarifications, or grouped ideas under an H2.

This paragraph exists purely as filler content to show how normal body text looks beneath a third-level heading. It should feel readable, balanced, and not visually overwhelming.

Mixed formatting example

Here’s a realistic paragraph combining everything:

Note: This sentence is important, contains inline code, emphasized ideas, and highlighted phrases to draw attention. If something changes later, you might strike it out and replace it.

Bulleted list

• First unordered item
• Second unordered item
• Third unordered item with bold and inline code

Numbered list

1. First ordered item
2. Second ordered item
3. Third ordered item

Todo list

• First todo item
• Second todo item
• Third todo item

Media blocks

Single images

Single image blocks can be resized (minimum 25%) and aligned to the left, center or right.

They could also take the full width of the container.

Image grid

Image grids can be mosaic grid, displaying the images original aspect ratio.

They can be locked to 3:2, 2:3 or 1:1 ratios.

They can also be 1 or 2 rows, but require a minimum of 2 images and a max of 6 currently.

Image carousel

Image carousels also require a minimum of 2 images and a max of 6 currently

Image comparison

BeforeAfter

Image comparisons can also be resized (minimum 25%) and aligned to the left, center or right.

BeforeAfter

They could also take the full width of the container. These are limited to exactly 2 images.

Links and embeds

This is a regular link, and so is this: https://example.com/ but we could also add a web mention Example Example Domain for richer content.

Web bookmark

Web embed

Web embeds can also be resized (minimum 50%) and aligned to the left, center or right.

They could also take the full width of the container.

Code blocks

// Example JavaScript code block
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('world'));

/* Example CSS code block */
.container {
  display: grid;
  gap: 1rem;
}

Closing

This article is intentionally boring in content and rich in formatting. Its job is to be copied, poked, broken, and used as a reference when testing renderers.

If it looks good everywhere, you’re probably in great shape. Let @aka.dad know if you need any help implementing anything in your own renderers/readers.