javascript调试器控制台（Chrome）中的颜色

Question

我注意到this网站生成的输出。我不知道他们是怎么做的，但看起来不错。我想知道这是如何工作的。如何生成这些形状和颜色。也有某种渐变。

这是来自控制台输出的复制过去（没有颜色）：

◢◤◢◥◢◤◤◢◥◣◤◥◢◣◢◤◣◢◤◥◢◢◢◤◢◢◤◢◥◤◢◣◣◥◤◥◤◢◣◥◣◢◢◤◣◤◣◤◢◣◢◢◤◢◣◤◥◤◣◥◤◥◢◣◤◣◤◥◣◤◣◢◣◥◢◥◤◥◤◣ 
|▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▇█▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▃▇███▆▕▁▁▃▇████▍▕▁██▍▕▁▃▇█████████▇▃▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▂██▕▁▁██▍▕██▍▕▁▁▁▁▁▁██▍▄██▕▁▁▅▃▕▁▁▁▁██▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▄██▕▁▁▁██▍▕██▂▕▁▁▁▁▁▂██▕▁██▍▕▁██▂▕▁▁▂██▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▂▄▆██▕▁▁▁▁▁██▍▕▁██████████▕▁▁▁██▍▕▁███████▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁██▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁unconed▕▁▁▁▁▁▁ 
◥◣◤◣◥◣◢◣◤◥◤◢◤◣◥◥◢◥◢◢◤◢◣◤◤◢◤◢◣◤◢◥◢◤◥◣◥◣◥◢◥◢◥◢◣◤◥◣◢◢◥◢◤◥◢◥◤◥◤◥◤◣◢◤◢◣◤◢◣◤◥◣◢◤◤◥◤◥◣◢ 

Answer 1

我写了Console.js https://github.com/icodeforlove/Console.js以便我们更轻松地完成这项工作

Console.styles.register({
  brshadow: 'box-sizing: border-box; background-image: -webkit-linear-gradient(top, rgb(81, 162, 189), rgb(68, 105, 133)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 0px; background-position: initial initial; background-repeat: initial initial;',
  shadow: 'box-sizing: border-box; color: rgb(68, 105, 133); background-image: -webkit-linear-gradient(top, rgb(99, 199, 231), rgb(68, 105, 133)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: rgba(0, 0, 0, 0.2) 3px 3px 0px, rgb(128, 190, 220) 0px 0px 20px; background-position: initial initial; background-repeat: initial initial;',
  white: 'color: white'
});

然后你可以这样做

console.log('◢◥◤◥◤◢◤◥◢◥◢◤◢◣◥◤◢◥◢◢◣◤◥◣◥◤◢◤◣◥◤◥◤◢◣◥◣◥◢◥◤◥◣◢◤◢◥◢◣◤◢◣◢◥◢◥◣◤◢◣◥◤◢◢◥◢◥◢◥◢◣◥◢◣◥◣◢◥◣◤'.brshadow);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▇█▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▃▇███▆'.shadow + '▕▁▁'.white + '▃▇████▍'.shadow + '▕▁'.white + '██▍'.shadow + '▕▁'.white + '▃▇█████████▇▃'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▂██'.shadow + '▕▁▁'.white + '██▍▕██▍'.shadow + '▕▁▁▁▁▁▁'.white + '██▍▄██'.shadow + '▕▁▁'.white + '▅▃'.shadow + '▕▁▁▁▁'.white + '██▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▄██'.shadow + '▕▁▁▁'.white + '██▍▕██▂'.shadow + '▕▁▁▁▁▁'.white + '▂██'.shadow + '▕▁'.white + '██▍'.shadow + '▕▁'.white + '██▂'.shadow + '▕▁▁'.white + '▂██▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▂▄▆██'.shadow + '▕▁▁▁▁▁'.white + '██▍'.shadow + '▕▁'.white + '██████████'.shadow + '▕▁▁▁'.white + '██▍'.shadow + '▕▁'.white + '███████'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '██▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + 'unconed'.shadow + '▕▁▁▁▁▁▁'.white);
console.log('◢◣◢◢◣◢◤◥◤◥◣◢◣◣◤◢◣◢◣◢◢◥◤◥◢◥◢◥◣◥◢◤◢◥◢◣◤◣◢◤◢◤◣◢◥◢◣◥◣◢◣◥◢◣◣◤◥◢◣◥◢◤◢◣◤◣◤◣◤◢◤◣◢◣◢◣◢◤◥◤'.brshadow);

这不是那么容易因为他格式化它的方式......但任何其他方式仍然会很困难