Deno logoDenoby example

Beginner

clideployweb

Logging with colors

Most modern terminals can display program logs in colors and with text decorations. This example shows how to display colors when using `console.log`.

Deno has support for CSS using the %c syntax in console.log. Here, the text "Hello World" is displayed in red. This also works in the browser.
console.log("%cHello World", "color: red");
Not just foreground, but also background colors can be set.
console.log("%cHello World", "background-color: blue");
Text decorations like underline and strikethrough can be set too.
console.log("%cHello World", "text-decoration: underline");
console.log("%cHello World", "text-decoration: line-through");
Font weight can also be set (either to normal, or to bold).
console.log("%cHello World", "font-weight: bold");
Multiple CSS rules can also be applied at once. Here the text is red and bold.
console.log("%cHello World", "color: red; font-weight: bold");
A single console.log can also contain multiple %c values. Styling is reset at every %c.
console.log("%cHello %cWorld", "color: red", "color: blue");
Instead of predefined colors, hex literals and `rgb()` are also supported. Note that some terminals do not support displaying these colors.
console.log("%cHello World", "color: #FFC0CB");
console.log("%cHello World", "color: rgb(255, 192, 203)");
It is not possible to configure font size, font family, leading, or any other CSS attributes.

Run this example locally using the Deno CLI:

deno run https://byexample-wwv03xf36j0g.deno.dev/color-logging.ts

Additional resources: