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”.
Tks man, it was really useful for me.
Thx, This just what I looking for
FYI Just installed version 3 and had to find replace the “font-size” attributes within the css to get this too work.
version 3 uses .syntaxhighlighter textarea instead of .syntaxhighlighter span. btw yes!! extremely sensitive!!
For SyntaxHighligher Evloved (v3.1.3) .syntaxhighligher .code worked for me. Thanks for the tip!
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;
}
Thank you! Just 1.01em did the trick!
[…] Kerry D. Wong Category: WordPress | […]
can you help me: how to change font style on syntaxhighlighter 3.0.83?
example: font-family: courier
please help me.
thank you
owwhhh thankks work for me