How do I change syntax highlighting CSS to a blog hosted on WordPress.com?

Question

I've a blog hosted on WordPress.com, and i purchased the "Custom CSS" update to modify CSS. Now I want to change some CSS options of Syntax Highlighting provided by Wordpress.com. For example, i want that

   [code lang="C"] int main() { } [/code] 

will be displayed with a black background instead of standard white one. I've added in Wordpress.com Appareance > Modify CSS the following code:

 .syntaxhighlighter
 {
    background-color: black !important;
 }

As explained here, but it doesn't works. Any idea?

Answer 1

The solution is to not only change the background of the whole syntaxhighlighter, but also of each line, similar to this:

.syntaxhighlighter
{
    background-color: black !important;
}
.syntaxhighlighter .line .number
{
    color: white !important;
    background-color: black !important;
}
/* First line */
.syntaxhighlighter .line.alt1
{
    background-color: black !important;
}

/* Second line */
.syntaxhighlighter .line.alt2
{
    background-color: black !important;
}

As you're using black as a background-color, i advise you to ensure that color has enough contrast compared to it.

Also, using the firebug plugin for firefox you can see exactly which CSS rule gets applied where, and which classes are availble for styling. (a must when working on hosted systems.)

BTW: I found the soluion at the second link you gave