Console.log CSS style in template literals

Question

I'm creating a game played in the console and I would like to decorate my console.log messages to give them more flare.

Since I'm new to coding, I'm trying to learn to use template literals any time I console.log a message.

If I reverted to quotes and concatenation, I could style my console.log messages like so: console.log('%c some message' + someVar, 'color: red')

How can I style my console.log messages using template literals?

Does this answer your question? [Colors in JavaScript console](https://stackoverflow.com/questions/7505623/colors-in-javascript-console) — I wrestled a bear once., Aug 06 '20 at 19:35
What makes you think that template literals work differently when applying colors to them? — Ivar, Aug 06 '20 at 19:38

score 0 · Answer 1 · answered Aug 06 '20 at 19:35

0

You can use a template literal for the first argument to console.log instead of concatenation.

console.log(`%c some message ${someVar}`, 'color: red')

You can also use dynamic styles by using a template literal for the second argument as well.

answered Aug 06 '20 at 19:35

Unmitigated

score 0 · Accepted Answer · answered Aug 06 '20 at 19:37

0

You can use this type of formatting.

console.log(`%c ${message} ${someVar}`, `color:${color}`)

Works like a charm.

answered Aug 06 '20 at 19:37

Hultan

2 Answers2