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?

An [easy/simplest way do it to show colors in console](https://stackoverflow.com/a/42551926/3240038) — Suhaib Janjua, Sep 18 '17 at 08:27
@SuhaibJanjua Thanks for your contribution to the discussion! Although I'm not sure how the link you posted answers the question I asked, I find it valuable to overall understanding of coloring your console output. — Eric Hepperle - CodeSlayer2010, Oct 05 '17 at 09:10

score 13 · Accepted Answer · answered Jan 27 '17 at 16:55

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.

Marked as correct. Thank you so much! Works perfectly. Can you comment a little more though on the `background: inherit`? Is there a way I can inherit everything? Now I'm thinking maybe `*: inherit`? — Eric Hepperle - CodeSlayer2010, Jan 27 '17 at 19:13
Glad it worked! There is a way that you can make it inherit everything, for sake of simplicity I only included `background:inherit`, but you can also use `all:inherit` as well. That will make sure that all styling is inherited from the parent. — Tomcat, Jan 27 '17 at 22:15

Aurielle Perlmann · Answer 2 · 2018-05-30T03:57:44.063

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)

edited May 30 '18 at 03:57

answered May 27 '18 at 05:58

Aurielle Perlmann

4,656
1
12
24

Interesting approach. I understand most of it and I love that you modularized this! What does the `_` underscore represent in `_.each`? What doe the backticks mean? is this a type of code template like the way Perl uses backticks? Thanks – Eric Hepperle - CodeSlayer2010 May 28 '18 at 12:52
... I tried the code and am getting `Uncaught ReferenceError: _ is not defined at :5:1` using Chrome. – Eric Hepperle - CodeSlayer2010 May 28 '18 at 12:53
1

Oh yeah i forgot i was using lodash you can convert the underscored each to a real for loop ill fix my answer when i get back to a computer – Aurielle Perlmann May 28 '18 at 14:52
Oh ok. I've not heard of `lodash` and I look forward to testing your JavaScript conversion. – Eric Hepperle - CodeSlayer2010 May 28 '18 at 15:48
Tested and it works. Very cool. Thanks for this interesting solution. – Eric Hepperle - CodeSlayer2010 Jun 06 '18 at 03:56

score 1 · Answer 3 · edited Nov 09 '19 at 16:30

1

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.

edited Nov 09 '19 at 16:30

Paul Roub

35,100
27
72
83

answered Nov 09 '19 at 16:06

ashleedawg

17,207
5
53
80

You can use the styling for css rainbow text that is not in js. – BLUBBER May 13 '21 at 21:59