CODEWITHSUNDEEP
highlight.js
Skrillx
Skrillx

Reputation: 72

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

Picture of the highlighted code on my website

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.

Upvotes: 0

Views: 174

Answers (1)

Alireza Hedayati
Alireza Hedayati

Reputation: 72

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;
}

Upvotes: 1

Related Questions