# Markdown

> Muestra Markdown con los colores del tema. Un componente nativo de Pyzed para GUIs de escritorio en Python, con vista previa, ejemplos y su API.

Source: https://albakore.github.io/pyzed/es/library/markdown/

:::tip[En pocas palabras]
Muestra texto con formato (títulos, listas, enlaces) escrito en el formato sencillo Markdown.
:::

Muestra Markdown (títulos, listas, bloques de código, citas, tablas, enlaces) con los colores de texto, enlace y código del tema. `on_link(url)` recibe los enlaces pulsados. `pz.markdown` es el widget base con colores explícitos.

`ui.markdown` · Categoría: [Código y herramientas](https://albakore.github.io/pyzed/es/library/#código-y-herramientas) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#markdown)

**Código:**

```python
ui.markdown('''## Release notes

Pyzed **0.4** adds the *component designer*, `pyzed build` and [styles](https://iced.rs).

- Track grids and flex
- Ready-made dialogs
''', width=460, on_link=on_link)
```

## Cuándo usarlo

- Para READMEs, notas de versión, páginas de ayuda y mensajes de chat.

## Uso

```python
from pyzed import ui

ui.markdown('''## Release notes

Pyzed **0.4** adds the *component designer*, `pyzed build` and [styles](https://iced.rs).

- Track grids and flex
- Ready-made dialogs
''', width=460, on_link=on_link)
```

## Variantes

:::note[Sobre estas capturas]
Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre **Código** bajo una captura para ver el fragmento que la dibuja; los nombres libres como `on_save` son tus propios callbacks.
:::

### Elementos

```python
ui.markdown("## Title\nSome **bold** and *italic* text.", width=320)
```

```python
ui.markdown("- Fast\n- Native\n- Pythonic\n\n1. Install\n2. Run", width=320)
```

```python
ui.markdown("Run `pyzed new`:\n\n```python\nimport pyzed as pz\n```", width=320)
```

```python
ui.markdown("> Desktop UIs in Python.\n\nSee [the docs](https://albakore.github.io/pyzed/).", width=320, on_link=on_link)
```

```python
ui.markdown("| Key | Action |\n| --- | --- |\n| ctrl-s | Save |\n| ctrl-p | Open |", width=320)
```

## Eventos

Markdown tiene **1 evento propios**, en la tabla de abajo. Como todo widget, también tiene los **18 eventos comunes** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), que se conectan con `.on(...)`: mira [Eventos](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

| Evento | De | El handler recibe | Cuándo |
| --- | --- | --- | --- |
| `on_link` | `ui.markdown`, `pz.markdown` | `(url)` | Callable que recibe la URL al pulsar un enlace. |

**El handler recibe** es lo que Pyzed le pasa a tu función: `()` es nada. Cualquier handler también puede ser un mensaje (un valor que no se puede llamar), que va a `update()`.

### Manejar los eventos

Los mismos eventos escritos de tres formas. **Imperativa**: métodos de la app que cambian `self`. **Declarativa**: los handlers producen mensajes y un único `update()` decide. **Funcional**: una función pura dibuja un estado inmutable y pide cambios con `set_state(...)`. Mira [Imperativo, declarativo y funcional](https://albakore.github.io/pyzed/es/guides/code-styles/).

**Imperativo:**

```python
import webbrowser

class Notes(pz.App):
    def __init__(self):
        self.last = None

    def follow(self, url):               # on_link: the URL of the clicked link
        self.last = url
        webbrowser.open(url)

    def view(self):
        return ui.markdown("Read the [docs](https://albakore.github.io/pyzed/) or the "
                           "[changelog](https://github.com/albakore/pyzed).", on_link=self.follow)
```

**Declarativo:**

```python
from dataclasses import dataclass

@dataclass
class Link:
    url: str

class Notes(pz.App):
    def update(self, message):
        match message:
            case Link(url) if url.startswith("app:"):
                print("internal page", url[4:])   # links can drive the app, too
            case Link(url):
                print("open", url)

    def view(self):
        return ui.markdown("Go to [settings](app:settings) or the [docs](https://albakore.github.io/pyzed/).",
                           on_link=Link)
```

**Funcional:**

```python
from dataclasses import dataclass

@dataclass(frozen=True)
class State:
    page: str = "home"

PAGES = {"home": "Welcome. See [about](about).", "about": "Made with Pyzed. Back [home](home)."}

def view(state, set_state):
    text = PAGES.get(state.page, "Not found. Back [home](home).")
    return ui.markdown(text, on_link=lambda url: set_state(page=url))
```

## Propiedades y API

### `ui.markdown`

```python
markdown(source, *, size=None, on_link=None, width=None, selectable=None, theme=None)
```

`pz.markdown` con los colores de texto, enlaces y código del tema.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `source` | *obligatorio* | El texto Markdown. |
| `size` | `None` | Tamaño. |
| `width` | `None` | Ancho: píxeles, `"fill"`, `"shrink"` o `"fill:N"` (proporción). |
| `selectable` | `None` | Igual que en `pz.markdown`; la selección usa el color `selection` del tema. |
| `theme` | `None` | Tema a usar en lugar del actual (`pyzed.theme.current()`). |

Eventos: `on_link` ([eventos](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#markdown)

### `pz.markdown`

```python
markdown(
    source,
    *,
    size=14.0,
    color=None,
    link_color=None,
    code_color=None,
    code_bg=None,
    on_link=None,
    width=None,
    selectable=None,
    selection_color=None,
)
```

Renderiza Markdown (títulos, listas, bloques de código, citas, tablas, enlaces…). Para los colores del tema usa `ui.markdown`.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `source` | *obligatorio* | El texto Markdown. |
| `size` | `14.0` | Tamaño. |
| `color` | `None` | Color del texto o del icono. |
| `link_color` | `None` | Color de los enlaces. |
| `code_color` | `None` | Color del código. |
| `code_bg` | `None` | Fondo del código. |
| `width` | `None` | Ancho: píxeles, `"fill"`, `"shrink"` o `"fill:N"` (proporción). |
| `selectable` | `None` | `True` deja seleccionar el texto con el ratón (arrastrar, doble clic en una palabra, triple clic en un bloque) y copiarlo con Ctrl+C. Una cadena nombra un grupo de selección: los textos y el Markdown de un mismo grupo forman una sola selección, en el orden en que se dibujan (las líneas de un log, los mensajes de un chat). |
| `selection_color` | `None` | Color detrás del texto seleccionado. |

Eventos: `on_link` ([eventos](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#markdown)

## Relacionados

- [Texto enriquecido](https://albakore.github.io/pyzed/es/library/rich-text/): Un bloque de texto que mezcla colores, pesos y enlaces.
- [Texto](https://albakore.github.io/pyzed/es/library/text/): Un texto con tamaño, color, fuente y peso.