Format console.log with color and variables surrounding non-formatted text

Question

The issue

I wrote a function to demonstrate how to format Chrome developer console console.log() messages in a variety of ways. However, the one I'm having trouble with is printing a variable on the left with a color scheme, then a string in the middle with no styling, followed by another variable that is styled. Here is a graphic to illustrate:

Also, this HTML/CSS code will demonstrate what I'm trying to produce in the developer console:

    <p>Array values printed out (equals sign not formatted):</p>

    <span style="background: #ffa600; color: #ffe4b3;">Array[index0]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.google.com</span><br>
    <span style="background: #ffa600; color: #ffe4b3;">Array[index1]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.pinterest.com</span><br>
    <span style="background: #ffa600; color: #ffe4b3;">Array[index2]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.facebook.com</span><br>


    <p>Multiple combinations of formatted and non formatted text:</p>
    <p>
        <span style="background:red;">Red</span>
        <span> and </span>
        <span style="background:aliceblue">AliceBlue</span>
        <span> OR </span>
        <span style="color:forestgreen; font-style: italic; font-weight: bold;">Forest Green</span>
        <span style="background: orange">Orange</span>
        <span>, also this: <span>
        <span style="background:pink; color: brown">  Error Styling </span>
        <span>, etc ...</span>
    </p>

What I've tried that didn't work

This code from christianvuerings in Colors in JavaScript console works to print two different styles back-to-back:

console.log("%cHello, "+"World","color:red;","color:blue;")

I based my attempts on that code. The trouble is, Christian's code doesn't account for having non-formatted code sandwiched between formatted code, nor for having multiple variables. I made many tries to find the right combination of code and ordering, but the three most promising (to me) were these:

console.log("%c%s"+" is "+"%c%d"+"years old.", "color:red","Bob", "color:blue", 42).

console.log("%c%s"," is ","%c%d","years old.", "color:red","Bob", "color:blue", 42).

console.log("%c%s is %c%d years old.", "color:red", "Bob", "color:blue", 42).

My question

How can I print console.log() messages with multiple combinations of formatted and non-formatted code all on the same line?

Answer 1

In order to get console.log() to be formatted such that it allows formatted and unformatted text in the same line, you must "reset" the css that you changed following the formatted css. For example, for the log to show up formatted like the code below

<span style="background: #ffa600; color: #ffe4b3;">Array[index0]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.google.com</span>

You would need your console.log() call looking like so:

Code

console.log("%c%s%c = %c%s","background:orange", "Array[index0]", "background:inherit;", "background:yellow;font-style: italic;", "google.com")

Result

Notice how after the first string is inserted into the string, I insert another %c formatter and give it the value of background:inherit which resets the elements backgrounds following that making them inherit the color from the console's defined css in the browser. That was the only thing you were missing from your code.

Answer 2

I recently wanted to solve for the same issue and constructed a small function to color only keywords i cared about which were easily identifiable by surrounding curly braces {keyword}.

This worked like a charm:

var text = 'some text with some {special} formatting on this {keyword} and this {keyword}'
var splitText = text.split(' ');
var cssRules = [];
var styledText = '';
for (var split of splitText)  {
    if (/^\{/.test(split)) {
        cssRules.push('color:blue');
    } else {
        cssRules.push('color:inherit')
    }
    styledText += `%c${split} `
};
console.log(styledText , ...cssRules)

Answer 3

Example:

console.log('%c\uD83D\uDE09 Giant Rainbow Text!', 
            'font-weight:bold; font-size:50px;color:red; ' +
            'text-shadow:3px 3px 0 red,6px 6px 0 orange,9px 9px 0 yellow, ' +
            '12px 12px 0 green,15px 15px 0 blue,18px 18px 0 indigo,21px 21px 0 violet');

Produces:

Adapted from here.

Also see the documentation for console.log.