Changing SyntaxHighlighter Font Size

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 Comments

  1. Bruno says:

    Tks man, it was really useful for me.

  2. John, Shin says:

    Thx, This just what I looking for

  3. Woody says:

    FYI Just installed version 3 and had to find replace the “font-size” attributes within the css to get this too work.

  4. csg says:

    version 3 uses .syntaxhighlighter textarea instead of .syntaxhighlighter span. btw yes!! extremely sensitive!!

  5. iaxscfdv says:

    For syntaxhighlighter_3.0.83 if you only change font-size “.syntaxhighlighter textarea”, the line numbers will be off. Instead you should change font-size in “.syntaxhighlighter”. Something like this:

    .syntaxhighlighter {
    width: 100% !important;
    margin: 1em 0 1em 0 !important;
    position: relative !important;
    overflow: auto !important;
    font-size: 0.8em !important;
    }

  6. sutambe says:

    Thank you! Just 1.01em did the trick!

  7. can you help me: how to change font style on syntaxhighlighter 3.0.83?
    example: font-family: courier

    please help me.

    thank you

Leave a Reply