如何在 console.log 中设置文本背景颜色的样式？答案

【问题标题】：How can I style the text background color in a console.log?如何在 console.log 中设置文本背景颜色的样式？
【发布时间】：2019-09-28 03:32:12
【问题描述】：

我正在尝试设置 console.log() 消息的样式，使其看起来更好（背景颜色、文本颜色等...）。

我正在使用以下代码：

console.log('%c Created by' + '%c www.google.com', 'background: #13212E; color: #FFF; padding: 5px 10px;', 'background: #05E5C8; color: #13212E; padding: 5px 10px;');

Chrome 控制台中的输出如下：

如您所见，它几乎是完美的，但color 样式并未应用于链接（“www.google.com”），我还想删除白色背景。

有没有办法为console.log() 消息中的链接设置这些属性的样式？

【问题讨论】：

你想改变www.google.com的文字颜色吗？
@SudhirOjha 是的，更改文本颜色并从“www.google.com”中删除白色背景
你不能在链接中添加text-decoration: none; 吗？
@colinrenaud 我试过了，但什么也没做
这可能是 stackoverflow.com/questions/49728760/… 的副本，它也没有答案。

标签： javascript google-chrome google-chrome-devtools console.log

【解决方案1】：

const colors = {
 Reset: "\x1b[0m",
 Bright: "\x1b[1m",
 Dim: "\x1b[2m",
 Underscore: "\x1b[4m",
 Blink: "\x1b[5m",
 Reverse: "\x1b[7m",
 Hidden: "\x1b[8m",
 fg: {
  Black: "\x1b[30m",
  Red: "\x1b[31m",
  Green: "\x1b[32m",
  Yellow: "\x1b[33m",
  Blue: "\x1b[34m",
  Magenta: "\x1b[35m",
  Cyan: "\x1b[36m",
  White: "\x1b[37m",
  Crimson: "\x1b[38m"
 },
 bg: {
  Black: "\x1b[40m",
  Red: "\x1b[41m",
  Green: "\x1b[42m",
  Yellow: "\x1b[43m",
  Blue: "\x1b[44m",
  Magenta: "\x1b[45m",
  Cyan: "\x1b[46m",
  White: "\x1b[47m",
  Crimson: "\x1b[48m"
 }
};

console.log(colors.bg.Blue, colors.fg.White , "'%c Created by' + '%c www.google.com'", colors.Reset);

【讨论】：