Markdown

rx.markdown recibe una cadena en Markdown y la dibuja como títulos, listas, enlaces, código y tablas. Sigue el Markdown al estilo GitHub (GFM) y admite también fórmulas y resaltado de sintaxis. Se usa donde el contenido viene dado como texto: avisos largos, ayudas o textos escritos por los usuarios. El hijo debe ser una sola cadena o un valor del State.

Prueba las propiedades

El aspecto de rx.markdown lo decide su contenido, así que en el banco de pruebas activamos y desactivamos los cuatro plugins que vienen encendidos por defecto. Cada interruptor cambia una parte de la frase.

En Reflex 0.10, rx.markdown siempre pone un <div> exterior, y las propiedades de estilo como padding se aplican a ese div. En cuanto a eventos, solo tiene los básicos.

Fórmulas

Lo que va entre $ se dibuja como fórmula LaTeX.

Como $ es el símbolo de las fórmulas, si en un texto aparece dos veces, lo que hay entre ambos se convierte en fórmula y el texto desaparece o se ve raro. Para mostrar un $ de verdad, como en un precio, escríbelo como \$. Cuando no conoces el contenido de antemano, como en textos de usuarios o respuestas de una IA, pásalo con content.replace("$", "\\$"). Abajo, la primera línea se rompe y la segunda se ve tal cual.

Bloques de código y tablas

Si escribes el nombre del lenguaje tras tres comillas invertidas, obtienes un bloque de código con resaltado de sintaxis. Si separas celdas con |, obtienes una tabla (GFM). En las cadenas de varias líneas, la sangría común del principio se elimina automáticamente.

Añadir plugins

Además de los plugins por defecto, puedes añadir plugins de remark (fase Markdown) y de rehype (fase HTML) con remark_plugins y rehype_plugins. Se crean con rx.markdown.plugin(paquete@versión, nombre exportado) y, si necesitan opciones, se pasan como tupla (plugin, dict de opciones).

# Atajos de emoji :smile: → emoji
rx.markdown(
    "Hello :smile:! :rocket:",
    remark_plugins=[rx.markdown.plugin("remark-emoji@5.0.2", "remarkEmoji")],
)

# Filtrar HTML no fiable con reglas seguras parecidas a las de GitHub
rx.markdown(
    'Some **bold** text and a <script>alert("XSS")</script>.',
    use_raw=True,
    rehype_plugins=[rx.markdown.plugin("rehype-sanitize@5.0.1", "rehypeSanitize")],
)

# Plugin con opciones: pone un id a los títulos y convierte cada título en un enlace a ese id
rx.markdown(
    "## Heading 2\n### Heading 3",
    rehype_plugins=[
        rx.markdown.plugin("rehype-slug@6.0.0", "rehypeSlug"),
        (
            rx.markdown.plugin("rehype-autolink-headings@7.1.0", "rehypeAutolinkHeadings"),
            {"behavior": "wrap", "properties": {"className": ["heading-link"]}},
        ),
    ],
)

Cada plugin instala un paquete npm nuevo en el frontend de la app, así que en esta página solo se muestran como código.

component_map: elegir el componente de cada elemento

Las claves de component_map son nombres de elementos Markdown (h1, p, code, pre, a …) y los valores son funciones que reciben el texto y devuelven un componente Reflex. pre (bloque de código) y a (enlace) reciben además **props, que hay que pasar tal cual: en pre va el nombre del lenguaje y en a, la dirección. Los elementos que no indiques usan el aspecto por defecto.

Completar el pedido

Si guardas el contenido en el State, rx.markdown(State.valor) se vuelve a dibujar cada vez que cambia el valor. Lo que escribas en el campo de la izquierda cambia al instante la vista previa de la derecha. Como es texto de usuarios, con use_raw=False no se interpretan las etiquetas HTML.