Changing the font size, line height and code box padding of Syntaxhighlighter Evolved plugin

By Default Syntaxhighlighter Evolved plugin came with no top and bottom padding and very tight line height. If you are someone like me who love some breathing space in between every section in a WordPress post then you can try the below CSS code snippet. Screenshots are attached before and after applying the CSS code.

syntaxhighlighter plugins style customization before
Image before applying the CSS styles
syntaxhighlighter plugins style customization
Image after applying the CSS styles

CSS Code Snippets:

/* change SyntaxHighlighter plugins styles */
	/* font-size */
	.syntaxhighlighter a, 
	.syntaxhighlighter div, 
	.syntaxhighlighter code, 
	.syntaxhighlighter table, 
	.syntaxhighlighter table td, 
	.syntaxhighlighter table tr, 
	.syntaxhighlighter table tbody, 
	.syntaxhighlighter table thead, 
	.syntaxhighlighter table caption, 
	.syntaxhighlighter textarea {
		font-size: 14px !important;
	/* top and bottom padding in code box */
	.syntaxhighlighter {
		padding: 1em 0 !important;
	/* increaes line number and code line height */
	.syntaxhighlighter table td.gutter .line {
		padding: 3px 0.5em 3px 1em !important;
	.syntaxhighlighter table td.code .line {
		padding: 3px 1em !important;


I'm a freelance Wordpress Front-end Developer, work from my home office. Mostly do my freelance work on Upwork. I'm a TOP RATED freelancer with over 11K+ Work Hours. Specialize in HTML5, CSS3, SCSS, JavaScript, jQuery, Ajax, ES6, Bootstrap, PHP, MySQL, Wordpress, Woocommorce and Custom Wordpress Theme and Plugin Development

This Post Has 2 Comments

  1. Thanks for sharing this! I just installed Syntaxhighlighter Evolved today, and ran into the exact same spacing issue–I was able to paste in your CSS and get much nicer looking code.

Leave a Reply

Close Menu