How can I style the text background color in a console.log?

Question

I'm trying to style a console.log() message so that it looks nicer (background colours, text colours etc...).

I'm using the following code:

console.log('%c Created by' + '%c www.google.com', 'background: #13212E; color: #FFF; padding: 5px 10px;', 'background: #05E5C8; color: #13212E; padding: 5px 10px;');

Which outputs in Chrome's console like:

As you can see it's almost perfect, but the color style isn't being applied to the link ('www.google.com'), and I also want to remove the white background.

Is there any way to style these properties for a link in a console.log() message?

Are you trying to change the text color of `www.google.com` ? — Sudhir Ojha, May 10 '19 at 08:52
@SudhirOjha Yes, change the text color and remove the white background from 'www.google.com' — JJ Gerrish, May 10 '19 at 08:53
Removing the `www.` from the URL will apply the styling, but it means the text is no longer a link. Otherwise, there does not appear to be a way to do this. — Brett DeWoody, May 10 '19 at 09:07
This is a possible duplicate of https://stackoverflow.com/questions/49728760/style-links-in-javascript-console, which also does not have an answer. — Brett DeWoody, May 10 '19 at 09:09
Seems like the style is applied to the container but not the nested `a` tag. Doesn't seem to be anyway to apply a style sheet type, i.e. `a{color:transparent}` (you could try this but my gut feeling is, it won't work) syntax so this likely can't be done — Liam, May 10 '19 at 09:36

score 1 · Answer 1 · answered Dec 27 '20 at 18:17

const colors = {
 Reset: "\x1b[0m",
 Bright: "\x1b[1m",
 Dim: "\x1b[2m",
 Underscore: "\x1b[4m",
 Blink: "\x1b[5m",
 Reverse: "\x1b[7m",
 Hidden: "\x1b[8m",
 fg: {
  Black: "\x1b[30m",
  Red: "\x1b[31m",
  Green: "\x1b[32m",
  Yellow: "\x1b[33m",
  Blue: "\x1b[34m",
  Magenta: "\x1b[35m",
  Cyan: "\x1b[36m",
  White: "\x1b[37m",
  Crimson: "\x1b[38m"
 },
 bg: {
  Black: "\x1b[40m",
  Red: "\x1b[41m",
  Green: "\x1b[42m",
  Yellow: "\x1b[43m",
  Blue: "\x1b[44m",
  Magenta: "\x1b[45m",
  Cyan: "\x1b[46m",
  White: "\x1b[47m",
  Crimson: "\x1b[48m"
 }
};

console.log(colors.bg.Blue, colors.fg.White , "'%c Created by' + '%c www.google.com'", colors.Reset);

How can I style the text background color in a console.log?

1 Answers1