Demo de Embeds de Obsidian

Embeds multimedia

Archivos de Video

Los archivos de video se incrustan como reproductores de video HTML5 con controles y diseño responsivo.

Archivos de Audio

Los archivos de audio se incrustan como reproductores de audio HTML5 con controles y visualización del nombre de archivo.

Documentos PDF

Los PDFs se incrustan como visualizadores en línea con enlaces de descarga.

Usa ![[attachments/document.pdf#page=3]] para seleccionar una página específica del PDF para mostrar.

Auto-embeds

Videos de YouTube

Los videos de YouTube se incrustan automáticamente con diseño responsivo y configuración optimizada.

Publicaciones de Twitter/X

Las publicaciones de Twitter se incrustan con estilo consciente del tema que coincide con el modo claro/oscuro de tu sitio.

Bases de Obsidian

Puedes incrustar bases con la sintaxis de directiva base:

Al agregar un limit bajo views puedes limitar el número de elementos que aparecen.

Esta es la sintaxis:

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

También puedes incrustar un .base como un embed de markdown:

![](bases/Home.base)

O como un embed de wikilink:

![[Home.base]]

Matemáticas

Este tema incluye soporte completo de matemáticas LaTeX usando KaTeX para renderizado rápido del lado del cliente. Todas las matemáticas funcionan perfectamente tanto en temas claros como oscuros.

Matemáticas en Línea

Usa signos de dólar simples para matemáticas en línea: $E = mc^2$ o $\int_0^{2\pi} d\theta x+e^{-i\theta}$.

Matemáticas de Visualización

Usa signos de dólar dobles para matemáticas centradas de visualización:

Notación Matemática Común

Fracciones y Superíndices

• Fracciones: $\frac{a}{b}$, $\frac{x^2 + 1}{x - 1}$
• Superíndices: $x^2$, $e^{i\pi} + 1 = 0$
• Subíndices: $x_1$, $H_2O$

Letras Griegas

• $\alpha, \beta, \gamma, \delta, \epsilon, \theta, \lambda, \mu, \pi, \sigma, \phi, \omega$
• $\Gamma, \Delta, \Theta, \Lambda, \Pi, \Sigma, \Phi, \Omega$

Símbolos Matemáticos

• Sumatoria: $\sum_{i=1}^{n} x_i$
• Producto: $\prod_{i=1}^{n} x_i$
• Integral: $\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$
• Límite: $\lim_{x \to 0} \frac{\sin x}{x} = 1$

Matrices y Vectores

Ecuaciones Complejas

Matemáticas en Callouts

Las matemáticas funcionan perfectamente dentro de los callouts:

Tipografía Matemática Avanzada

Ecuaciones Alineadas

Casos y Funciones por Partes

Notación de Conjuntos

• Números naturales: $\mathbb{N} = \{1, 2, 3, \ldots\}$
• Números reales: $\mathbb{R}$
• Números complejos: $\mathbb{C}$
• Unión de conjuntos: $A \cup B$
• Intersección de conjuntos: $A \cap B$
• Subconjunto: $A \subseteq B$

Matemáticas con Texto

Puedes mezclar matemáticas con texto regular de forma fluida. Por ejemplo, la fórmula cuadrática es $x = \frac{1}{2}$, que nos da las raíces de cualquier ecuación cuadrática $ax^2 + bx + c = 0$.

Compatibilidad con Obsidian

Toda la notación matemática funciona idénticamente en Obsidian y en tu blog publicado:

• Matemáticas en línea: sintaxis $...$
• Matemáticas de visualización: sintaxis $$...$$
• Comandos LaTeX: Soporte completo para comandos matemáticos LaTeX estándar
• Letras griegas: Usa \alpha, \beta, etc.
• Símbolos: Usa \sum, \int, \infty, etc.

Diagramas

Esta sección reproduce algunos ejemplos de diagramas de Mermaid por conveniencia.

Diagrama de Flujo

graph TD
    A[Inicio] --> B{¿Lo es?}
    B -->|Sí| C[OK]
    C --> D[Repensar]
    D --> B
    B ---->|No| E[Fin]

Diagrama de Secuencia

sequenceDiagram
    participant Alice
    participant Bob
    participant John
    Alice->>John: Hola John, ¿cómo estás?
    loop Chequeo de salud
        John->>John: Luchar contra la hipocondría
    end
    Note right of John: ¡Los pensamientos racionales prevalecen!
    John-->>Alice: ¡Genial!
    John->>Bob: ¿Y tú?
    Bob-->>John: ¡Muy bien!

Diagrama de Clases

classDiagram
    class Animal {
        +String nombre
        +int edad
        +hacerSonido()
    }
    class Dog {
        +String raza
        +ladrar()
    }
    class Cat {
        +String color
        +maullar()
    }
    Animal <|-- Dog
    Animal <|-- Cat

Diagrama de Estados

stateDiagram-v2
    [*] --> Quieto
    Quieto --> [*]
    Quieto --> Moviendo
    Moviendo --> Quieto
    Moviendo --> Choque
    Choque --> [*]

Diagrama Entidad-Relación

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

Viaje del Usuario

journey
    title Mi día de trabajo
    section Ir al trabajo
      Hacer té: 5: Yo
      Subir escaleras: 3: Yo
      Hacer trabajo: 1: Yo, Gato
    section Ir a casa
      Bajar escaleras: 5: Yo
      Sentarse: 5: Yo

Diagrama de Gantt

gantt
    title Un Diagrama de Gantt
    dateFormat  YYYY-MM-DD
    section Sección
    Una tarea           :a1, 2024-01-01, 30d
    Otra tarea     :after a1  , 20d
    section Otra
    Tarea en seg      :2024-01-12  , 12d
    otra tarea     : 24d

Diagrama Circular

pie title Mascotas adoptadas por voluntarios
    "Perros" : 386
    "Gatos" : 85
    "Ratas" : 15

Gráfico de Git

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

Diagrama de Flujo Complejo con Estilo

graph TD
    A[Navidad] -->|Obtener dinero| B(Ir de compras)
    B --> C{Déjame pensar}
    C -->|Uno| D[Laptop]
    C -->|Dos| E[iPhone]
    C -->|Tres| F[fa:fa-car Auto]
    D --> G[fa:fa-laptop fa:fa-code Laptop]
    E --> H[fa:fa-mobile iPhone]
    F --> I[fa:fa-car Auto]

Prueba de Manejo de Errores

Esto debería mostrar un estado de error:

graph TD
    A[Sintaxis inválida
    B --> C
    INVALID_COMMAND

Integración con el Tema

Los diagramas deberían adaptarse automáticamente al tema actual (claro/oscuro) y usar los colores del tema para una mejor integración con el diseño general.

Diseño Responsivo

Todos los diagramas deberían ser responsivos y funcionar bien en dispositivos móviles, con escalado adecuado y manejo de desbordamiento.