Skip to main content

Markdown 101

Este pequeño tutorial de Markdown te enseñará los conceptos básicos y cómo puedes usarlo para dar formato a tus documentos, que será necesario para modificar algunas páginas de la web.

Niveles de título​

# Título nivel 1
## Título nivel 2
### Título nivel 3
#### Título nivel 4
##### Titulo nivel 5
###### Titulo nivel 6

Formateo del texto​

Estilos de texto​

  • Negrita: **palabra**
  • Cursiva: *palabra*
  • Tachado: ~~palabra~~
  • Opción 1 de negrita y cursiva: ***palabra***
  • Opción 2 de negrita y cursiva: ___palabra___

Markdown no permite el subrayado para no confundirlo con los enlaces.

Tampoco permite más de dos espacios en blanco consecutivos para no confundirlo con los saltos de línea.

Divisores y presentaciones​

Divisores con tres guiones simples --- o tres asteriscos ***.

Primera división

Segunda división

Citas​

Para crear una cita simplemente escribimos el símbolo > antes de la cita.

Lo importante no es lo que sabes, sino lo que haces con lo que sabes

Crear una casilla de marcado​

Para ello simplemente escribimos - [ ], y así se nos creará una casilla de marcado.

  • Checkbox without marked
  • Checkbox marked

Listas​

Listas sin numerar​

Creamos un guion o un asterisco y empezamos a escribir. Para anidar listas, simplemente añadimos un tabulador antes de escribir el guion o asterisco.

Ejemplo con guion: - texto Ejemplo con asterisco: * texto Ejemplo de anidación:

- prueba
    - subprueba
    - subprueba
        - subsubprueba
        - subsubprueba
    - subprueba
  • prueba
    • subprueba
    • subprueba
      • subsubprueba
      • subsubprueba
    • subprueba

Listas numeradas​

Escribimos un número y podemos anidar listas una dentro de otras

1. prueba
    1. subprueba
    2. subprueba
        1. subsubprueba
        2. subsubprueba
    3. subprueba
2. prueba
  1. prueba
    1. subprueba
    2. subprueba
      1. subsubprueba
      2. subsubprueba
    3. subprueba
  2. prueba

Imágenes​

Para añadir una imagen simplemente escribimos ![Texto alternativo](URL de la imagen)

Imagen de prueba

También podemos utilizar enlaces relativos a la carpeta de imágenes del proyecto, por ejemplo, ![Texto alternativo](./logo.png):

Imagen de prueba

Estilizar imágenes​

Para cambiar el tamaño de la imagen o centrarla, necesitamos utilizar HTML, por ejemplo:

<p style={{textAlign: "center"}}>
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="400" height="200"/>
</p>

Esta imagen tiene un tamaño de 400x200 píxeles y está centrada en la página:

Bloques código​

Para crear un bloque de código (o no queremos que Markdown lo compile) simplemente escribimos tres comillas invertidas (```) antes y después del código. Se puede especificar el lenguaje de programación para que se resalte la sintaxis.

Sin compilar por Markdown:

```js
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}

Compilado por Markdown:

function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}

También se puede una frase o palabra en código con una comilla invertida simple (`) antes y después de la palabra, por ejemplo, esta palabra (`esta palabra`).

Tablas​

Para crear una tabla simplemente escribimos los valores separados por barras verticales y guiones.

| Nombre | Valor  |
| ------ | ------ |
| Docena | 12     |
| Centena| 100    |
NombreValor
Docena12
Centena100

Enlaces externos​

Para añadir un enlace externo simplemente escribimos [nombre enlace](http://example.com) o http://example.com directamente.

Cita en bloque​

Para añadir un bloque de texto simplemente escribimos :::nombre y ::: al final del bloque. Existen varios tipos de bloques, como tip, info, note, caution, warning y danger.

:::tip
Este es un bloque de texto de idea.
:::
tip

Este es un bloque de texto de idea.

:::info
Este es un bloque de texto de información.
:::
info

Este es un bloque de texto de información.

:::note
Este es un bloque de texto de anotación.
:::
note

Este es un bloque de texto de anotación.

:::caution
Este es un bloque de texto de precaución.
:::
caution

Este es un bloque de texto de precaución.

:::warning
Este es un bloque de texto de advertencia.
:::
warning

Este es un bloque de texto de advertencia.

:::danger
Este es un bloque de texto de peligro.
:::
danger

Este es un bloque de texto de peligro.

Para añadir un título personalizado a los bloques, simplemente añadimos el título entre corchetes al final del nombre del bloque.

:::note[Tu titulo **con** con `SINTAXIS` de _Markdown_!]
Algo **contenido** con `sintaxis` de _Markdown_.
:::
Tu titulo con con SINTAXIS de Markdown!

Algo contenido con sintaxis de Markdown.

Bloques enlazados​

Podemos enlazar bloques de texto con otros bloques de texto, simplemente añadiendo el segundo bloque dentro del primero. Y así sucesivamente se pueden añadir más bloques.

:::note[Tu titulo **con** con `SINTAXIS` de _Markdown_!]
Algo **contenido** con `sintaxis` de _Markdown_.
:::danger
Algo **contenido** con `sintaxis` de _Markdown_.
:::
info

Probando a enlazar bloques de texto.

HOLA

Se pueden enlazar personalizados.

warning

Y aquí un tercero.