Search code examples
csswordpresssyntax-highlighting

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

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.

 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/

Solution

  • What is the problem in using this way:

    .syntaxhighliter table tbody tr .code code.string {
    font-size: 12pt !important;
}

    Screenshot

    SyntaxHighlighter

    Full image here...