Can I apply multiple CSS styles to Javascript `console.log` arguments?

Question

Javascript's console.log allows me to apply CSS styles to the first argument like so:

console.log("%chey hey we're the monkees!", "font-weight: bold; color: fuchsia")

... which is awesome. But it doesn't play well with multiple log arguments. I'd like to do something like this:

console.log(`%c${timestamp}`, "color: #999", `%c${tags}`, "background-color: #bbb", message)
// doesn't work; second format code is not interpreted

Is there any way to apply multiple format codes to multiple console.log arguments?

score 6 · Accepted Answer · answered May 05 '22 at 17:35

You can indeed. You only need to add a second %c and then another console.log parameter in the same way as the first.

Example:

console.log(
  `%cMy first styles / %cMy second styles`,
  "font-size:24px",
  "font-size:12px;;"
);

So in your example, you should have the timestamp and tags in the same first parameter, and the next two parameters should be the independent styles, and finally your message:

console.log(`%c${timestamp} %c${tags}`, "background-color: #bbb","color: #999", message)

Can I apply multiple CSS styles to Javascript `console.log` arguments?

1 Answers1