Coffer

Obsidian Embeds Demo

This note shows the advanced embed features available in Coffer, including media embeds, auto-embeds, math rendering, and Mermaid diagrams.

Auto-embeds

YouTube Videos

YouTube URLs are automatically embedded as responsive video players. Just paste a standard YouTube link as a markdown image:

Watch on YouTube: "Astro Suite for Obsidian"

![Astro Suite for Obsidian](https://www.youtube.com/watch?v=3zeqJ5tqmaQ)

Twitter/X Posts

Twitter/X post URLs are automatically embedded with theme-aware styling that matches your site’s light/dark mode:

![Why doesn't everyone use Astro?](https://x.com/davidvkimball/status/1933196479801536736)

Media Embeds

Coffer embeds local media files directly in your notes using standard markdown image syntax. Place the files in the note’s folder and reference them.

Video

![Demo video](video.mp4)

Audio

![Demo audio](sound.wav)

PDF

document.pdfDownload PDF

![Sample document](document.pdf)

Math

Coffer renders LaTeX math with KaTeX, in both light and dark mode.

Inline Math

Use single dollar signs for inline math: E=mc2E = mc^2 or ∫02πdθx+e−iθ\int_0^{2\pi} d\theta x+e^{-i\theta}.

Display Math

Use double dollar signs for centered display math:

∣abcd∣=ad−bc\begin{vmatrix}a & b\\ c & d \end{vmatrix}=ad-bc f(x)=x2+3x+2f(x) = x^2 + 3x + 2

Common Mathematical Notation

Fractions and Superscripts

  • Fractions: ab\frac{a}{b}, x2+1x−1\frac{x^2 + 1}{x - 1}
  • Superscripts: x2x^2, eiπ+1=0e^{i\pi} + 1 = 0
  • Subscripts: x1x_1, H2OH_2O

Greek Letters

  • α,β,γ,δ,ϵ,θ,λ,μ,π,σ,ϕ,ω\alpha, \beta, \gamma, \delta, \epsilon, \theta, \lambda, \mu, \pi, \sigma, \phi, \omega
  • Γ,Δ,Θ,Λ,Π,Σ,Φ,Ω\Gamma, \Delta, \Theta, \Lambda, \Pi, \Sigma, \Phi, \Omega

Mathematical Symbols

  • Summation: ∑i=1nxi\sum_{i=1}^{n} x_i
  • Product: ∏i=1nxi\prod_{i=1}^{n} x_i
  • Integral: ∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
  • Limit: lim⁡x→0sin⁡xx=1\lim_{x \to 0} \frac{\sin x}{x} = 1

Matrices and Vectors

(abcd)(xy)=(ax+bycx+dy)\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

Complex Equations

∇×E⃗=−∂B⃗∂t\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t} iℏ∂∂tΨ(r⃗,t)=H^Ψ(r⃗,t)i\hbar\frac{\partial}{\partial t}\Psi(\vec{r},t) = \hat{H}\Psi(\vec{r},t)

Math in Callouts

Math works perfectly within callouts:

Note

Where cc is the hypotenuse and aa and bb are the other two sides.

Tip

This is particularly useful for integrals involving products of functions.

Advanced Mathematical Typesetting

Aligned Equations

f(x)=ax2+bx+cf′(x)=2ax+bf′′(x)=2a\begin{aligned} f(x) &= ax^2 + bx + c \\ f'(x) &= 2ax + b \\ f''(x) &= 2a \end{aligned}

Cases and Piecewise Functions

f(x)={x2if x≥0−x2if x<0f(x) = \begin{cases} x^2 & \text{if } x \geq 0 \\ -x^2 & \text{if } x < 0 \end{cases}

Set Notation

  • Natural numbers: N={1,2,3,…}\mathbb{N} = \{1, 2, 3, \ldots\}
  • Real numbers: R\mathbb{R}
  • Complex numbers: C\mathbb{C}
  • Set union: A∪BA \cup B
  • Set intersection: A∩BA \cap B
  • Subset: A⊆BA \subseteq B

Obsidian Compatibility

All math notation works identically in Obsidian and your published site:

  • Inline math: $...$ syntax
  • Display math: $$...$$ syntax
  • LaTeX commands: Full support for standard LaTeX math commands
  • Greek letters: Use \alpha, \beta, etc.
  • Symbols: Use \sum, \int, \infty, etc.

Diagrams

Coffer renders Mermaid diagrams in the site palette, in both light and dark mode.

Flowchart

graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

Sequence Diagram

sequenceDiagram
    participant Alice
    participant Bob
    participant John
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Class Diagram

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +String color
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat

State Diagram

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Entity Relationship Diagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User Journey

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

Gantt Chart

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2024-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2024-01-12  , 12d
    another task     : 24d

Pie Chart

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

Git Graph

    gitGraph
       commit
       commit
       branch develop
       checkout develop
       commit
       commit
       checkout main
       merge develop
       commit
       commit

Complex Flowchart

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
    D --> G[Code on it]
    E --> H[Use it]
    F --> I[Drive it]

Responsive Design

All diagrams are responsive and work well on mobile devices, with proper scaling and overflow handling.

Further Reading

For standard markdown formatting examples, see Formatting Reference.

Recently updated

Graph