Setting style for Console.log within a string variable?

Question

I am trying to set up a nicer console log output on a javascript script I'm running by using the available styling options.

In this case:

s=`Title 1 \n This is some text that follows the first title`;
s=`${s} \n Title 2 \n This is some other text that follows`;
console.log(s);

I would like to have an output as:

Title 1

This is some text that follows the first title

Title 2

This is some other text that follows

But given the examples I've found for styling, I can't find how to do so, as

console.log(`%c ${s}`, 'font-weight:bold');

would bolden everything inside.

Can I have some advice?

Thanks!

Chris Sandvik · Accepted Answer · 2019-03-20 14:22:00Z

2

If you want to apply different styles to different parts of the log, you must use multiple %c and add multiple style arguments.

console.log(`%cTitle 1 \n %cThis is some text that follows the first title`, 'font-weight:bold', 'font-weight: normal');

As far as I know, this is the only way to accomplish this.

https://hackernoon.com/styling-logs-in-browser-console-2ec0807dc91a

answered Mar 20, 2019 at 14:22

Chris Sandvik

1,93912 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonas Wilms · Accepted Answer · 2019-03-20 14:18:12Z

0

Just log multiple times then:

 console.log(`%c Title 1`, 'font-weight:bold');
 console.log("content");

answered Mar 20, 2019 at 14:18

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Comments

Kevin Hirst · Accepted Answer · 2020-02-12 18:55:25Z

0

I know this question is up here for a while, but I was doing performance logging and found this.

var totalTime = 0.634563;
console.log("Widget Modal Performance Update:  Total Operation Time = %c" + totalTime.toFixed(2) + " seconds.", " font-weight: bold; color: #000099");

You just have to make sure that %c preceeds the variable in the string addition.

answered Feb 12, 2020 at 18:55

Kevin Hirst

8648 silver badges18 bronze badges

Collectives™ on Stack Overflow

Setting style for Console.log within a string variable?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related