posts

Formatting reference

· 2 min read · reference, obsidian

Everything Markdown and Obsidian can do, set in Continuum's type. Keep this note around while you write.

This page shows every kind of formatting the theme styles, in the order you’re likely to reach for it.

Text

Regular text, bold, italic, struck through, inline code, and a highlight. Inline tags like #design link to their topic when it has a page.

A link to another site opens in a new tab. A link to a note works by name: meet-continuum, or with your own words: the type post.

Headings

A third-level heading

A fourth-level heading

Headings get anchors, so you can link straight to them: Callouts.

Lists

  • A plain list
  • With a second item
    • And a nested one
  • Back out again
  1. A numbered list
  2. Counts on its own
  3. In the accent color
  • A finished task
  • One still to do

Quotes

Typography is beautiful. Period.

Callouts

Note

A note, with the default title.

Tips can have their own title

And more than one paragraph.

Like this.

A folded callout

It stays shut until you open it.

An open one that can fold

Click the title to close it.

Quote

Every Obsidian callout type works, along with its aliases.

Code

// The curve every Continuum motion uses: fast out, soft settle, no bounce.
export const metro = 'cubic-bezier(0.1, 0.9, 0.2, 1)';

export function turn(el: Element, dir: 'forward' | 'back') {
  return el.animate([{ transform: 'rotateY(0)' }, { transform: `rotateY(${dir === 'forward' ? 64 : -52}deg)` }], 200);
}

Tables

GestureOn the hubIn a list
Swipenext sectionscrolls
Tapopensopens
Backpans homeflies back

Images

An image from the attachments folder, sized to 480 pixels:

accents

The same with Markdown’s syntax:

Twenty accent colors

Embedded notes

A note embedded with ![[...]] shows as a card that opens it:

Video

A YouTube link as an image becomes a player that loads only when you press play:

Play Astro in 100 seconds on YouTube

Math

Inline math like eiπ+1=0e^{i\pi} + 1 = 0, and a block:

ddt x(t)=v0⋅2−10t⋅10ln⁡2\frac{d}{dt}\, x(t) = v_0 \cdot 2^{-10t} \cdot 10 \ln 2

Diagrams

flowchart LR
  tap[Tap a card] --> lift[Title lifts]
  lift --> turn[List turns away]
  turn --> fly[Title flies to the header]
  fly --> land[Page turns in]

Footnotes

Metro’s curve is fast out and soft to settle.1

Footnotes

  1. It’s cubic-bezier(0.1, 0.9, 0.2, 1), the same one the Metro documentary’s motion uses. ↩