# JS Tip of the Day: Stylish Logs

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-stylish-logs/643122>\
**Category:** web dev\
**Created:** [April 14, 2020, 11:12am UTC](https://forum.kirupa.com/t/js-tip-of-the-day-stylish-logs/643122 "2020-04-14T11:12:58Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 14, 2020, 11:12am UTC](https://forum.kirupa.com/t/js-tip-of-the-day-stylish-logs/643122/1 "2020-04-14T11:12:58Z")

</div>

**Stylish Logs**  
Level: Intermediate

Normally when you log text to the console using something like `console.log()`, the effect is simple, boring, and unimpressive. You might log a data type that is represented a little differently, like an HTML element or an object, but in the end, there’s no real flair.

Thankfully, the console API allows us to add that missing flair by providing ways to style the output of the console. This works through style substitutions that allow you to inject CSS styles directly into your logged messages. Simply include a `%c` in your logged message, and follow that with an argument that contains the style. The style will be injected in the location of the `%c` styling the text in the message that follows. This can even be done multiple times for multiple styles in a single message.

```javascript
console.log('%cRed text', 'color: red');
console.log('%cRed text %cBlue text', 'color: red', 'color: blue');
console.log('%cLarge text', 'font-size: x-large');
console.log('Normal - %cWhite on black%c - Normal',
    'color: white; background-color: black', '');

```

Not all styles are supported and support in different console APIs/browsers may also vary. You may need to do some experimentation to see what works and what doesn’t.

More info:

- [Styling console output on MDN](https://developer.mozilla.org/en-US/docs/Web/API/console#Styling_console_output)
