Console Log Styles

console-log-styles.markdown

Console Log Styles

A Pen by Matthew Daniel Brown on CodePen.

License.

index.html

<article>

	<h1>Console Styles</h1>
	
	<p>Adding css to console.log messages is actually really simple and is supported by most browsers, I've tested it in the latest versions of firefox, chrome, safari and opera (on mac). They all worked fine and seem to support all css3 properties so you can go mad if you like but I've kept the demo fairly tame. Some browsers seem to have difficulty using fonts imported through css using @import. The best thing to do here is provide a good font stack.</p>

	<h2>Creating the styles</h2>
	<pre><code>var consoleStyles = [
	'font-family: Roboto, Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif',
	'font-size: 16px',
	'color: #454545'
].join(';');</pre></code>
	
	<h2>Applying the styles</h2>
	
	<pre><code>console.log("%cFonts and colours in console.log messages", consoleStyles);</code></pre>
	
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/Screen_Shot_2016-08-28_at_11.06.27.png" alt="Screen shot" />
	
	<p>Just as a side note, adding asccii art to the console works in all the same browsers listed above except safari which for some reason seems to mess with letter spacing, even without changes to the style.</p>
	
</article>

script.js

var consoleStyles = [
	'font-family: Roboto, Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif',
	'font-size: 16px',
	'color: #454545'
].join(';');

var consoleStylesTwo = [
	'font-family: Roboto, Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif',
	'font-size: 16px',
    'color: #E2007C'
].join(';');

console.log("%cFonts and colours in console.log messages", consoleStyles);

console.log("%cCool, huh?!?",consoleStylesTwo)

style.scss

@import 'https://fonts.googleapis.com/css?family=Permanent+Marker|Roboto';

body {
	font-family: 'Roboto', sans-serif;
	color: #454545;
	margin: 48px 96px;
}

h1, h2 {
	font-family: 'Permanent Marker', cursive;
}

article {
	max-width: 480px;
	margin: 0 auto;
}

pre {
	text-align: left;
	margin: 24px 0;
	padding: 24px;
	background: #454545;
	color: white;
	border-bottom: 6px solid #E2007C
}

code {
	white-space: pre-wrap;
	word-wrap: break-word;
}

img {
	width: 100%;
	height: auto;
}