Las ventajas de usar markdown para escribir los posts son vastas, podemos hacer uso de todo lo que el formato es capaz para poder dar mejor estructura a lo que se escribe y más claridad sin importar la índole.

Formatos especiales

Se pueden usar los siguientes tipos de formatos para el texto:

• negritas
• itálicas
• tachado
• resaltado
• *caracteres especiales*

1
2
3
4
5
**negritas**
_itálicas_
~~tachado~~
<mark>resaltado</mark>
\*escapar caracteres especiales\*

Aparte de estos formatos, podemos generar citas:

“Esto no lo dije yo, lo dijo alguien más”

Esta nota dentro de la nota… tampoco.

Notas al pie

Para hablar de algo y hacer referencia al pie de página, podemos utilizar la sintaxis [^algo] de la siguiente forma Esta es una nota al pie numerada,¹ y esta es una nota con nombre.²

Títulos referenciados

Al marcar añadir {#titulo} a cualquier encabezado, podemos generar una referencia en caso de que queramos generar un link que nos lleve directamente a ese título. El link podemos referenciarlo luego como [Id del encabezado](#titulo) como el de esta sección

Escribir código

Como programador, escribir código es esencial, y el hacerlo de manera clara es de lo más importantes, hay 3 formas de escribir código en Markdown:

• Código en línea: Se logra al utilizar `` al rededor de palabras o frases, generalmente se utiliza para pequeños ejemplos de código o palabras clave
• Bloque de código libre: Un bloque agnóstico de lenguaje, se utiliza para escribir multiples líneas en un bloque, esto se logra encerrando varias líneas entre ``` y ```, el código escrito acá tiene un mejor formato y legibilidad, aunque le falta resaltado de texto:

  1
  2
  3
  .my-link {
    text-decoration: underline;
  }
  

• Bloque de código específico: Un bloque ligado a un lenguaje, se utiliza para escribir multiples líneas en un bloque con resaltado de colores, esto se logra encerrando varias líneas entre ``` y ``` y especificando el lenguaje después de las primeras 3, el código en estos bloques es fácil de leer, algunos ejemplos:

HTML

1
2
3
4
5
<li class="ml-1 mr-1">
    <a target="_blank" href="#">
    <i class="fab fa-twitter"></i>
    </a>
</li>

CSS

1
2
3
4
5
6
7
8
.highlight .c {
    color: #999988;
    font-style: italic; 
}
.highlight .err {
    color: #a61717;
    background-color: #e3d2d2; 
}

JS

1
2
3
4
5
6
7
8
9
// alertbar later
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 280) {
        $('.alertbar').fadeIn();
    } else {
        $('.alertbar').fadeOut();
    }
});

Python

1
print("Hello World")

Ruby

1
2
3
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

C

1
printf("Hello World");

Links e imágenes

Jekyll utiliza liquid como pre-procesador, lo que nos permite acceder a las variables del sistema mediante llaves, para obtener la url del sitio, simplemente `` es suficiente para imprimir la url base. Los links, puede ser usados en formato wiki de manera que [Link](https://zerma.me) será impreso como Link.

La manera de añadir imágenes se logra de la misma manera de añadir un link pero poniendo un ! al inicio, de manera que ![Imagen local](/assets/images/tutorial.png), se convierte en:

O imágenes externas como ![Imagen remota](https://cdn.discordapp.com/attachments/1066120149419171931/1103360965128495196/zerma_photo_of_a_woman_with_broken_kabuki_mask_in_the_middle_of_bdccac67-4940-4bcb-bdd4-44913f02c078.png)

HTML

Markdown permite el uso de html directo y sin restricciones así que todas las etiquetas son aceptadas para hacer y deshacer como queramos, por ejmplo podemos incluir videos de youtube con el iframe compartido:

Spoilers!

Para cosas que no pueden ser divulgadas de golpe o esos giros de tuerca de las historias, podemos utilizar la clase spoiler en cualquier bloque de texto, y con ello se pueden ofuscar palabras o frases completas: Como por ejemplo, que el asesino es el jardinero, un cliché pero esta vez es cierto.

Se logra de la siguente manera:

1
Texto regular y <span class="spoiler">el texto que quiero ocultar.</span>