Opciones y forma de uso en el blog

Referencia de imágenes externas como imágen para el post

A la hora de definir la imagen a mostrar por el post en la tarjeta correspondiente, también se puede hacer referencia a una imágen externa a este propio repositorio.

Ejemplo

1
2
3
4
5
6
7
---
layout: post
title:  "External Featured Image"
author: sal
categories: [ Jekyll, tutorial, web development ]
image: "https://images.unsplash.com/photo-1541544537156-7627a7a4aa1c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a20c472bc23308e390c8ffae3dd90c60&auto=format&fit=crop&w=750&q=80"
---

Texto con formato de cita

En ocasiones puede ser necesario citar de forma textual algún bloque de texto o frase, para estas situaciones podemos agregar citas al post que se quiera publicar.

Como por ejemplo.

“Más vale proyecto publicado con licencia libre, que ciento en el cajón” #proverbioFriki

Ejemplo

1
2
3
4
A continuación se incluye texto "citado"

>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu.

Formateo especial

Además de negrita y cursiva, también se pueden emplear otros formatos especiales en Markdown cuando se desee.

• tachado
• ==resaltado==
• *escape de carateres*

Escribiendo bloques de código

Hay dos tipos de elementos de código que se pueden insertar en Markdown, el primero en línea y el otro en bloque.

El código en línea se formatea envolviendo cualquier palabra o palabras en comillas invertidas, así.

Los fragmentos de código más grandes se pueden mostrar en varias líneas usando tres marcas de retroceso:

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

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");

Full HTML

En Markdown se puede escribir HTML directamente y funcionará como normalmente lo hace HTML. ¡Sin limites!

Aquí un ejemplo estándar para incluir un video de YouTube:

Uso de spoilers

Los spoilers son una técnica utilizada para ocultar información relevante. Al utilizar un spoiler, se oculta el contenido que puede afectar la experiencia del usuario y se requiere que haga clic para revelar esa información.

Es importante etiquetar adecuadamente los spoilers para que los usuarios puedan elegir si quieren revelar el contenido o no.

Ejemplo de uso

En este párrfo, a partir de este momento el contenido está oculto tras un spoiler y para revelar su contenido deberás hacer click sobre el texto oculto.

¿Cómo emplear spoilers?

1
<span class="spoiler">Este texto está oculto tras la necesidad de hacer click en él previamente.</span>