Cómo cambiar el color del texto con Markdown

En este tutorial aprenderás a cambiar el color del texto usando Markdown

Con Markdown no podrás cambiar el color del texto, ya que no dispone de la sintaxis específica para tal fin. Sin embargo, existen alternativas que podrás usar siempre y cuando el editor que uses soporte HTML o CSS.

Cambia el color del texto con HTML

Si el editor Markdown que usas soporta HTML, entonces podrás usar le etiqueta font. Esta etiqueta se usa para definir las propiedades del la fuente o para asignarle estilos. Entre los atributos de esta etiqueta está el atributo color, que permite especificar un color por su nombre e también mediante su código hexadecimal.

Para cambiar el color de un texto con esta etiqueta tendrás rodear al texto de la etiqueta de apertura <font> y la de cierre </font>. Luego tendrás que usar el atributo color e indicar el color entre comillas.

En el siguiente ejemplo mostramos un texto de color azul:

<font color="blue">Este texto debería ser azul.</font>

El código anterior debería renderizarse así, mostrando el texto en color azul:

Este texto debería ser azul.

También puedes indicar el color del texto mediante su código hexadecimal:

<font color="#0000FF">Este texto debería ser azul.</font>

El código anterior también se debería renderizar así, mostrando el texto en color azul:

Este texto debería ser azul.

Has de tener encuenta que la etiqueta font ha sido clasificada como obsoleta, aunque todavía funcione en casi todos los navegadores.

Cambia el color del texto con CSS

Una alternativa al uso de la etiqueta font consiste en usar la propiedad CSS color, mediante la cual podrás indicar el color del texto por su nombre o usando la nomenclatura hexadecimal o RGB. Las propiedades CSS en HTML se indican mediante el atributo style.

En el siguiente ejemplo cambiamos el color del párrafo, asígnándole el color blue:

<p style="color:blue">Este texto debería ser azul.</p>

Este sería el resultado cuando se renderize el documento:

Este texto debería ser azul.

También puedes usar el código hexadecimal del color, anteponiendo el carácter # al mismo:

<p style="color:#0000FF;">Este texto debería ser azul.</p>

Este sería el resultado cuando se renderize el documento:

Este texto debería ser azul.

También puedes indicar el color mediante el formato decimal RGB:

<p style="color:rgb(240,248,255);">Este texto debería ser azul.</p>

Este sería el resultado cuando se renderize el documento:

Este texto debería ser azul.

Y con esto ya hemos terminado. Espero que te haya sido útil.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado este tutorial. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirlo en Twitter.

para estar al día con mi contenido. 😊