style links in javascript console

Question

i have a console.log message on my site with a link. The styling is working but the link remains in black font on white background. Can i change that?

$(function() { var t = navigator.userAgent.toLowerCase(); if (/(chrome|firefox|safari)/.test(t.toLowerCase())) { var e = ["padding: 20px 5px 16px", "background-color: #171718", "color: #f2641c"].join(";"); var i = ["padding: 20px 5px 16px", "background-color: #f2641c", "color: #ffffff"].join(";"), n = ["background-color: transparent"].join(";"); console.log("\n\n %c Some text %c http://google.com/ %c \n\n\n", e, i, n); } else { window.console && console.log("Some text - http://google.com/"); } });

Seems like the fact that your text is considered as a link is preventing your styling to be applied. If you add a space after http:, you'll see your color, but you'll lose the link. — Zenoo
– Zenoo, Commented Apr 9, 2018 at 8:46
@Zenoo so i guess theres no way to change the color and keep the link? :/ — creme
– creme, Commented Apr 10, 2018 at 9:16

Zach Saucier · Accepted Answer · 2024-01-23 18:43:29Z

Unfortunately there's no way to color links within console messages in Chrome.

If you try to apply a color, Chrome will apply their anchor color anyway:

Firefox will use the color but force font-style: italic (you can't override this behavior):

Safari will use a gray color:

All these browsers force text-decoration: underline on links in the console.

Side note: I wrote about how you can include a lot more than just text inside of consoles, which might help people viewing this thread later.

I'd love to see browsers improve support and standardize things here.

Collectives™ on Stack Overflow

style links in javascript console

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related