Sintáxis Markdown

En esta página se presenta un ejemplo de cada forma posible para formatear texto y cómo obtenerlo con Markdown.

Títulos

Los títulos se construyen con un # por cada nivel del título.

Esto:

# Título h1
## Título h2
### Título h3
#### Título h4
##### Título h5
###### Título h6

Se renderiza así:

Título h1

Título h2

Título h3

Título h4

Título h5
Título h6

Reglas horizontales

Se puede separar contenido con una regla horizontal con cualquiera de las siguientes opciones:

---
___
***

Cada uno de estos se renderiza así:

Texto normal

Un párrafo de texto normal se escribe directamente sin ningún tipo de notación especial.

Esto:

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

Se renderiza así:

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

Énfasis de texto

Negrita

Para escribir texto en negrita se lo puede realizar con:

**esto está en negrita**

Lo cual se renderiza así:

esto está en negrita

Itálicas

Para escribir texto en itálica se lo puede realizar con:

*esto está en itálica*

Lo cual se renderiza así:

esto está en itálica

Atravesado

Para escribir texto atravesado se lo puede realizar con:

~~esto está en atravesado~~

Lo cual se renderiza así:

esto está en atravesado

Bloques de paráfrasis

Se puede formatear texto como un bloque independiente.

Esto:

> Esto es un bloque independiente.

Se renderiza así:

Esto es un bloque independiente.

Se pueden tener múltiples niveles de estos bloques:

Esto:

> Esto es un bloque independiente.
> > Y este un bloque interno.

Se renderiza así:

Esto es un bloque independiente.

Y este un bloque interno.

Notas

Se puede agregar un recuadro de notas de distintos colores.

Note

Esto:

{{% notice note %}}
Una nota.
{{% /notice %}}

Se renderiza así:

Una nota.

Info

Esto:

{{% notice info %}}
Una información.
{{% /notice %}}

Se renderiza así:

Una información.

Tip

Esto:

{{% notice tip %}}
Un tip.
{{% /notice %}}

Se renderiza así:

Un tip.

Warning

Esto:

{{% notice warning %}}
Una alerta.
{{% /notice %}}

Se renderiza así:

Una alerta.

Listas

Sin orden

Una lista cuyo orden no importa se puede representar con cualquiera de los siguientes símbolos:

* Elemento de la lista.
- Elemento de la lista.
+ Elemento de la lista.

Un elemento de una lista también puede ser otra lista.

Esto:

+ Elemento 1.
+ Elemento 2.
+ Elemento 3.
  - Elemento 3.1.
  - Elemento 3.2.
+ Elemento 4.

Se renderiza así:

  • Elemento 1.
  • Elemento 2.
  • Elemento 3.
    • Elemento 3.1.
    • Elemento 3.2.
  • Elemento 4.

Ordenada

Una lista cuyo orden importa se puede representar como una lista precedida por números por cada elemento.

Esto:

1. Primero
2. Segundo
3. Tercero
4. Cuarto

Se renderiza así:

  1. Primero
  2. Segundo
  3. Tercero
  4. Cuarto

Bloques de código

Se puede representar un bloque independiente para mostrar un ejemplo de código.

Bloques en la misma línea

Una línea puede contener un ejemplo de código en la misma línea.

Esto:

Aquí hay un `ejemplo` en la misma línea.

Se renderiza así:

Aquí hay un ejemplo en la misma línea.

Bloques de múltiples líneas

Un bloque de código independiente se envuelve con ```.

Un texto envuelto con estos símbolos se renderiza así:

Esto es un código
de múltiples líneas.

Subrayado de sintáxis

Los bloques de código independientes pueden mostrar código con subrayado de sintáxis en base al lenguaje. Para esto, después del primer ``` que envuelve al código se le especifica el lenguaje del código (Ejemplo: js, html, json…). Se puede encontrar aquí una lista de los lenguajes soportados.

Un texto HTML envuelto en estos símbolos se renderiza así:

<html>
  <body>
    <p>Aquí hay un párrafo en HTML.</p>
  </body>
</html>

Tablas

Se puede representar tablas agregando | entre cada columna y separando la primera fila por --- por cada celda.

Esto:

| Primera columna | Segunda columna |
| --------------- | --------------- |
| Celda 1,1       | Celda 1,2       |
| Celda 2,1       | Celda 2,2       |
| Celda 3,1       | Celda 3,2       |

Se renderiza así:

Primera columnaSegunda columna
Celda 1,1Celda 1,2
Celda 2,1Celda 2,2
Celda 3,1Celda 3,2

Recurso externo

Se puede agregar un hipervínculo a un recurso externo.

Esto:

[Texto del Link](http://link-al-recurso.com)

Se renderiza así:

Texto del Link

Recurso interno

Se puede agregar un hipervínculo a un recurso interno. El recurso interno se resuelve desde el documento que se está editando.

Sea una estructura de documentos así:

  • pagina1.md
  • pagina2/
    • pagina2-1.md
    • pagina2-2.md

Si desde pagina2-2.md se quiere agregar un hipervínculo a pagina1.md, se realiza esto:

[Texto del Link]({{< ref "../pagina1.md" >}})

Se renderiza así:

Texto del Link

Si el ref apunta a un archivo que no existe, el compilador del sitio mostrará un error.

Recurso de la misma página

Se puede agregar un hipervínculo a un recurso que se encuentra en la misma página. Este recurso debe ser un título en la misma página para el cual se le debe poner todo en minúsculas y reemplazar cualquier espacio por un guión -.

Esto:

[Link a la misma página](#énfasis-de-texto)

Se renderiza así:

Link a la misma página

Este link apunta a la sección Énfasis de texto en esta misma página.

Imágenes

Se puede agregar imágenes a la página.

Imagen externa

Una imagen externa es una imagen que no se encuentre guardada en los archivos de este sitio, se obtiene generalmente por su URL.

Esto:

![texto para cuando no se puede presentar la imagen](https://raw.githubusercontent.com/manos-al-codigo/assets/master/logo_with_text/logo_with_text_2000x1000-black.png)

Se renderiza así:

texto para cuando no se puede presentar la imagen

Imagen interna

Una imagen interna es una imagen que se encuentre guardada en los archivos de este sitio, más específicamente adentro de la carpeta static.

La dirección de la imagen local se obtiene al sumar las siguientes cosas:

  • / Para apuntar al inicio del sitio. En este caso, es https://manos-al-codigo.github.io/
  • guia/ Si es que el sitio es parte de la guia, en caso contrario no se agrega nada.
  • la dirección/hasta/la/imagen. La dirección para encontrar la imagen desde la carpeta static. Si la imagen se llama analytics_3.png y se encuentra adentro de la carpeta cuentas que está dentro de img que a su vez está adentro de static, la dirección de la imagen será: static/img/cuentas/analytics_3.png.

Esto:

{{< figure src="/guia/img/cuentas/analytics_3.png" title="Páginas más visitadas." >}}

Se renderiza así:

Páginas más visitadas.

Desactivar la presentación de la imagen al hacerle click

Cuando se le hace click a una imagen en este sitio por lo general se presenta en grande en una ventana independiente. Para eliminar este comportamiento, se agrega: ?featherlight=false al URL de la imagen.

Esto:

![texto para cuando no se puede presentar la imagen](https://raw.githubusercontent.com/manos-al-codigo/assets/master/logo_with_text/logo_with_text_2000x1000-black.png?featherlight=false)

Se renderiza así:

texto para cuando no se puede presentar la imagen

Hacerle click a la imagen no hace nada.

Cambiar el tamaño de la imagen

Por defecto, las imágenes toman su tamaño normal en la página a menos que esta sea muy pequeña para la imagen, en cuyo caso la imagen tomará todo el espacio horizontal que pueda, manteniendo su relación con el tamaño vertical para que no se vea estirada.

Se puede cambiar el tamaño de la imagen agregando al final de la URL de la imagen ?height=<tamaño> para cambiar la altura de la imagen o ?width=<tamaño> para cambiar su largo. Se pueden encadenar estos parámetros, reemplazando el ? en los parámetros que no sean el primero por &.

Las unidades del tamaño son las de CSS, más información sobre estas unidades se puede encontrar aquí.

![texto para cuando no se puede presentar la imagen](https://raw.githubusercontent.com/manos-al-codigo/assets/master/logo_with_text/logo_with_text_2000x1000-black.png?featherlight=false&with=200px&height=100px)

Se renderiza así:

texto para cuando no se puede presentar la imagen

Archivos Adjuntos

En varios de las páginas del contenido se puede observar un bloque que dice Archivos Adjuntos y tiene links para descargar estos archivos. Para utilizar este bloque, se debe primeramente subir el contenido que se desea adjuntar al repositorio de assets. Por lo general, se crea una nueva carpeta en contenido con el número de la lección (ejemplo: leccion-4). Para esto, cree una carpeta en su computador llamada contenido y adentro de la misma una nueva carpeta con el nombre de la lección, leccion-1 en este caso. Luego, en la página del repositorio, haga clic en Add File > Upload Files y arrastre la carpeta contenido a la página. Finalmente, en el bloque donde dice Add files via upload, escriba un mensaje pertinente, por ejemplo: “Agregado contenido de la lección 1.” y termine haciendo clic en Commit changes.

Una vez que el contenido ya esté subido al repositorio de assets, se puede hacer uso de este bloque de contenido.

Si se quiere adjuntar el contenido de la carpeta leccion-1 que ese encuentra dentro de contenido del repositorio, se utiliza:

{{< archivos "contenido/leccion-1" "Que es la computacion.pdf" "Que es la computacion.pptx"  >}}

Donde el primer bloque entre comillas corresponde al nombre de la carpeta desde la ruta del repositorio. Se usa contenido/leccion-1 porque la carpeta contenido contiene a leccion-1.

Los bloques siguientes de comillas corresponden al nombre de los archivos, en este caso, dentro de la carpeta leccion-1 se encuentran los archivos siguientes:

  • Que es la computacion.pdf
  • Que es la computacion.pptx

Este código se renderiza así:

  • Que es la computacion.pdf
  • Que es la computacion.pptx

    • Videos de YouTube

    Se pueden agregar videos de YouTube en las páginas. Lo único que se debe conocer es el identificador del video el cual es la cadena alfanumérica al final del link del video.

    Ejemplo: Para el video https://www.youtube.com/watch?v=y-C6nRCbkSA el identificador es y-C6nRCbkSA.

    Para agregar el video, se utiliza esto:

    {{< youtube y-C6nRCbkSA >}}

    Lo cual se renderiza así: