How to change the font size for a piece of code that is displayed as part of a web page?

Specifically, my web page contains a Python script, displayed using SyntaxHighlighter. The default font size results looks okay, but some code lines are a bit too long so that a horizontal scroll bar appears. To get rid of the scroll bar, I would like to reduce the font size of displayed code by 1 pt or so. For consistent appearance, I would like to impose a uniform setting for the entire web site.

Web search gave the answer: use Firebug to find out which css are active, then modify them. However, in my page Firebug finds no active css (under the CSS tab, it just says "There are no rules. You can create a rule."). The code fragment is embedded in <pre>..</pre>, which is embedded in several <div>..</div>, which is embedded in a table. At no level I see a font-size setting command.

Which adminstration submenu allows me to change the font size for specific displays? Or which configuration file should I edit?

  • 1
    Welcome to Drupal Answers :) The style for SyntaxHighlighter is controlled entirely through CSS, so it's a little unclear what you mean by in my page no css is active, could you clarify? As I understand it should be as easy as adding rules to your theme's CSS to override the defaults – Clive May 30 '16 at 14:34
  • I edited the question to clarify that Firebug sees no CSS whatsoever. – Joachim W May 30 '16 at 20:39
  • That can't be accurate though, the JS library uses only CSS to format the code. Have a look at the link in my previous comment, it literally has everything you need in it. And try Chrome for a bit (preferably Canary), the dev tools are much better – Clive May 30 '16 at 20:43
  • Perhaps the include scripts are too involved to be correctly analysed by Firebug. Anyway, your advise looks promising... In our Drupal installation, the directory drupal/sites/all/libraries/syntaxhighlighter_3.0.83/styles contains lots of CSS files. How do I find out which of them is actually used? – Joachim W May 30 '16 at 20:46
  • 1
    Links to the CSS files will be in the page source, and network/resources tab in dev tools...but you don't need to look at those really. Adding .syntaxhighlighter { font-size: 12px !important; } to you theme's CSS is about all you need – Clive May 30 '16 at 20:49

Browse other questions tagged or ask your own question.