Saltar al contenido HtmlpressGenerador de sitios estáticos HtmlpressGenerador de sitios estáticos

Cambiar tema

Atajos de teclado

Sintaxis avanzada

Actualizado el

Bloques HTML

Una página es HTML, así que todos los elementos funcionan directamente. Algunos ejemplos habituales son <kbd> para atajos de teclado, <sup>/<sub> para superíndices y subíndices, y <details>/<summary> para acordeones. 

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy. Water is H<sub>2</sub>O.

Se renderiza como: Pulsa Ctrl + C para copiar. El agua es H2O.

Prefiere los elementos semánticos a las clases y al style en línea: el tema da estilo a los propios elementos, y eso es lo que hace que todas las páginas parezcan del mismo sitio. Para cambiar el aspecto en todo el sitio, sobrescribe un token del tema.

Renderizado de MDX

No hay lenguaje de plantillas: lo que una página necesita más allá del HTML viene de su propio <head>. Los <link>, <style> y <script> de una página se conservan y se añaden al head del layout, después del tema: 

<title>Version</title>
<script type="module">
  document.querySelector("#version").textContent = "2.0.0"
</script>

<h1>Version</h1>
<p>The current version is <strong id="version"></strong>.</p>
 
---
title: Version
---

<script type="module">
  document.querySelector("#version").textContent = "2.0.0"
</script>

# Version

The current version is <strong id="version"></strong>.

Es una vía de escape para casos de uso avanzados. Para marcado compartido entre páginas, usa un componente del proyecto.

Expresiones LaTeX

El LaTeX entre signos de dólar se renderiza a MathML al compilar, que los navegadores dibujan de forma nativa, sin script ni fuente web. Un dólar simple es en línea, y un dólar doble, un bloque centrado: 

<p>Inline: $E = mc^2$, with $x$, $\alpha$ or $\sum_{i=1}^{n} i$.</p>
<p>$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$</p>
 
Inline: $E = mc^2$, with $x$, $\alpha$ or $\sum_{i=1}^{n} i$.

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Se renderiza como:

En línea: E=mc2E = mc^2, con xx, α\alpha o ∑i=1ni\sum_{i=1}^{n} i.

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

f(x)=1σ2πe−(x−μ)22σ2f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}

Matrices y ecuaciones alineadas:

(abcd)(xy)=(ax+bycx+dy)\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

Un signo de dólar solo es matemáticas alrededor de algo que lo parece: el de apertura va seguido de un carácter que no es un espacio, y el de cierre sigue a un carácter que no es un espacio y no va seguido de un dígito. Así, los precios, como en "cuesta $5 y $10", se quedan como texto, y \$ es siempre un signo de dólar normal. Un par $$ debe estar dentro de un mismo elemento. El código, los enlaces y los elementos data-literal no se tocan.

<htmlpress-math> escribe lo mismo sin dólares; display lo convierte en un bloque: 

<htmlpress-math display>a^2 + b^2 = c^2</htmlpress-math>
 
$$
a^2 + b^2 = c^2
$$
 a2+b2=c2a^2 + b^2 = c^2

Un LaTeX no válido hace fallar la compilación con el mensaje del analizador. La copia en Markdown de la página conserva el código fuente $…$. Una página puede seguir escribiendo MathML a mano.

Diagramas Mermaid

Un bloque <pre><code class="language-mermaid"> contiene código fuente de Mermaid, dibujado en el tema actual y redibujado cuando cambia el tema. Escapa < y & en el código fuente. La biblioteca se carga desde jsDelivr solo en las páginas que tienen un diagrama; sin conexión, se muestra el código fuente en su lugar. 

<pre><code class="language-mermaid">flowchart LR
  pages[HTML pages] --&gt; build[htmlpress build] --&gt; site[Static site]</code></pre>
 
```mermaid
flowchart LR
  pages[HTML pages] --> build[htmlpress build] --> site[Static site]
```

Se renderiza como:

flowchart LR
  pages[HTML pages] --> build[htmlpress build] --> site[Static site]
 
<pre><code class="language-mermaid">pie title Languages
  "Rust" : 45
  "TypeScript" : 30
  "Python" : 15
  "Other" : 10</code></pre>
 
```mermaid
pie title Languages
  "Rust" : 45
  "TypeScript" : 30
  "Python" : 15
  "Other" : 10
```

Se renderiza como:

pie title Languages
  "Rust" : 45
  "TypeScript" : 30
  "Python" : 15
  "Other" : 10

Documentos incluidos

Un componente del proyecto comparte marcado entre páginas. Un archivo en .htmlpress/components/<name>/<name>.html rellena cada <htmlpress-<name>> de cada página al compilar:

  • .htmlpress
    • components
      • disclaimer
        • disclaimer.html
        • disclaimer.css
  • guide.html
 
<!-- .htmlpress/components/disclaimer/disclaimer.html -->
<aside><p>Provided as-is, without warranty.</p></aside>

<!-- guide.html -->
<htmlpress-disclaimer></htmlpress-disclaimer>
 
<!-- .htmlpress/components/disclaimer/disclaimer.html -->
<aside><p>Provided as-is, without warranty.</p></aside>

<!-- guide.md -->
::disclaimer
  • Su .css y su .js se cargan solo en las páginas donde aparece la etiqueta; la etiqueta se mantiene alrededor del marcado insertado, así que su CSS se limita a la etiqueta, @scope (htmlpress-disclaimer).
  • La carpeta es la etiqueta sin su prefijo htmlpress-, igual que la de un componente integrado: una carpeta con el nombre de un componente integrado, como tabs, lo sustituye.

Consulta Sobrescritura/Escape para ver todos los archivos bajo .htmlpress/.

<htmlpress-include src="…"> inserta otro archivo por su ruta, relativa a la página (o al proyecto con una / inicial): el cuerpo de un archivo .html, un archivo .md renderizado (sin su frontmatter), o cualquier otro archivo como un bloque de código titulado con su nombre y resaltado según su extensión. 

<htmlpress-include src="../includes/disclaimer.md"></htmlpress-include>
 
::include{file="../includes/disclaimer.md"}

Se renderiza como:

Disclaimer. Htmlpress is provided as-is, without warranty. This note lives in rust/docs/includes/disclaimer.md and is included, not copied, into this page.

Un archivo de código acepta los atributos de los bloques de código, como data-lines, data-line-numbers o data-title, que sustituye al nombre del archivo: 

<htmlpress-include src="../includes/build.ts" data-lines="3"></htmlpress-include>
 
<htmlpress-include src="../includes/build.ts" data-lines="3"></htmlpress-include>

Se renderiza como:

build.ts
import { build } from "htmlpress"

const report = await build("docs")
console.log(`built ${report.pages} pages`)
  • Las inclusiones se anidan hasta cinco niveles, y una página expande como máximo 1000 de ellas o 16 MB. Un archivo que no existe, un ciclo, o una ruta que sale del proyecto o nombra un archivo que empieza por punto, node_modules o .htmlpress, hace fallar la compilación: un archivo incluido se publica.
  • Deja los parciales fuera del sitio con exclude, como hace este sitio con exclude: rust/docs/includes/**; de lo contrario, un parcial .html sería también una página.
  • El enlace "Editar esta página" y la fecha de actualización siguen siendo los de la página; editar un archivo incluido recompila la página con htmlpress start.

Hecho con ❤ y Htmlpress

Acciones

Editar en GitHubVer como Markdown

Contenido