Obsidian Embeds Demo | Marc Launey

Media embeds

Video Files

Video files are embedded as HTML5 video players with controls and responsive design.

Audio Files

Audio files are embedded as HTML5 audio players with controls and filename display.

PDF Documents

document.pdf Download PDF

PDFs are embedded as inline viewers with download links.

Use ![[attachments/document.pdf#page=3]] to select a specific PDF page to display.

Auto-embeds

YouTube Videos

YouTube videos are automatically embedded with responsive design and optimized settings.

Twitter/X Posts

Twitter posts are embedded with theme-aware styling that matches your site’s light/dark mode.

Obsidian bases

You can embed bases with base directive syntax:

Loading base…

By adding a limit under views you can limit the number of items that appear.

Loading base…

This is the syntax:

```base
views:
  - type: table
    name: Posts
    limit: 2
```

You can also embed a .base as a markdown embed:

![](bases/Home.base)

Or as a wikilinks embed:

![[Home.base]]

Math

This theme includes comprehensive LaTeX math support using KaTeX for fast, client-side rendering. All math works seamlessly in both light and dark themes.

Inline Math

Use single dollar signs for inline math: $E = mc^2$ or $\int_0^{2\pi} d\theta x+e^{-i\theta}$ .

Display Math

Use double dollar signs for centered display math:

\begin{vmatrix}a & b\\ c & d \end{vmatrix}=ad-bc

f(x) = x^2 + 3x + 2

Common Mathematical Notation

Fractions and Superscripts

Fractions: $\frac{a}{b}$ , $\frac{x^2 + 1}{x - 1}$
Superscripts: $x^2$ , $e^{i\pi} + 1 = 0$
Subscripts: $x_1$ , $H_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: $\sum_{i=1}^{n} x_i$
Product: $\prod_{i=1}^{n} x_i$
Integral: $\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$
Limit: $\lim_{x \to 0} \frac{\sin x}{x} = 1$

Matrices and Vectors

\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

Complex Equations

\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial 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 $c$ is the hypotenuse and $a$ and $b$ are the other two sides.

Tip

This is particularly useful for integrals involving products of functions.

Advanced Mathematical Typesetting

Aligned Equations

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

Cases and Piecewise Functions

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

Set Notation

Natural numbers: $\mathbb{N} = \{1, 2, 3, \ldots\}$
Real numbers: $\mathbb{R}$
Complex numbers: $\mathbb{C}$
Set union: $A \cup B$
Set intersection: $A \cap B$
Subset: $A \subseteq B$

Math with Text

You can mix math with regular text seamlessly. For example, the quadratic formula is $x = \frac{1}{2}$ , which gives us the roots of any quadratic equation $ax^2 + bx + c = 0$ .

Obsidian Compatibility

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

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

This section reproduces some Mermaid diagram examples for convenience.

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 with Styling

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[fa:fa-car Car]
    D --> G[fa:fa-laptop fa:fa-code Laptop]
    E --> H[fa:fa-mobile iPhone]
    F --> I[fa:fa-car Car]

Error Handling Test

This should show an error state:

graph TD
    A[Invalid syntax
    B --> C
    INVALID_COMMAND

Theme Integration

The diagrams should automatically adapt to the current theme (light/dark) and use the theme colors for better integration with the overall design.

Responsive Design

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