How to target Syntax highlighter with CSS to change font size of code on display

1 Views

I’m looking to target the wordpress syntax highliter with css to change the default font size, I cannot add any usefull css classes to the div’s and I cannot seem to target it without targeting all div’s globally!

Here’s the complete css path from g-chrome, from the auto generated div right the way through to the code.

Read More
 div#"individual-ID-for-each-code-example-here".syntaxhighliter div.lines div.line.alt1 table tbody tr td.content code.string

I’ve tried targeting .syntaxhighliter and all the others, including pre with no luck, is there something simple I’m missing here?

Here’s the html: 

<pre class="brush: php; title: ; notranslate" title="">

<!--CODE GOES HERE-->

</pre>

If it helps, here is the page-itself:

http://msc-media.co.uk/blog/

Post Views: 1

Related posts

Leave a Reply

3 comments

  2. Thanks to Praveen Kumar for your contribution, but the .css file directed to would only have changed the font size on the default theme, If I ever chose to swap themes in the future, the font size would revert back.

    I changed the font-size in the shCore.css as this will apply to all of the theme templates. (Line 56 in syntax highlighter 2).

    The CSS mentioned:

    .syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody
{
    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", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
    font-weight: normal !important;
    font-style: normal !important;

    font-size: 0.98em !important; <- This! (Reduced from 1em, surprisingly this was enough)

    /*min-height: inherit !important; *//* For IE8, FF & WebKit */
    /*min-height: auto !important;*/ /* For IE7 */
    direction: ltr !important;
}

  3. With v3.6.2, I did it in two steps.

    1. In the SyntaxHighlighter Settings, set Additional CSS Class(es) to something like “myCustomClass`.
    2. In Appearance > Additional CSS, enter the following:
    
.syntaxhighlighter.myCustomClass a,
.syntaxhighlighter.myCustomClass div,
.syntaxhighlighter.myCustomClass code,
.syntaxhighlighter.myCustomClass table,
.syntaxhighlighter.myCustomClass table td,
.syntaxhighlighter.myCustomClass table tr,
.syntaxhighlighter.myCustomClass table tbody,
.syntaxhighlighter.myCustomClass table thead,
.syntaxhighlighter.myCustomClass table caption,
.syntaxhighlighter.myCustomClass textarea {
  /* custom styling goes here */
}