Language	Year	Typing
TypeScript	2012	Static

` es una pestaña, con el nombre de su `title`: **HTML** ```html

console.log("hello")

print("hello")

``` **Markdown** ````md ```js tab="JavaScript" sync="lang" console.log("hello") ``` ```python tab="Python" print("hello") ``` ```` Se renderiza como: **JavaScript** ``` console.log("hello") ``` **Python** ``` print("hello") ``` Añade `sync="key"` para mantener sincronizados los grupos de pestañas, como se describe más abajo en Pestañas de contenido. ## Pestañas de contenido Agrupa contenido arbitrario en pestañas con ``, una `` por pestaña. Añade un atributo `sync` para sincronizar la selección de pestañas entre grupos de pestañas. Cuando un lector selecciona una pestaña en un grupo, todos los demás grupos con la misma clave `sync` cambian a la pestaña correspondiente, y la elección se recuerda entre páginas en `localStorage`. **HTML** ```html

From crates.io, built on your machine.

A prebuilt binary per platform.

A binary wheel.

``` **Markdown** ```md :::tab{title="cargo" sync="channel"} From crates.io, built on your machine. ::: :::tab{title="npm"} A prebuilt binary per platform. ::: :::tab{title="pip"} A binary wheel. ::: ``` Se renderiza como (ambos grupos comparten `sync="channel"`; cambia uno): **cargo** ```sh cargo install htmlpress ``` **npm** ``` npm install -g gethtmlpress ``` **pip** ```sh pip install htmlpress ``` **cargo** Desde crates.io, compilado en tu máquina. **npm** Un binario precompilado por plataforma. **pip** Un wheel binario. ## Pasos Un encabezado con `data-step` es un paso numerado, y los pasos se cuentan a lo largo de la página; su contenido lo sigue como siempre. Esos encabezados quedan fuera de la tabla de contenidos de la página. **HTML** ```html

Install

…

Write a page

…

``` **Markdown** ```md ### Install [step] … ### Write a page [step] … ``` Se renderiza como: ### Instala Elige un canal en las pestañas de arriba. ### Escribe una página Cualquier archivo `.html` de la carpeta. ### Arranca Ejecuta `htmlpress start` y abre la URL que muestra. ## Tarjetas Las tarjetas en `` llenan dos columnas, una sola en pantallas estrechas. El `title` de una tarjeta es su encabezado, un `href` hace clicable toda la tarjeta, un `icon` se muestra antes del título en el color de acento, y su contenido es el cuerpo de la tarjeta. **HTML** ```html

Learn how to set up your first project.

…

``` **Markdown** ```md :::card{title="Getting Started" href="/introduction/" icon="rocket"} Learn how to set up your first project. ::: :::card{title="Plain HTML"} … ::: ``` Se renderiza como: ### [Primeros pasos](/es/introduction/) Aprende a configurar tu primer proyecto. ### [Configuración](/es/customization/configuration-file/) Configura tu proyecto de htmlpress. ### [GitHub](https://github.com/datisthq/htmlpress) Consulta el código fuente en GitHub. ### HTML simple Una tarjeta sin enlace no es clicable. Los encabezados dentro de una tarjeta quedan fuera de la tabla de contenidos de la página. ## Insignias Una etiqueta en línea. `variant` es `secondary` u `outline` para un estilo más sobrio, o `positive`, `warning` o `destructive` para un tono; sin él, el color de acento. **HTML** ```html New Stable ``` **Markdown** ```md :badge[New] :badge[Stable]{variant="positive"} ``` Se renderiza como: Nuevo Secundaria Estable Beta Eliminado Contorno ## Botones `` es una llamada a la acción que enlaza a su `href`. `variant` es `secondary`, `outline`, `ghost` o `link` para uno más discreto, y `positive`, `warning` o `destructive` para uno con tono; `size` es `sm` o `lg`. **HTML** ```html ``` **Markdown** ```md ::button[Get Started]{href="/introduction/"} ::button[GitHub]{href="…" variant="secondary"} ``` Se renderiza como: [Empezar](/es/introduction/) [GitHub](https://github.com/datisthq/htmlpress) [Contorno](#botones) [Enlace](#botones) ## Iconos `` dibuja en línea un icono integrado de [Lucide](https://lucide.dev), con el color y el tamaño del texto; los mismos nombres van en el `icon` de un enlace o de una sección. Un nombre desconocido hace fallar la compilación. Estos son los 114 integrados: **HTML** ```html Get started ``` **Markdown** ```md :icon{name="rocket"} Get started ``` activity archive arrow-right badge-check bell blocks book book-marked book-open book-text bookmark bot box braces brain bug calendar chart-column check circle-help clock cloud cloud-upload code codepen coffee compass cpu database download external-link feather figma file file-code file-pen-line file-text flag flask-conical folder git-branch git-commit-horizontal git-pull-request github gitlab globe graduation-cap hammer heading heart heart-handshake history house image info key layers layout-grid layout-panel-left library life-buoy lightbulb link linkedin list lock mail map megaphone message-circle monitor newspaper notebook-pen package palette pencil pencil-ruler play plug presentation puzzle rocket route rss scale scroll search server settings shield sliders-horizontal smartphone sparkles square-dashed square-stack star table tag terminal triangle trophy twitter type upload user users video webhook wind workflow wrench x youtube zap ## Árbol de archivos Una lista anidada dentro de ``; un elemento que contiene una lista es una carpeta. **HTML** ```html

docs
- index.html
htmlpress.yaml

``` **Markdown** ```md :::filetree - docs - index.html - htmlpress.yaml ::: ``` Se renderiza como: - docs - index.html - guides - build.html - htmlpress.yaml ## Columnas `` coloca sus hijos uno junto a otro, dos por defecto y hasta cuatro con `cols`, cada `` una columna: **HTML** ```html

Left column with content.

Right column with more content.

``` **Markdown** ```md :::column **Left column** with content. ::: :::column **Right column** with more content. ::: ``` Se renderiza como: **Columna izquierda** con contenido, incluidas listas: - Elemento uno - Elemento dos **Columna derecha** con más contenido: > Una cita también funciona aquí. ## Tokens del tema Los colores, las fuentes y los anchos son propiedades personalizadas de CSS en `:root`, con un conjunto oscuro bajo `prefers-color-scheme` o el selector de tema de la cabecera: `--htmlpress-accent`, `--htmlpress-accent-text`, `--htmlpress-banner`, `--htmlpress-banner-text`, `--htmlpress-highlight`, `--htmlpress-highlight-text`, `--htmlpress-bg`, `--htmlpress-surface`, `--htmlpress-text`, `--htmlpress-muted`, `--htmlpress-border`, `--htmlpress-info`, `--htmlpress-success`, `--htmlpress-warning`, `--htmlpress-danger`, `--htmlpress-font`, `--htmlpress-mono`, `--htmlpress-radius`, `--htmlpress-shadow`, `--htmlpress-width` y `--htmlpress-nav-width`. Sobrescríbelas desde la hoja de estilos propia de una página: ``` :root { --htmlpress-accent: oklch(0.6 0.18 30); --htmlpress-font: "Inter", system-ui, sans-serif; --htmlpress-width: 52rem; } ``` ## Layout El layout es HTML simple. Htmlpress rellena su `` (charset, viewport, título, descripción, etiquetas de vista previa social, enlace canónico, favicon, el tema, los estilos y scripts de los componentes que usa la página, las etiquetas `head` de `htmlpress.yaml` y, por último, las etiquetas de head propias de la página) y sustituye estos elementos al compilar: - `` El contenido de la página. - `` El título del sitio con la `description` debajo, después del `logo` si está definido, enlazando al inicio. - `` El `banner` de `htmlpress.yaml`. - `` El inicio, cada carpeta por encima de la página (con el nombre y el enlace de su página índice cuando la tiene) y, por último, la página. - `` Las páginas de la sección abierta (todas las páginas si no hay `sections`), agrupadas por carpeta superior bajo una etiqueta "Artículos" ("Entradas" en un blog, "Versiones" en un changelog); el grupo de una carpeta lleva el nombre de su página índice y enlaza a ella. Las secciones de la barra lateral la abren y los `links` de la barra lateral la cierran, bajo "Enlaces". - `` Las secciones de la cabecera, con la abierta marcada, y después los `links` de la cabecera de `htmlpress.yaml`. - `` Los `

` y `

` de la página, resaltando el que está a la vista. Un encabezado sin `id` recibe uno a partir de su texto. - `` Las páginas anterior y siguiente en el orden de la navegación. - `` Un enlace "Editar esta página" a partir de `edit` en `htmlpress.yaml`. - `` Búsqueda en todas las páginas, con el script: un botón en la cabecera, que también se abre con `S`, `/` o `⌘K` / `Ctrl K`. La compilación escribe el índice en `_htmlpress/search.json`, dividido en los encabezados de cada página, y el diálogo lo carga la primera vez que se abre. Coincide cualquier palabra de la consulta, como inicio de palabra o con una errata; un resultado abre su página con `?highlight=` y la consulta, cuyas coincidencias se pintan con `--htmlpress-highlight` y se desplazan a la vista. Por debajo de 56rem el campo ocupa la cabecera en lugar de un diálogo. - `` Un enlace a la copia en Markdown de la página; el script añade "Copiar Markdown", "Abrir en ChatGPT" y "Abrir en Claude". - `` Un crédito "Hecho con Htmlpress". - `` El selector de idioma, que enlaza a esta página en cada idioma, como menú desplegable o, en un móvil, en una hoja; solo en un sitio con [traducciones](/es/customization/translations/). - `` Un menú de la cabecera con los atajos de teclado, con el script, que lista todas las teclas y desactiva las que la página no atiende, como `L` sin página siguiente; una fila también pulsa su tecla. Oculto por debajo de 56rem, donde no hay teclado. - `` El enlace "Saltar al contenido", que solo se muestra al recibir el foco. Cada texto que muestran estos elementos y sus scripts aparece en el idioma de la página. Los scripts leen los suyos de un `