Código y diagramas

Coloreado de sintaxis

Delimita un bloque de código con tres comillas invertidas y una etiqueta de lenguaje:

```swift
struct Greeter {
    let name: String
    func greet() -> String { "Hola, \(name)!" }
}
```

se muestra con colores de sintaxis, en más de 35 lenguajes gracias a highlight.js, sin conexión y siguiendo el modo claro y el oscuro:

struct Greeter {
    let name: String
    func greet() -> String { "Hola, \(name)!" }
}

Lo mismo funciona con python, ruby, bash, json y compañía:

def fib(n: int) -> int:
    return n if n < 2 else fib(n - 1) + fib(n - 2)

for f in *.md; do wc -w "$f"; done   # recuento de palabras

Un bloque sin etiqueta de lenguaje se queda sin colores. PeepMD no adivina el lenguaje:

el texto plano sigue siendo plano

Diagramas Mermaid

Etiqueta el bloque como mermaid en lugar de con un lenguaje y se renderiza como un diagrama, dibujado por un motor incluido en la app, sin red de por medio. Los cinco tipos de abajo aparecen cada uno con el Markdown que los produjo.

Diagrama de flujo

Cajas y flechas. graph LR va de izquierda a derecha, graph TD de arriba abajo.

```mermaid
graph LR
    A[Etiqueta un bloque] -->|mermaid| B{¿Se renderiza?}
    B -->|sí| C[Diagrama]
```

graph LR
    A[Etiqueta un bloque] -->|mermaid| B{¿Se renderiza?}
    B -->|sí| C[Diagrama]

Secuencia

Quién dijo qué a quién, en orden.

```mermaid
sequenceDiagram
    participant T as Tú
    participant P as PeepMD
    T->>P: un bloque mermaid
    P-->>T: un diagrama renderizado
```

sequenceDiagram
    participant T as Tú
    participant P as PeepMD
    T->>P: un bloque mermaid
    P-->>T: un diagrama renderizado

Clases

Tipos y sus relaciones, para documentar un diseño.

```mermaid
classDiagram
    class Document {
        +String text
        +render()
    }
    class Style {
        +String name
    }
    Document --> Style : se renderiza con
```

classDiagram
    class Document {
        +String text
        +render()
    }
    class Style {
        +String name
    }
    Document --> Style : se renderiza con

Estados

Lo que hace una cosa y lo que la lleva de un estado a otro.

```mermaid
stateDiagram-v2
    [*] --> Vigilando : documento abierto
    Vigilando --> Renderizando : archivo cambiado
    Renderizando --> Vigilando : vista previa actualizada
```

stateDiagram-v2
    [*] --> Vigilando : documento abierto
    Vigilando --> Renderizando : archivo cambiado
    Renderizando --> Vigilando : vista previa actualizada

Tarta

Proporciones, con los números escritos tal cual.

```mermaid
pie title Estilos incluidos
    "Integrados" : 12
    "Los tuyos" : 3
```

pie title Estilos incluidos
    "Integrados" : 12
    "Los tuyos" : 3

El resto de la familia Mermaid (diagramas de Gantt, de entidad-relación, de recorrido del usuario y más) funciona igual: etiqueta el bloque como mermaid y escribe el diagrama. La sintaxis completa está documentada en mermaid.js.org.

---

Anterior: Sintaxis Markdown · Índice · Siguiente: Matemáticas