Kod och diagram

Syntaxfärgning

Omge ett kodblock med tre bakåtfnuttar och ange ett språk:

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

renderas med syntaxfärger, i fler än 35 språk via highlight.js, offline, och följer ljust och mörkt läge:

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

Samma sak fungerar för python, ruby, bash, json, och många fler:

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   # antal ord

Ett block utan språk förblir ofärgat. PeepMD gissar inte språket:

vanlig text förblir vanlig

Mermaid-diagram

Ange mermaid i stället för ett språk så renderas blocket som ett diagram, ritat av en inbyggd motor utan något nätverk inblandat. De fem typerna nedan visas var och en med den Markdown som skapade dem.

Flödesschema

Rutor och pilar. graph LR går från vänster till höger, graph TD uppifrån och ned.

```mermaid
graph LR
    A[Ange språk] -->|mermaid| B{Renderas?}
    B -->|ja| C[Diagram]
```

graph LR
    A[Ange språk] -->|mermaid| B{Renderas?}
    B -->|ja| C[Diagram]

Sekvens

Vem som sa vad till vem, i ordning.

```mermaid
sequenceDiagram
    participant Y as Du
    participant P as PeepMD
    Y->>P: ett mermaid-block
    P-->>Y: ett renderat diagram
```

sequenceDiagram
    participant Y as Du
    participant P as PeepMD
    Y->>P: ett mermaid-block
    P-->>Y: ett renderat diagram

Klass

Typer och deras relationer, för att dokumentera en design.

```mermaid
classDiagram
    class Document {
        +String text
        +render()
    }
    class Style {
        +String name
    }
    Document --> Style : renderas med
```

classDiagram
    class Document {
        +String text
        +render()
    }
    class Style {
        +String name
    }
    Document --> Style : renderas med

Tillstånd

Vad något gör och vad som för det mellan tillstånd.

```mermaid
stateDiagram-v2
    [*] --> Bevakar : dokumentet öppnas
    Bevakar --> Renderar : filen ändras
    Renderar --> Bevakar : förhandsvisningen uppdateras
```

stateDiagram-v2
    [*] --> Bevakar : dokumentet öppnas
    Bevakar --> Renderar : filen ändras
    Renderar --> Bevakar : förhandsvisningen uppdateras

Cirkeldiagram

Proportioner, med siffrorna utskrivna.

```mermaid
pie title Stilar som följer med
    "Inbyggda" : 12
    "Dina egna" : 3
```

pie title Stilar som följer med
    "Inbyggda" : 12
    "Dina egna" : 3

Resten av Mermaid-familjen (Gantt-scheman, entitetsrelationer, användarresor med mera) fungerar på samma sätt: ange mermaid och skriv diagrammet. Hela syntaxen finns dokumenterad på mermaid.js.org.

---

Föregående: Markdown-syntax · Innehåll · Nästa: Matematik