自定义颜色

2023年03月11日

柏拉文

越努力，越幸运

一、认识

---

二、元素

---

2.1 标志

• %c: css样式

三、语法

---

3.1 终端

语法一:

console.log('\x1B[32m%s\x1B[0m', '绿色信息')

语法二:

console.log('\x1b[1m\x1b[32m绿色信息\x1b[39m\x1b[22m')

3.2 浏览器

说明

终端中设置颜色的方法可以用于浏览器

语法一:

console.log('%c在这个符号后的信息是红色','color: red')

语法二:

console.log('%c在这个符号后的信息是绿色','color: #529b2e')

四、场景

---

4.1 text

方式一、设置Css样式

function logKeyValue(text){
    console.log(`%c ${ text } %c`, "color: blue","");
}
logKeyValue("哈哈");

方式二、设置Unicode十六进制

const styleMap = {
    // style:    [ start code, end code  ]
    bold: ["\x1B[1m", "\x1B[22m"],
    italic: ["\x1B[3m", "\x1B[23m"],
    underline: ["\x1B[4m", "\x1B[24m"],
    inverse: ["\x1B[7m", "\x1B[27m"],
    strikethrough: ["\x1B[9m", "\x1B[29m"],
    white: ["\x1B[37m", "\x1B[39m"],
    grey: ["\x1B[90m", "\x1B[39m"],
    black: ["\x1B[30m", "\x1B[39m"],
    blue: ["\x1B[34m", "\x1B[39m"],
    cyan: ["\x1B[36m", "\x1B[39m"],
    green: ["\x1B[32m", "\x1B[39m"],
    magenta: ["\x1B[35m", "\x1B[39m"],
    red: ["\x1B[31m", "\x1B[39m"],
    yellow: ["\x1B[33m", "\x1B[39m"],
    whiteBG: ["\x1B[47m", "\x1B[49m"],
    greyBG: ["\x1B[49;5;8m", "\x1B[49m"],
    blackBG: ["\x1B[40m", "\x1B[49m"],
    blueBG: ["\x1B[44m", "\x1B[49m"],
    cyanBG: ["\x1B[46m", "\x1B[49m"],
    greenBG: ["\x1B[42m", "\x1B[49m"],
    magentaBG: ["\x1B[45m", "\x1B[49m"],
    redBG: ["\x1B[41m", "\x1B[49m"],
    yellowBG: ["\x1B[43m", "\x1B[49m"],
};

function addStyle(content,style){
    const styleValue = styleMap[style];
    if(!styleValue){
        return content;
    }
    return `${ styleValue[0] }${ content }${ styleValue[1] }`
}

function combinationStyleList(content,styleList){
    return styleList.reduce((prev,curr)=>{
        return addStyle(prev,curr);
    },content);
}

console.log(combinationStyleList('嘻嘻',["bold","blue"]));

4.2 Key-Value

方式一、设置Css样式

function logKeyValue(key, value) {
    console.log(
        `%c ${key} %c ${value} %c`,
        "background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff",
        "background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff",
        "background:transparent"
    );
}

logKeyValue("姓名","张文强");

方式二、设置Unicode十六进制

const styleMap = {
    // style:    [ start code, end code  ]
    bold: ["\x1B[1m", "\x1B[22m"],
    italic: ["\x1B[3m", "\x1B[23m"],
    underline: ["\x1B[4m", "\x1B[24m"],
    inverse: ["\x1B[7m", "\x1B[27m"],
    strikethrough: ["\x1B[9m", "\x1B[29m"],
    white: ["\x1B[37m", "\x1B[39m"],
    grey: ["\x1B[90m", "\x1B[39m"],
    black: ["\x1B[30m", "\x1B[39m"],
    blue: ["\x1B[34m", "\x1B[39m"],
    cyan: ["\x1B[36m", "\x1B[39m"],
    green: ["\x1B[32m", "\x1B[39m"],
    magenta: ["\x1B[35m", "\x1B[39m"],
    red: ["\x1B[31m", "\x1B[39m"],
    yellow: ["\x1B[33m", "\x1B[39m"],
    whiteBG: ["\x1B[47m", "\x1B[49m"],
    greyBG: ["\x1B[49;5;8m", "\x1B[49m"],
    blackBG: ["\x1B[40m", "\x1B[49m"],
    blueBG: ["\x1B[44m", "\x1B[49m"],
    cyanBG: ["\x1B[46m", "\x1B[49m"],
    greenBG: ["\x1B[42m", "\x1B[49m"],
    magentaBG: ["\x1B[45m", "\x1B[49m"],
    redBG: ["\x1B[41m", "\x1B[49m"],
    yellowBG: ["\x1B[43m", "\x1B[49m"],
};

function addStyle(content,style){
    const styleValue = styleMap[style];
    if(!styleValue){
        return content;
    }
    return `${ styleValue[0] }${ content }${ styleValue[1] }`
}

function combinationStyleList(content,styleList){
    return styleList.reduce((prev,curr)=>{
        return addStyle(prev,curr);
    },content);
}

function logKeyValue(key,value){
    return combinationStyleList(key,["bold","blue"]) + ": " + combinationStyleList(value,["bold","green"]);
}

console.log(logKeyValue("姓名","张文强"));

参考资料

---

设置终端console.log信息颜色