Markdown Preview

ZetoPad includes a rich Markdown preview for documentation and notes.

Enabling Preview

1. Open a Markdown snippet (.md extension or set language to Markdown)
2. Click the eye icon (👁) in the toolbar
3. Or press Cmd+Shift+P to toggle preview

Preview Modes

Side-by-Side

View the editor and preview simultaneously, split horizontally.

Preview Only

Hide the editor and show only the rendered preview.

Supported Markdown Features

Basic Formatting

**Bold text**
*Italic text*
~~Strikethrough~~
`inline code`

Headers

# Heading 1
## Heading 2
### Heading 3

Lists

- Unordered item
- Another item
  - Nested item

1. Ordered item
2. Second item

Code Blocks

```python
def hello():
    print("Hello, World!")
```

Code blocks have syntax highlighting matching the editor.

Tables

| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

Links and Images

[Link text](https://example.com)
![Alt text](image.png)

Blockquotes

> This is a quote
> It can span multiple lines

Task Lists

- [x] Completed task
- [ ] Pending task

Mermaid Diagrams

ZetoPad renders Mermaid diagrams inline:

Flowchart

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
    C --> E[End]
    D --> E
```

Sequence Diagram

```mermaid
sequenceDiagram
    Client->>Server: Request
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>Client: Response
```

Class Diagram

```mermaid
classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +name
    Animal : +speak()
```

State Diagram

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: start
    Processing --> Done: complete
    Done --> [*]
```

Live Preview

The preview updates in real-time as you type, making it easy to see your changes immediately.

Styling

The preview uses your current theme colors for:

• Background
• Text
• Code blocks
• Links
• Headings

This ensures consistency with your editor appearance.