After I upgraded to the latest SyntaxHighliger (2.0.296) I noticed that the font size of the code section is a little bit too small to my taste. But there is not an UI option to change it.

So I went to the source code and located the style sheet where the font parameters are set.

To change the default font-size, you will need to modify the following CSS file: [your WordPress install root path]/wp-content/plugins/syntaxhighlighter/syntaxhighlighter/styles/shCore.css. Locate the following class:

.syntaxhighlighter span

{

	margin: 0 !important;

	padding: 0 !important;

	border: 0 !important;

	outline: 0 !important;

	background: none !important;

	text-align: left !important;

	float: none !important;

	vertical-align: baseline !important;

	position: static !important;

	left: auto !important;

	top: auto !important;

	right: auto !important;

	bottom: auto !important;

	height: auto !important;

	width: auto !important;

	line-height: 1.1em !important;

	font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;

	font-weight: normal !important;

	font-style: normal !important;

	font-size: 1em !important;

}

And change the font-size to 1.05em or the size you prefer. Note that this setting is extremely sensitive and typically a 5 percent of increase is enough. Since prefer the Courier font better, I also swapped it with the default “Consolas”.

Be Sociable, Share!

10 Thoughts on “Changing SyntaxHighlighter Font Size”

Leave a Reply

Your email address will not be published. Required fields are marked *