✨ feat: add Mermaid diagram support (#370)
This commit is contained in:
Óscar
GitHub
parent
13d305ac1a
commit
a7e78b29ab
@ -44,6 +44,7 @@ tabi has a perfect score on Google's Lighthouse audit:
|
||||
- [X] [Comprehensive multi-language support](https://welpo.github.io/tabi/blog/faq-languages/#how-does-tabi-handle-multilingual-support). Add as many languages as you wish.
|
||||
- [X] Support for [comments using giscus, utterances, Hyvor Talk, or Isso](https://welpo.github.io/tabi/blog/comments/).
|
||||
- [X] Code syntax highlighting with colours based on [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé.
|
||||
- [X] [Mermaid support](https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams) to create diagrams and charts with text.
|
||||
- [X] [Local search](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search) with an accessible, multi-lingual interface.
|
||||
- [X] [Custom Twitter card](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards) and automatic Open Graph tags.
|
||||
- [X] [KaTeX](https://katex.org/) support for mathematical notation.
|
||||
|
||||
10
config.toml
10
config.toml
@ -162,6 +162,16 @@ footnote_backlinks = false
|
||||
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
|
||||
katex = false
|
||||
|
||||
# Enable Mermaid diagrams for all posts.
|
||||
# Loads ~2.5MB of JavaScript.
|
||||
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
|
||||
mermaid = false
|
||||
|
||||
# Serve Mermaid JavaScript locally. Version bundled with tabi.
|
||||
# If set to false, it will load the latest version from JSDelivr.
|
||||
# Only relevant when `mermaid = true`.
|
||||
serve_local_mermaid = true
|
||||
|
||||
# Show links to previous and next articles at the bottom of posts.
|
||||
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
|
||||
show_previous_next_article_links = false
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Sense JavaScript obligatori"
|
||||
date = 2023-01-06
|
||||
updated = 2024-07-01
|
||||
updated = 2024-08-28
|
||||
description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
|
||||
|
||||
[taxonomies]
|
||||
@ -26,6 +26,7 @@ Aquest tema no requereix JavaScript obligatori. Opcionalment, pot carregar una q
|
||||
Les següents opcions es poden especificar per a publicacions, seccions i globalment, seguint la jerarquia de `pàgina > secció > config.toml`:
|
||||
|
||||
- [**Suport de KaTeX**](@/blog/markdown/index.ca.md#katex). Habilitat configurant `katex = true` (274 KB).
|
||||
- [**Diagrames de Mermaid**](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid). Habilitat configurant `mermaid = true` (~2.5 MB).
|
||||
- [**Còpia de blocs de codi amb un sol clic**](@/blog/markdown/index.ca.md#bloc-de-codi). Habilitada configurant `copy_button = true`. (~700 bytes)
|
||||
- [**Mostrar ruta/URL a blocs de codi**](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url). S'activa configurant `add_src_to_code_block = true`. (~400 bytes)
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Sin JavaScript obligatorio"
|
||||
date = 2023-01-06
|
||||
updated = 2024-07-01
|
||||
updated = 2024-08-28
|
||||
description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
|
||||
|
||||
[taxonomies]
|
||||
@ -26,6 +26,7 @@ Este tema no requiere JavaScript de manera obligatoria. Opcionalmente, puede car
|
||||
Las siguientes opciones pueden especificarse para publicaciones, secciones y a nivel global, siguiendo la jerarquía de `página > sección > config.toml`:
|
||||
|
||||
- [**Soporte de KaTeX**](@/blog/markdown/index.es.md#katex). Habilitado al configurar `katex = true` (274 KB).
|
||||
- [**Diagramas de Mermaid**](@/blog/shortcodes/index.es.md#diagramas-de-mermaid). Habilitado al configurar `mermaid = true` (~2.5 MB).
|
||||
- [**Copia de bloques de código con un solo clic**](@/blog/markdown/index.es.md#bloque-de-codigo). Habilitado al configurar `copy_button = true` (~700 bytes).
|
||||
- [**Mostrar ruta/URL en bloques de código**](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url). Se activa configurando `add_src_to_code_block = true`. (~400 bytes)
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "No mandatory JavaScript"
|
||||
date = 2023-01-06
|
||||
updated = 2024-07-01
|
||||
updated = 2024-08-28
|
||||
description = "JavaScript is only used when HTML and CSS aren't enough."
|
||||
|
||||
[taxonomies]
|
||||
@ -26,6 +26,7 @@ This theme has no mandatory JavaScript. Optionally, it can load a minimal amount
|
||||
The following settings can be specified for posts, sections and globally, following the hierarchy of `page > section > config.toml`:
|
||||
|
||||
- [**KaTeX support**](@/blog/markdown/index.md#katex). Enabled by setting `katex = true` (274 KB).
|
||||
- [**Mermaid diagrams**](@/blog/shortcodes/index.md#mermaid-diagrams). Enabled by setting `mermaid = true` (~2.5 MB).
|
||||
- [**One-click copy of code blocks**](@/blog/markdown/index.md#code-block). Enabled by setting `copy_button = true`. (~700 bytes)
|
||||
- [**Showing source (path or URL) in code blocks**](@/blog/shortcodes/index.md#show-source-or-path). Enabled by setting `add_src_to_code_block = true`. (~300 bytes)
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Domina la configuració de tabi: guia completa"
|
||||
date = 2023-09-18
|
||||
updated = 2024-08-13
|
||||
updated = 2024-08-28
|
||||
description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
|
||||
|
||||
[taxonomies]
|
||||
@ -576,6 +576,18 @@ Estableix `add_src_to_code_block = true` per habilitar l'ús del [shortcode `add
|
||||
|
||||
KaTeX és una biblioteca JavaScript ràpida i fàcil d'usar per a la representació de matemàtiques TeX a la web. Pots habilitar-ho amb `katex = true`. Mira com es veu en tabi [aquí](/ca/blog/markdown/#katex).
|
||||
|
||||
### Suport per a Mermaid
|
||||
|
||||
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|
||||
|:------:|:------:|:-------------:|:-----------------:|:--------------------:|
|
||||
| ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) és una eina de diagramació i gràfics basada en JavaScript. Pots activar-la amb `mermaid = true`.
|
||||
|
||||
Per defecte, la biblioteca Mermaid es serveix localment. Si prefereixes utilitzar un CDN, estableix `serve_local_mermaid = false` a `config.toml`. L'ús d'un CDN servirà la versió més recent de Mermaid; l'opció local servirà la versió inclosa amb tabi.
|
||||
|
||||
Consulta la [documentació de Mermaid](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid) per a instruccions d'ús i exemples.
|
||||
|
||||
### Subconjunt de tipus de lletra personalitzat
|
||||
|
||||
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Domina la configuración de tabi: guía completa"
|
||||
date = 2023-09-18
|
||||
updated = 2024-08-13
|
||||
updated = 2024-08-28
|
||||
description = "Descubre las múltiples maneras en que puedes personalizar tabi."
|
||||
|
||||
[taxonomies]
|
||||
@ -576,6 +576,18 @@ Establece `add_src_to_code_block = true` para habilitar el uso del [shortcode `a
|
||||
|
||||
KaTeX es una biblioteca JavaScript rápida y fácil de usar para la representación de matemáticas TeX en la web. Puedes habilitarlo con `katex = true`. Mira cómo se ve en tabi [aquí](/es/blog/markdown/#katex).
|
||||
|
||||
### Soporte para Mermaid
|
||||
|
||||
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|
||||
|:------:|:-------:|:-------------:|:----------------:|:-------------------:|
|
||||
| ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) es una herramienta de diagramación y gráficos basada en JavaScript. Puedes activarla con `mermaid = true`.
|
||||
|
||||
Por defecto, la biblioteca Mermaid se sirve localmente. Si prefieres usar un CDN, establece `serve_local_mermaid = false` en `config.toml`. El uso de un CDN servirá la versión más reciente de Mermaid; la opción local servirá la versión incluida con tabi.
|
||||
|
||||
Consulta la [documentación de Mermaid](@/blog/shortcodes/index.es.md#diagramas-de-mermaid) para instrucciones de uso y ejemplos.
|
||||
|
||||
### Subconjunto de fuente personalizada
|
||||
|
||||
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Mastering tabi Settings: A Comprehensive Guide"
|
||||
date = 2023-09-18
|
||||
updated = 2024-08-13
|
||||
updated = 2024-08-28
|
||||
description = "Discover the many ways you can customise your tabi site."
|
||||
|
||||
[taxonomies]
|
||||
@ -584,6 +584,18 @@ Setting `add_src_to_code_block = true` enables the use of the [`add_src_to_code_
|
||||
|
||||
KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web. You can enable it with `katex = true`. See what it looks like in tabi [here](/blog/markdown/#katex).
|
||||
|
||||
### Mermaid Support
|
||||
|
||||
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|
||||
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
|
||||
| ✅ | ✅ | ✅ | ✅ | ✅ |
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) is a JavaScript-based diagramming and charting tool. You can enable it with `mermaid = true`.
|
||||
|
||||
By default, the Mermaid library is served locally. If you prefer to use a CDN, set `serve_local_mermaid = false` in `config.toml`. Using a CDN will serve the latest version of Mermaid; the local option will serve the version bundled with tabi.
|
||||
|
||||
See the [Mermaid documentation](@/blog/shortcodes/index.md#mermaid-diagrams) for usage instructions and examples.
|
||||
|
||||
### Custom Font Subset
|
||||
|
||||
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Seguretat per defecte"
|
||||
date = 2023-02-22
|
||||
updated = 2024-05-30
|
||||
updated = 2024-08-28
|
||||
description = "tabi té una Política de Seguretat de Contingut (CSP) fàcilment personalitzable amb valors segurs per defecte. Obtingues tranquil·litat i un A+ en l'Observatori de Mozilla."
|
||||
|
||||
[taxonomies]
|
||||
@ -34,7 +34,7 @@ Pots desactivar les capçaleres (permitint-ho tot) en una pàgina, secció, o gl
|
||||
|
||||
**Notas**:
|
||||
|
||||
- [Habilitar els comentaris](@/blog/comments/index.ca.md) o [les analítiques](@/blog/mastering-tabi-settings/index.ca.md#analisi-web) automàticament permet scripts/frames/estils/connexions en funció del servei habilitat.
|
||||
- [Habilitar els comentaris](@/blog/comments/index.ca.md), [les analítiques](@/blog/mastering-tabi-settings/index.ca.md#analisi-web), o [els diagrames de mermaid](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid) permet automàticament els scripts/frames/estils/conexions pertinents.
|
||||
- Per utilitzar un [tema de resaltat de sintaxis integrat a Zola](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), has de permetre `unsafe-inline` a la directiva `style-src`:
|
||||
|
||||
```
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Seguro por defecto"
|
||||
date = 2023-02-22
|
||||
updated = 2024-05-30
|
||||
updated = 2024-08-28
|
||||
description = "tabi tiene una Política de Seguridad de Contenido (CSP) fácilmente personalizable con configuraciones seguras. Obtén tranquilidad y una calificación de A+ en Mozilla Observatory."
|
||||
|
||||
[taxonomies]
|
||||
@ -34,7 +34,7 @@ Puedes desactivar las cabeceras (permitiendo todo) en una página, sección, o g
|
||||
|
||||
**Notas**:
|
||||
|
||||
- [Habilitar los comentarios](@/blog/comments/index.es.md) o [las analíticas](@/blog/mastering-tabi-settings/index.es.md#analisis-web) automáticamente permite scripts/frames/estilos/conexiones en función del servicio habilitado.
|
||||
- [Habilitar los comentarios](@/blog/comments/index.es.md), [las analíticas](@/blog/mastering-tabi-settings/index.es.md#analisis-web), o [los diagramas mermaid](@/blog/shortcodes/index.es.md#diagramas-de-mermaid) permite automáticamente los scripts/frames/estilos/conexiones pertinentes.
|
||||
- Para usar un [tema de resaltado de sintaxis integrado en Zola](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), has de permitir `unsafe-inline` en la directiva `style-src`:
|
||||
|
||||
```
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Secure by default"
|
||||
date = 2023-02-22
|
||||
updated = 2024-05-30
|
||||
updated = 2024-08-28
|
||||
description = "tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory."
|
||||
|
||||
[taxonomies]
|
||||
@ -34,7 +34,7 @@ You can disable the CSP (allowing all connections) on a page, section, or global
|
||||
|
||||
**Notes**:
|
||||
|
||||
- [Enabling comments](@/blog/comments/index.md) or [analytics](@/blog/mastering-tabi-settings/index.md#analytics) automatically allows scripts/frames/styles/connections as needed from the respective services.
|
||||
- [Enabling comments](@/blog/comments/index.md), [analytics](@/blog/mastering-tabi-settings/index.md#analytics), or [mermaid diagrams](@/blog/shortcodes/index.md#mermaid-diagrams) automatically allows scripts/frames/styles/connections as needed.
|
||||
- To use a [Zola built-in syntax highlighting theme](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), you need to allow `unsafe-inline` in the `style-src` directive:
|
||||
|
||||
```
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Shortcodes personalitzats"
|
||||
date = 2023-02-19
|
||||
updated = 2024-06-27
|
||||
updated = 2024-08-28
|
||||
description = "Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran."
|
||||
|
||||
[taxonomies]
|
||||
@ -12,9 +12,85 @@ toc = true
|
||||
toc_levels = 2
|
||||
quick_navigation_buttons = true
|
||||
add_src_to_code_block = true
|
||||
mermaid = true
|
||||
social_media_card = "social_cards/ca_blog_shortcodes.jpg"
|
||||
+++
|
||||
|
||||
## Shortcodes de diagrames
|
||||
|
||||
### Diagrames de Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) és una eina de diagramació i gràfics que utilitza text i codi per generar diagrames. Admet diagrames de flux, diagrames de seqüència, gràfics de Gantt i més.
|
||||
|
||||
Per incloure un diagrama Mermaid a la teva publicació, cal fer dues coses:
|
||||
|
||||
1. Estableix `mermaid = true` a la secció `[extra]` del front matter de la teva pàgina, secció o `config.toml`. Això carregarà el JavaScript necessari per renderitzar els diagrames.
|
||||
|
||||
2. Utilitza el shortcode `mermaid()` per definir el teu diagrama. Per exemple:
|
||||
|
||||
```plaintext
|
||||
{%/* mermaid() */%}
|
||||
classDiagram
|
||||
class DistorsionsCognitives {
|
||||
+PensamentTotORes()
|
||||
+Sobregeneralitzacio()
|
||||
+FiltreMental()
|
||||
+TreureConclusionsPrecipitades()
|
||||
}
|
||||
class PensamentTotORes {
|
||||
+VeureEnExtrems()
|
||||
}
|
||||
class Sobregeneralitzacio {
|
||||
+GeneralitzarDUnic()
|
||||
}
|
||||
class FiltreMental {
|
||||
+EnfocarseEnNegatiu()
|
||||
}
|
||||
class TreureConclusionsPrecipitades {
|
||||
+FerSuposicions()
|
||||
}
|
||||
DistorsionsCognitives *-- PensamentTotORes
|
||||
DistorsionsCognitives *-- Sobregeneralitzacio
|
||||
DistorsionsCognitives *-- FiltreMental
|
||||
DistorsionsCognitives *-- TreureConclusionsPrecipitades
|
||||
{%/* end */%}
|
||||
```
|
||||
|
||||
El diagrama es renderitzarà així:
|
||||
|
||||
{% mermaid() %}
|
||||
classDiagram
|
||||
class DistorsionsCognitives {
|
||||
+PensamentTotORes()
|
||||
+Sobregeneralitzacio()
|
||||
+FiltreMental()
|
||||
+TreureConclusionsPrecipitades()
|
||||
}
|
||||
class PensamentTotORes {
|
||||
+VeureEnExtrems()
|
||||
}
|
||||
class Sobregeneralitzacio {
|
||||
+GeneralitzarDUnic()
|
||||
}
|
||||
class FiltreMental {
|
||||
+EnfocarseEnNegatiu()
|
||||
}
|
||||
class TreureConclusionsPrecipitades {
|
||||
+FerSuposicions()
|
||||
}
|
||||
DistorsionsCognitives *-- PensamentTotORes
|
||||
DistorsionsCognitives *-- Sobregeneralitzacio
|
||||
DistorsionsCognitives *-- FiltreMental
|
||||
DistorsionsCognitives *-- TreureConclusionsPrecipitades
|
||||
{% end %}
|
||||
|
||||
El shortcode de Mermaid admet dos paràmetres:
|
||||
|
||||
- `invertible`: Si s'estableix a `true` (per defecte), el diagrama invertirà els seus colors en mode fosc, igual que les [imatges invertibles](#imatge-invertible).
|
||||
- `full_width`: Permet que el diagrama ocupi l'amplada de la capçalera. Mira [imatge d'amplada completa](#imatge-d-amplada-completa).
|
||||
|
||||
{{ admonition(type="tip", title="CONSELL", text="Empra l'[editor de Mermaid](https://mermaid.live/) per crear i previsualitzar els teus diagrames.") }}
|
||||
|
||||
## Shortcodes d'imatge
|
||||
|
||||
Tots els shortcodes d'imatge admeten rutes absolutes, rutes relatives, i fonts remotes en el paràmetre `src`.
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Shortcodes personalizados"
|
||||
date = 2023-02-19
|
||||
updated = 2024-06-27
|
||||
updated = 2024-08-28
|
||||
description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más."
|
||||
|
||||
[taxonomies]
|
||||
@ -12,9 +12,85 @@ toc = true
|
||||
toc_levels = 2
|
||||
quick_navigation_buttons = true
|
||||
add_src_to_code_block = true
|
||||
mermaid = true
|
||||
social_media_card = "social_cards/es_blog_shortcodes.jpg"
|
||||
+++
|
||||
|
||||
## Shortcodes de diagramas
|
||||
|
||||
### Diagramas de Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) es una herramienta de diagramación y gráficos que usa texto y código para generar diagramas. Admite diagramas de flujo, diagramas de secuencia, gráficos de Gantt y más.
|
||||
|
||||
Para incluir un diagrama Mermaid en tu publicación, sigue estos dos pasos:
|
||||
|
||||
1. Establece `mermaid = true` en la sección `[extra]` del front matter de tu página, sección o `config.toml`. Esto cargará el JavaScript necesario para renderizar los diagramas.
|
||||
|
||||
2. Usa el shortcode `mermaid()` para definir tu diagrama. Por ejemplo:
|
||||
|
||||
```plaintext
|
||||
{%/* mermaid() */%}
|
||||
classDiagram
|
||||
class DistorsionesCognitivas {
|
||||
+PensamientoTodoONada()
|
||||
+Sobregeneralizacion()
|
||||
+FiltroMental()
|
||||
+SacarConclusionesPrecipitadas()
|
||||
}
|
||||
class PensamientoTodoONada {
|
||||
+VerEnExtremos()
|
||||
}
|
||||
class Sobregeneralizacion {
|
||||
+GeneralizarDeUnicoEjemplo()
|
||||
}
|
||||
class FiltroMental {
|
||||
+EnfocarseEnNegativo()
|
||||
}
|
||||
class SacarConclusionesPrecipitadas {
|
||||
+HacerSuposiciones()
|
||||
}
|
||||
DistorsionesCognitivas *-- PensamientoTodoONada
|
||||
DistorsionesCognitivas *-- Sobregeneralizacion
|
||||
DistorsionesCognitivas *-- FiltroMental
|
||||
DistorsionesCognitivas *-- SacarConclusionesPrecipitadas
|
||||
{%/* end */%}
|
||||
```
|
||||
|
||||
El diagrama se renderizará así:
|
||||
|
||||
{% mermaid() %}
|
||||
classDiagram
|
||||
class DistorsionesCognitivas {
|
||||
+PensamientoTodoONada()
|
||||
+Sobregeneralizacion()
|
||||
+FiltroMental()
|
||||
+SacarConclusionesPrecipitadas()
|
||||
}
|
||||
class PensamientoTodoONada {
|
||||
+VerEnExtremos()
|
||||
}
|
||||
class Sobregeneralizacion {
|
||||
+GeneralizarDeUnicoEjemplo()
|
||||
}
|
||||
class FiltroMental {
|
||||
+EnfocarseEnNegativo()
|
||||
}
|
||||
class SacarConclusionesPrecipitadas {
|
||||
+HacerSuposiciones()
|
||||
}
|
||||
DistorsionesCognitivas *-- PensamientoTodoONada
|
||||
DistorsionesCognitivas *-- Sobregeneralizacion
|
||||
DistorsionesCognitivas *-- FiltroMental
|
||||
DistorsionesCognitivas *-- SacarConclusionesPrecipitadas
|
||||
{% end %}
|
||||
|
||||
El shortcode de Mermaid admite dos parámetros:
|
||||
|
||||
- `invertible`: Si se establece en `true` (por defecto), el diagrama se invertirá en modo oscuro, igual que las [imágenes invertibles](#imagen-invertible).
|
||||
- `full_width`: Permite que el diagrama ocupe el ancho del encabezado. Mira [imagen a ancho completo](#imagen-a-ancho-completo).
|
||||
|
||||
{{ admonition(type="tip", title="CONSEJO", text="Puedes usar el [editor de Mermaid](https://mermaid.live/) para crear y previsualizar tus diagramas.") }}
|
||||
|
||||
## Shortcodes de imagen
|
||||
|
||||
Todos los shortcodes de imagen admiten rutas absolutas, rutas relativas, y fuentes remotas en el parámetro `src`.
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
+++
|
||||
title = "Custom shortcodes"
|
||||
date = 2023-02-19
|
||||
updated = 2024-06-27
|
||||
updated = 2024-08-28
|
||||
description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered."
|
||||
|
||||
[taxonomies]
|
||||
@ -12,9 +12,85 @@ toc = true
|
||||
toc_levels = 2
|
||||
quick_navigation_buttons = true
|
||||
add_src_to_code_block = true
|
||||
mermaid = true
|
||||
social_media_card = "social_cards/blog_shortcodes.jpg"
|
||||
+++
|
||||
|
||||
## Diagram shortcode
|
||||
|
||||
### Mermaid diagrams
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid) is a a diagramming and charting tool that uses text and code to generate diagrams. It supports flowcharts, sequence diagrams, Gantt charts, and more.
|
||||
|
||||
To include a Mermaid diagram in your post, there are two steps:
|
||||
|
||||
1. Set `mermaid = true` in the `[extra]` section of the front matter of your page, section or `config.toml`. This will load the JavaScript needed to render the diagrams.
|
||||
|
||||
2. Use the `mermaid()` shortcode to define your diagram in your posts. For example:
|
||||
|
||||
```plaintext
|
||||
{%/* mermaid() */%}
|
||||
classDiagram
|
||||
class CognitiveDistortions {
|
||||
+AllOrNothingThinking()
|
||||
+Overgeneralization()
|
||||
+MentalFilter()
|
||||
+JumpingToConclusions()
|
||||
}
|
||||
class AllOrNothingThinking {
|
||||
+SeeInExtremes()
|
||||
}
|
||||
class Overgeneralization {
|
||||
+GeneralizeFromSingle()
|
||||
}
|
||||
class MentalFilter {
|
||||
+FocusOnNegative()
|
||||
}
|
||||
class JumpingToConclusions {
|
||||
+MakeAssumptions()
|
||||
}
|
||||
CognitiveDistortions *-- AllOrNothingThinking
|
||||
CognitiveDistortions *-- Overgeneralization
|
||||
CognitiveDistortions *-- MentalFilter
|
||||
CognitiveDistortions *-- JumpingToConclusions
|
||||
{%/* end */%}
|
||||
```
|
||||
|
||||
The diagram will be rendered as follows:
|
||||
|
||||
{% mermaid() %}
|
||||
classDiagram
|
||||
class CognitiveDistortions {
|
||||
+AllOrNothingThinking()
|
||||
+Overgeneralization()
|
||||
+MentalFilter()
|
||||
+JumpingToConclusions()
|
||||
}
|
||||
class AllOrNothingThinking {
|
||||
+SeeInExtremes()
|
||||
}
|
||||
class Overgeneralization {
|
||||
+GeneralizeFromSingle()
|
||||
}
|
||||
class MentalFilter {
|
||||
+FocusOnNegative()
|
||||
}
|
||||
class JumpingToConclusions {
|
||||
+MakeAssumptions()
|
||||
}
|
||||
CognitiveDistortions *-- AllOrNothingThinking
|
||||
CognitiveDistortions *-- Overgeneralization
|
||||
CognitiveDistortions *-- MentalFilter
|
||||
CognitiveDistortions *-- JumpingToConclusions
|
||||
{% end %}
|
||||
|
||||
The Mermaid shortcode supports two parameters:
|
||||
|
||||
- `invertible`: If set to `true` (default), the diagram will be inverted in dark mode, just like [invertible images](#invertible-image).
|
||||
- `full_width`: Allows the diagram to take up the width of the header. See [full-width image](#full-width-image).
|
||||
|
||||
{{ admonition(type="tip", text="You can use the [Mermaid Live Editor](https://mermaid.live/) to create and preview your diagrams.") }}
|
||||
|
||||
## Image shortcodes
|
||||
|
||||
All image shortcodes support absolute paths, relative paths, and remote sources in the `src` parameter.
|
||||
|
||||
@ -22,6 +22,7 @@ social_media_card = "social_cards/ca_projects_tabi.jpg"
|
||||
- Temes clars i foscos. S'adapta a la configuració del sistema operatiu, amb un interruptor a la barra de navegació.
|
||||
- [Suport multilingüe complet](https://welpo.github.io/tabi/ca/blog/faq-languages/#com-gestiona-tabi-el-suport-multilingue). Afegeix tants idiomes com vulguis i deixa que els teus usuaris triin amb el selector d'idioma.
|
||||
- Puntuació perfecta en Lighthouse (Rendiment, Accessibilitat, Millors Pràctiques i SEO).
|
||||
- Suport per a [diagrames de Mermaid](https://welpo.github.io/tabi/ca/blog/shortcodes/#diagrames-de-mermaid) per a crear diagrames i gràfics amb text.
|
||||
- Ressaltat de sintaxi de codi amb colors basats en [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé.
|
||||
- Suport per a [comentaris usant giscus, utterances, Hyvor Talk o Isso](https://welpo.github.io/tabi/ca/blog/comments/).
|
||||
- [Cerca local](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#cerca) amb una interfície accessible i multilingüe.
|
||||
|
||||
@ -22,6 +22,7 @@ social_media_card = "social_cards/es_projects_tabi.jpg"
|
||||
- [Soporte multilingüe completo](https://welpo.github.io/tabi/es/blog/faq-languages/#como-gestiona-tabi-el-soporte-multilingue). Añade tantos idiomas como desees y deja que tus usuarios elijan con un selector de idioma.
|
||||
- Temas claros y oscuros. Se adapta a la configuración del sistema operativo, con un interruptor en la barra de navegación.
|
||||
- Puntuación perfecta en Lighthouse (Rendimiento, Accesibilidad, Mejores Prácticas y SEO).
|
||||
- Soporte para [diagramas de Mermaid](https://welpo.github.io/tabi/es/blog/shortcodes/#diagramas-de-mermaid) para crear diagramas y gráficos con texto.
|
||||
- Resaltado de sintaxis de código con colores basados en [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé.
|
||||
- Soporte para [comentarios usando giscus, utterances, Hyvor Talk o Isso](https://welpo.github.io/tabi/es/blog/comments/).
|
||||
- Todo el JavaScript se puede [deshabilitar completamente](https://welpo.github.io/tabi/es/blog/javascript/).
|
||||
|
||||
@ -24,6 +24,7 @@ social_media_card = "social_cards/projects_tabi.jpg"
|
||||
- [Comprehensive multi-language support](https://welpo.github.io/tabi/blog/faq-languages/#how-does-tabi-handle-multilingual-support). Add as many languages as you wish.
|
||||
- Support for [comments using giscus, utterances, Hyvor Talk, or Isso](https://welpo.github.io/tabi/blog/comments/).
|
||||
- Code syntax highlighting with colours based on [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé.
|
||||
- [Mermaid support](https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams) to create diagrams and charts with text.
|
||||
- [Local search](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search) with an accessible, multi-lingual interface.
|
||||
- [Custom Twitter card](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards) and automatic Open Graph tags.
|
||||
- [KaTeX](https://katex.org/) support for mathematical notation.
|
||||
|
||||
@ -238,3 +238,11 @@ details summary {
|
||||
display: inline-block;
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.mermaid p {
|
||||
font-family: var(--sans-serif-font) !important;
|
||||
}
|
||||
|
||||
.mermaid .node .label {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ const getTableCode = (block) => {
|
||||
.join('');
|
||||
};
|
||||
|
||||
document.querySelectorAll('pre').forEach((block) => {
|
||||
document.querySelectorAll('pre:not(.mermaid)').forEach((block) => {
|
||||
const copyDiv = document.createElement('div');
|
||||
copyDiv.setAttribute('role', 'button');
|
||||
copyDiv.setAttribute('aria-label', initCopyText);
|
||||
|
||||
2
static/js/copyCodeToClipboard.min.js
vendored
2
static/js/copyCodeToClipboard.min.js
vendored
@ -1 +1 @@
|
||||
const copiedText=document.getElementById("copy-success").textContent,initCopyText=document.getElementById("copy-init").textContent,changeIcon=(e,t)=>{e.classList.add(t),e.setAttribute("aria-label",copiedText),setTimeout(()=>{e.classList.remove(t),e.setAttribute("aria-label",initCopyText)},2500)},addCopyEventListenerToDiv=(e,t)=>{e.addEventListener("click",()=>copyCodeAndChangeIcon(e,t))},copyCodeAndChangeIcon=async(t,e)=>{e=(e.querySelector("table")?getTableCode:getNonTableCode)(e);try{await navigator.clipboard.writeText(e),changeIcon(t,"checked")}catch(e){changeIcon(t,"error")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre").forEach(e=>{var t=document.createElement("div");t.setAttribute("role","button"),t.setAttribute("aria-label",initCopyText),t.setAttribute("title",initCopyText),t.className="copy-code",e.prepend(t),addCopyEventListenerToDiv(t,e)});
|
||||
const copiedText=document.getElementById("copy-success").textContent,initCopyText=document.getElementById("copy-init").textContent,changeIcon=(e,t)=>{e.classList.add(t),e.setAttribute("aria-label",copiedText),setTimeout(()=>{e.classList.remove(t),e.setAttribute("aria-label",initCopyText)},2500)},addCopyEventListenerToDiv=(e,t)=>{e.addEventListener("click",()=>copyCodeAndChangeIcon(e,t))},copyCodeAndChangeIcon=async(t,e)=>{e=(e.querySelector("table")?getTableCode:getNonTableCode)(e);try{await navigator.clipboard.writeText(e),changeIcon(t,"checked")}catch(e){changeIcon(t,"error")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre:not(.mermaid)").forEach(e=>{var t=document.createElement("div");t.setAttribute("role","button"),t.setAttribute("aria-label",initCopyText),t.setAttribute("title",initCopyText),t.className="copy-code",e.prepend(t),addCopyEventListenerToDiv(t,e)});
|
||||
|
||||
2089
static/js/mermaid.min.js
vendored
Normal file
2089
static/js/mermaid.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -7,6 +7,10 @@ content="default-src 'self'
|
||||
{%- set giscus_enabled = config.extra.giscus.enabled_for_all_posts or page.extra.giscus -%}
|
||||
{%- set hyvortalk_enabled = config.extra.hyvortalk.enabled_for_all_posts or page.extra.hyvortalk -%}
|
||||
{%- set isso_enabled = config.extra.isso.enabled_for_all_posts or page.extra.isso -%}
|
||||
{%- if page -%}
|
||||
{%- set mermaid_enabled = macros_settings::evaluate_setting_priority(setting="mermaid", page=page, default_global_value=false) == "true" -%}
|
||||
{%- endif -%}
|
||||
{%- set serve_local_mermaid = config.extra.serve_local_mermaid | default(value=true) -%}
|
||||
|
||||
{#- Initialise a base script-src directive -#}
|
||||
{%- set script_src = "script-src 'self'" -%}
|
||||
@ -46,6 +50,10 @@ content="default-src 'self'
|
||||
{%- set script_src = script_src ~ " " ~ " utteranc.es" -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if mermaid_enabled and not serve_local_mermaid -%}
|
||||
{%- set script_src = script_src ~ " " ~ " cdn.jsdelivr.net" -%}
|
||||
{%- endif -%}
|
||||
|
||||
{#- Append WebSocket for Zola serve mode -#}
|
||||
{%- if config.mode == "serve" -%}
|
||||
{%- set connect_src = connect_src ~ " ws:" -%}
|
||||
@ -67,8 +75,13 @@ content="default-src 'self'
|
||||
{#- Handle directives that are not connect-src -#}
|
||||
{{ domain.directive }} {{ domain.domains | join(sep=' ') -}}
|
||||
|
||||
{%- if utterances_enabled or hyvortalk_enabled -%}
|
||||
{%- if domain.directive == "style-src" %} 'unsafe-inline'
|
||||
{%- if domain.directive == "style-src" -%}
|
||||
{%- if utterances_enabled or hyvortalk_enabled or mermaid_enabled %} 'unsafe-inline'
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if domain.directive == "font-src" -%}
|
||||
{%- if mermaid_enabled %} 'self'
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
|
||||
@ -35,6 +35,15 @@
|
||||
<script defer src="{{ get_url(path='js/katex.min.js', trailing_slash=false) | safe }}"></script>
|
||||
{%- endif -%}
|
||||
|
||||
{# Load mermaid.js #}
|
||||
{%- if macros_settings::evaluate_setting_priority(setting="mermaid", page=page, default_global_value=false) == "true" -%}
|
||||
{%- if config.extra.serve_local_mermaid | default(value=true) -%}
|
||||
<script defer src="{{ get_url(path='js/mermaid.min.js', trailing_slash=false) | safe }}"></script>
|
||||
{%- else -%}
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
{# Add copy button to code blocks #}
|
||||
{%- if macros_settings::evaluate_setting_priority(setting="copy_button", page=page, default_global_value=true) == "true" -%}
|
||||
{#- Add hidden HTML elements with the translated strings for the button's interactions -#}
|
||||
|
||||
8
templates/shortcodes/mermaid.html
Normal file
8
templates/shortcodes/mermaid.html
Normal file
@ -0,0 +1,8 @@
|
||||
{% set invertible = invertible | default(value=true) %}
|
||||
{% set full_width = full_width | default(value=false) %}
|
||||
<noscript>
|
||||
<strong>⚠️ JavaScript is required to render the diagram.</strong>
|
||||
</noscript>
|
||||
<pre class="mermaid{% if invertible %} invertible-image{% endif %}{% if full_width %} full-width{% endif %}">
|
||||
{{ body | safe }}
|
||||
</pre>
|
||||
10
theme.toml
10
theme.toml
@ -119,6 +119,16 @@ footnote_backlinks = false
|
||||
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
|
||||
katex = false
|
||||
|
||||
# Enable Mermaid diagrams for all posts.
|
||||
# Loads ~2.5MB of JavaScript.
|
||||
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
|
||||
mermaid = false
|
||||
|
||||
# Serve Mermaid JavaScript locally. Version bundled with tabi.
|
||||
# If set to false, it will load the latest version from JSDelivr.
|
||||
# Only relevant when `mermaid = true`.
|
||||
serve_local_mermaid = true
|
||||
|
||||
# Show links to previous and next articles at the bottom of posts.
|
||||
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
|
||||
show_previous_next_article_links = false
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user