How can I get a transparent background, while still having Syntax Highlighting?

So basically, I’m trying to make the code block the same color as the background (In this case white), while still keeping the colors on the code.

What I’ve Tried

I’ve tried overriding the theme’s CSS rules by creating a new CSS file, inserting the following, and pointing to it in the HTML document:

.reveal pre code {
    display: block;
    padding: 5px;
    overflow: auto;
    max-height: 400px;
    word-wrap: normal;
    background: #FFFFFF;
    color: #DCDCDC;
}

But the background still stayed the same as the theme I was using. (Agate)

Any and all help is appreciated, thank you. I’m new to Highlight JS, so please forgive if I made any mistakes.

>Solution :

Try this CSS:

 .reveal pre code, .hljs {
    background-color: #FFFFFF !important; 
    color: #DCDCDC; 
    padding: 5px;
    overflow: auto;
    max-height: 400px;
    word-wrap: normal;
}
.reveal pre, .hljs {
    box-shadow: none !important;
}