Controlling font size of [code] blocks

• 

  tomhopper · Member · Mar 21, 2014 at 10:45 am

  • Copy link
  • Add topic to favorites

  The font size in [code] blocks is larger than my standard font, and results in a visual aesthetic that detracts from the rest of the post. How can I control (decrease) the font size between [code] and [/code]? I would preferably like to do this site-wide, but cannot find a way to adjust just that setting (possibly with custom css?). Alternatively, I could include a setting with each block of code.

  Example:
  [code language = "r"]
  library(graphics)
  [/code]

  Results in code that looks one to two point sizes larger than the surrounding text.

  Thank you.

  The blog I need help with is: (visible only to logged in users)

• 

  jeremeylduvall · Member · Mar 24, 2014 at 5:30 pm

  • Copy link

  Hi there,

  Currently, the only way to adjust only the code font size would be to use the following CSS:

  .syntaxhighlighter {
  	font-size: 12px !important;
  }

  The !important attribute is necessary as it’s used in the theme CSS so normal CSS (without the important tag) will not override the theme default. Give that a try in Appearance -> Customize -> CSS and let me know if it works for what you’re looking for!

• 

  tomhopper · Member · Mar 25, 2014 at 9:35 am

  • Copy link

  That worked perfectly. Thank you!

• 

  jeremeylduvall · Member · Mar 25, 2014 at 2:21 pm

  • Copy link

  Great to hear! Let me know if you need anything else.