Coloreando la terminal

Cómo darle color al texto de la terminal


Antes de comenzar con NodeJS, conviene adquirir cierta experiencia trabajando desde la terminal. En este artículo vamos a ver como darle color al texto que mostramos por terminal, de modo que sea más fácil de leer los textos.

Coloreando terminal con styleText

A partir de la versión 20.13.0 de Node, tenemos disponible la función styleText() que nos permite colorear textos en la terminal de forma muy sencilla y sin necesidad de librerías de terceros.

Simplemente debemos colocar el color o formato modificador como primer parámetro y el texto a colorear como segundo parámetro:

import { styleText } from "node:util";

console.log(styleText("red", "Error: "), "Esto es un mensaje normal.");

Observa que el texto pasado por segundo parámetro a styleText() es el que se colorea, mientras que el que está fuera se muetra sin color. Además del con el color, también podemos pasar un de mezclando varios colores para aplicarlos, pudiendo utilizar colores de texto, colores de fondo e incluso estilos de formato como negrita o subrayado:

import { styleText } from "node:util";

const redFrame = ["bgRed", "white"];
const whiteFrame = ["bgWhite", "black"];

console.log(styleText(redFrame, "¡Hola ") + styleText(whiteFrame, " Mundo!"));

En el primer caso, redFrame combina color rojo de fondo y color blanco de texto, mientras que whiteFrame combina color blanco de fondo y color negro de texto.

Opciones de formato

A continuación muestro una tabla de las opciones que podemos utilizar como formato. Ten en cuenta que indico los colores de texto como los colores de fondo (prefijados por bg):

FormatoDescripción
ColorColores de texto / Colores de fondo
black, gray / bgBlack, bgBlackBright
red, redBright / bgRed, bgRedBright
green, greenBright / bgGreen, bgGreenBright
yellow, yellowBright / bgYellow, bgYellowBright
blue, blueBright / bgBlue, bgBlueBright
magenta, magentaBright / bgMagenta, bgMagentaBright
cyan, cyanBright / bgCyan, bgCyanBright
white, whiteBright / bgWhite, bgWhiteBright

Además, también podemos utilizar modificadores para cambiar el color que estamos utilizando:

Modificadores
DescripciónModificadorDescripción
resetResetea el color a su estado original.boldColoca el texto en negrita.
italicColoca el texto en cursiva.underlineColoca el texto subrayado.
strikethroughColoca el texto tachado con una línea.hiddenImprime el texto, pero invisible.
dimApaga o reduce la intensidad del color.overlinedColoca una línea superior al texto.
blinkEl texto parpadea.inverseInvierte los colores de texto y fondo.
doubleunderlineColoca doble subrayado.framedDibuja un marco alrededor del texto.

El método stripVTControlCharacters()

Si por algún motivo, lo que queremos es eliminar el color y quedarnos con un texto sin color alguno, podemos utilizar el método stripVTControlCharacters() que se encuentra en node:util.

Observa el siguiente fragmento de código, donde creamos un mensaje a color y lo limpiamos utilizando el mencionado método:

import { styleText, stripVTControlCharacters } from 'node:util';

const messageWithColor = styleText("yellow", "Hello ") + styleText("red", "world!");

console.log(messageWithColor);  // A color
console.log(stripVTControlCharacters(messageWithColor)); // Sin color

Estas tareas de coloreado de terminal tradicionalmente se hacían con paquetes de terceros como chalk o picocolors, sin embargo, ahora podemos hacerlo de forma nativa con NodeJS.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev