All available blocks
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. 🗣️ All text formatting options can be mixed and combined in any way and should be supported. This is an example of a callout.
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
- First ordered item
- Second ordered item
- Third ordered item
Todo list [x] 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 Image comparisons can also be resized (minimum 25%) and aligned to the left, center or right. 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 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.
Discussion in the ATmosphere