浏览器控制台输出简书的徽章(badge)效果

看简书的文章时按F12偶然发现控制台输出了徽章(badge)效果，感觉非常神奇。

简书控制台

以前只在Github仓库的Readme介绍看到这种徽章(badge)

Github Readme

查看源码，发现是用console.log()输出的，其中有%c，有点像C语言输出。经过一番查找，原来这里的%c对应的是CSS，加上%c就可以对其后的字符串样式进行修改

console.log %c

将这段console.log写成函数showBadge(text1,text2,background_color1,background_color2)

function showBadge(text1,text2,background_color1,background_color2){
    console.log("%c ".concat(text1, " %c ").concat(text2, " "), "padding: 1px; border-radius: 3px 0 0 3px; color: #fff; background: ".concat(background_color1, ";"), "padding: 1px; border-radius: 0 3px 3px 0; color: #fff; background: ".concat(background_color2, ";"))
}

其中参数text1是徽章左边的字符串，text2是徽章右边的字符串，
background_color1是徽章左边的背景色，background_color2是徽章右边的背景色

徽章(badge)

将简书控制台的字符串和背景色写到参数中进行调用

showBadge("Environment","production","#606060","RGB(66,192,46)");
showBadge("Platform","shakespeare","#606060","RGB(20,117,178)");
showBadge("Version ","1.1.0","#606060","RGB(20,117,178)");
showBadge("Build Date","2020-08-26T02:44:50.105Z","#606060","RGB(20,117,178)");

执行结果，控制台输出与简书相同的徽章(badge)

执行结果