Saltar a contenido

Bloques

Dividir un documento en apartados, cada uno con su título, y a su vez en párrafos, nos permite organizar los contenidos. Pero hay situaciones en las que necesitamos organizar la información de forma más gráfica.

Pestañas

Supongamos que tenemos varios textos que queremos visualizar alternativamente. Por ejemplo, un ejemplo de programación desarrollado con diferentes lenguajes:

Programa para mostrar un texto en la consola:

#include <stdio.h>

int main(void) {
  printf("Hola\n");
  return 0;
}

#include <iostream>

int main(void) {
  std::cout << "Hola" << std::endl;
  return 0;
}

class HelloWorld {
  static public void main( String args[] ) {
  System.out.println( "Hola" );
  }
}

Pulsando en cada pestaña podemos ver un texto u otro. Para lograr esto, tenemos que activar en mkdocs.yml la extensión tabbed:

markdown_extensions:
  - pymdownx.tabbed:
      alternate_style: true

Y el texto markdown es:

=== "C"

    ``` c
    #include <stdio.h>

    int main(void) {
      printf("Hola\n");
      return 0;
    }
    ```

=== "C++"

    ``` c++
    #include <iostream>

    int main(void) {
      std::cout << "Hola" << std::endl;
      return 0;
    }
    ```

=== "Java"

    ``` java
    class HelloWorld {
      static public void main( String args[] ) {
      System.out.println( "Hola" );
      }
    }
    ```

El bloque de texto que se muestra en cada pestaña se delimita mediante la sangría, con una línea de cabecera formada por tres símbolos === seguidos del texto a mostrar en la pestaña.

Como funcionalidad añadida, las pestañas llevan asociado un enlace, que podemos descubrir pulsando sobre la misma con el botón secundario del ratón, y podemos usar para enlazar al texto:

Véase [ejemplo de programación](midocumento.html#__tabbed_1_1)

Cards

Supongamos una página inicial que muestra una serie de textos distribuidos en una rejilla de recuadros:

Material for MkDocs

¿Como se logra esta presentación? No se trata de una extensión, sino de la hoja de estilos de Material for MkDocs, que define dos clases especiales llamadas grid y card.

Lo primero que tenemos que hacer es crear un bloque <div> que pertenezca a esas clases, y poner en su interior una lista de elementos:

<div class="grid cards" markdown=1>
-   elemento 1
-   elemento 2
-   elemento 3
-   elemento 4
</div>

El contenido del bloque se mostrará con ese aspecto de rejilla, con cada elemento de la lista en una celda. El número de celdas por fila depende del tamaño de la ventana del navegador y de la resolución de la pantalla.

  • elemento 1
  • elemento 2
  • elemento 3
  • elemento 4

Usamos el atributo markdown porque, sin el, la sintaxis markdown no tiene efecto en un bloque <div>. Tenemos que activar la extensión en md_in_html en mkdocs.yml:

markdown_extensions:
  - md_in_html

A partir de ahí, basta con trabajarse cada elemento de la lista:

<div class="grid cards" markdown=1>

-   :material-clock-fast:{ .lg .middle } __Disponible en 5 minutos__

    ---

    Instale [mkdocs-material] con [pip] y comience a trabajar
    en cuestión de minutos

    [:octicons-arrow-right-24: Inicio][Inicio]

-   :fontawesome-brands-markdown:{ .lg .middle } __Es markdown__

    ---

    Preocúpese solo por redactar los contenidos

    [:octicons-arrow-right-24: Referencia][Referencia]

-   :material-format-font:{ .lg .middle } __Configurable__

    ---

    Cambie colores, fuentes, idioma, iconos, logo y todo lo demás con poco esfuerzo

    [:octicons-arrow-right-24: Configuración][Configuración]

-   :material-scale-balance:{ .lg .middle } __Open Source__

    ---

    Material for MkDocs se distribuye bajo licencia MIT a través de [GitHub]

    [:octicons-arrow-right-24: Licencia][Licencia]

</div>

Veamos el primero de ellos:

-   :material-clock-fast:{ .lg .middle } __Disponible en 5 minutos__

    ---

    Instale [mkdocs-material] con [pip] y comience a trabajar
    en cuestión de minutos

    [:octicons-arrow-right-24: Inicio][Inicio]

Utilizamos tres párrafos y una línea separadora marcada con tres guiones. Incluimos en el texto dos iconos:

  • :material-clock-fast:
  • :octicons-arrow-right-24:

Las clases .lg y .middle configuran el aspecto del icono.

Si quitamos la clase cards, podemos aplicar el comportamiento de rejilla a otros tipos de elementos, todos ellos de bloque:

Programa en lenguaje Java:
class HelloWorld {

    public static void main (String args[]) {
    System.out.println("Hola Mundo");
  }

}
Resultado:
Hola Mundo

Lo que se consigue con:

<div class="grid" markdown="1">

```java title="Programa en lenguaje Java:"
class HelloWorld {

    public static void main (String args[]) {
    System.out.println("Hola Mundo");
  }

}
```

```title="Resultado:"
Hola Mundo
```

</div>

Otro ejemplo:

Programa en lenguaje Java

class HelloWorld {

    public static void main (String args[]) {
    System.out.println("Hola Mundo");
    }

}

Resultado:

Hola Mundo

Esto se obtiene con:

<div class="grid" markdown="1">

!!! abstract "Programa en lenguaje Java"

    ```java
    class HelloWorld {

        public static void main (String args[]) {
        System.out.println("Hola Mundo");
        }

    }
    ```

!!! success  "Resultado:"

    Hola Mundo


</div>