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: