Change the Prism font-size

After implementing Prism I wanted to make the default font in which the code was displayed a bit smaller. By default the code font-size seems to be even bigger than the rest of the content.

My first thought was "ehh, just adjust the font-size" but that didn't work very well for the line numbers.

Changing the font-size of the code block messed up the line-numbers. So I tried adding the line-height to the line-numbers section, played with font-sizes of the two sections also no luck. It took quit some time before I found a solution.

It was/is probably my lack of knowledge on the CSS inner-workings but the key was to change the font-size unit from 'em' to 'rem' and everything fell in place.

While 'em' is relative to the font-size of its direct or nearest parent, 'rem' is only relative to the html (root) font-size.

Now it's possible to change the font-size and still have properly aligned line-numbers.

 prism.css

The default font-size for the code is 1em, in the code snippet of the file 'prism.js' I changed it to 0.8rem.

...
code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 0.8rem; /* 1em */
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;  
...

With this small change the font-size can now be adjusted to my preferences.