跳至主要内容

带颜色日志

大多数现代终端可以显示带颜色和文本装饰的程序日志。此示例演示了在使用 `console.log` 时如何显示颜色。

在 Github 上编辑
Deno 支持使用 `console.log` 中的 %c 语法使用 CSS。这里,文本“Hello World”以红色显示。这在浏览器中也能正常工作。
console.log("%cHello World", "color: red");
不仅可以设置前景色,还可以设置背景色。
console.log("%cHello World", "background-color: blue");
也可以设置文本装饰,如下划线和删除线。
console.log("%cHello World", "text-decoration: underline");
console.log("%cHello World", "text-decoration: line-through");
还可以设置字体粗细(正常或粗体)。
console.log("%cHello World", "font-weight: bold");
也可以一次应用多个 CSS 规则。这里文本为红色且加粗。
console.log("%cHello World", "color: red; font-weight: bold");
单个 `console.log` 也可以包含多个 %c 值。样式在每个 %c 处重置。
console.log("%cHello %cWorld", "color: red", "color: blue");
除了预定义颜色,还支持十六进制字面量和 `rgb()`。请注意,某些终端不支持显示这些颜色。
console.log("%cHello World", "color: #FFC0CB");
console.log("%cHello World", "color: rgb(255, 192, 203)");
无法配置字体大小、字体系列、行高或任何其他 CSS 属性。

使用 Deno CLI 在本地运行 此示例

deno run https://docs.deno.org.cn/examples/color-logging.ts