How to style console log messages
January 5, 2022
We recently added a little easter egg to Basedash which shows ASCII art of our logo, and a short message with links in the browser console.
Basedash
I’ve seen a few other products do something similar, including Linear and Facebook:
Linear
One thing you might notice is that both of these examples apply styling to the console messages. Linear uses a monospace font (which is necessary for ASCII art to display properly), and Facebook changes the text size and color.
Here’s how you can do the same:
Applying styling to console.log messages
First, start with a standard console.log
statement:
console.log('Basedash is rad');
Then, add %c
to the start of your string:
console.log('%cBasedash is rad');
Finally, add a second parameter with some CSS:
console.log('%cBasedash is rad', 'color: red; font-size: 20px;');
The CSS from the second parameter is applied to everything after the %c
. Most CSS properties that affect text work—you can see the full list on MDN.
You can also add multiple %c
tags to apply different styles to different parts of your message. Each %c
tag adds its own parameter to the console.log
function call, like so:
console.log('%cBasedash is %crad', 'color: red', 'color: green');
Rad!
Some other ideas to try:
- Embed an image with
background-image
- Change the
font-family
to match the rest of your website - Add a 3D effect with
box-shadow
- Italicize text with
font-style
Check out the full MDN docs on styling console output here.
You could ship faster.
Imagine the time you'd save if you never had to build another internal tool, write a SQL report, or manage another admin panel again. Basedash is built by internal tool builders, for internal tool builders. Our mission is to change the way developers work, so you can focus on building your product.
TOC
January 5, 2022
We recently added a little easter egg to Basedash which shows ASCII art of our logo, and a short message with links in the browser console.
Basedash
I’ve seen a few other products do something similar, including Linear and Facebook:
Linear
One thing you might notice is that both of these examples apply styling to the console messages. Linear uses a monospace font (which is necessary for ASCII art to display properly), and Facebook changes the text size and color.
Here’s how you can do the same:
Applying styling to console.log messages
First, start with a standard console.log
statement:
console.log('Basedash is rad');
Then, add %c
to the start of your string:
console.log('%cBasedash is rad');
Finally, add a second parameter with some CSS:
console.log('%cBasedash is rad', 'color: red; font-size: 20px;');
The CSS from the second parameter is applied to everything after the %c
. Most CSS properties that affect text work—you can see the full list on MDN.
You can also add multiple %c
tags to apply different styles to different parts of your message. Each %c
tag adds its own parameter to the console.log
function call, like so:
console.log('%cBasedash is %crad', 'color: red', 'color: green');
Rad!
Some other ideas to try:
- Embed an image with
background-image
- Change the
font-family
to match the rest of your website - Add a 3D effect with
box-shadow
- Italicize text with
font-style
Check out the full MDN docs on styling console output here.
You could ship faster.
Imagine the time you'd save if you never had to build another internal tool, write a SQL report, or manage another admin panel again. Basedash is built by internal tool builders, for internal tool builders. Our mission is to change the way developers work, so you can focus on building your product.
January 5, 2022
We recently added a little easter egg to Basedash which shows ASCII art of our logo, and a short message with links in the browser console.
Basedash
I’ve seen a few other products do something similar, including Linear and Facebook:
Linear
One thing you might notice is that both of these examples apply styling to the console messages. Linear uses a monospace font (which is necessary for ASCII art to display properly), and Facebook changes the text size and color.
Here’s how you can do the same:
Applying styling to console.log messages
First, start with a standard console.log
statement:
console.log('Basedash is rad');
Then, add %c
to the start of your string:
console.log('%cBasedash is rad');
Finally, add a second parameter with some CSS:
console.log('%cBasedash is rad', 'color: red; font-size: 20px;');
The CSS from the second parameter is applied to everything after the %c
. Most CSS properties that affect text work—you can see the full list on MDN.
You can also add multiple %c
tags to apply different styles to different parts of your message. Each %c
tag adds its own parameter to the console.log
function call, like so:
console.log('%cBasedash is %crad', 'color: red', 'color: green');
Rad!
Some other ideas to try:
- Embed an image with
background-image
- Change the
font-family
to match the rest of your website - Add a 3D effect with
box-shadow
- Italicize text with
font-style
Check out the full MDN docs on styling console output here.
You could ship faster.
Imagine the time you'd save if you never had to build another internal tool, write a SQL report, or manage another admin panel again. Basedash is built by internal tool builders, for internal tool builders. Our mission is to change the way developers work, so you can focus on building your product.
What is Basedash?
What is Basedash?
What is Basedash?
Ship faster, worry less with Basedash
Ship faster, worry less with Basedash
Ship faster, worry less with Basedash
You're busy enough with product work to be weighed down building, maintaining, scoping and developing internal apps and admin panels. Forget all of that, and give your team the admin panel that you don't have to build. Launch in less time than it takes to run a standup.
You're busy enough with product work to be weighed down building, maintaining, scoping and developing internal apps and admin panels. Forget all of that, and give your team the admin panel that you don't have to build. Launch in less time than it takes to run a standup.
You're busy enough with product work to be weighed down building, maintaining, scoping and developing internal apps and admin panels. Forget all of that, and give your team the admin panel that you don't have to build. Launch in less time than it takes to run a standup.
Dashboards and charts
Edit data, create records, oversee how your product is running without the need to build or manage custom software.
USER CRM
ADMIN PANEL
SQL COMPOSER WITH AI
Related posts
Related posts
Related posts
How to Center a Table in HTML with CSS
Jeremy Sarchet
Adjusting HTML Table Column Width for Better Design
Robert Cooper
How to Link Multiple CSS Stylesheets in HTML
Robert Cooper
Mastering HTML Table Inline Styling: A Guide
Max Musing
HTML Multiple Style Attributes: A Quick Guide
Max Musing
How to Set HTML Table Width for Responsive Design
Max Musing