Additional CSS for syntax code doesn't apply ?

  • Unknown's avatar
    justetools · Member ·

    Hi !

    I’m having trouble with my website, for example on this page. (It uses the Maywood theme)

    I want to change my code syntax highlighter block background color otherwise it is white on white.

    I’ve tried adding this to my additional CSS:

    /* Change code background color */
.syntaxhighlighter {
	background-color: f6f6f6 !important;
}

.syntaxhighlighter .line .number {
	color: f6f6f6 !important;
	background-color: f6f6f6 !important;
}

.syntaxhighlighter .line.alt1 {
	background-color: #f6f6f6 !important;
}

.syntaxhighlighter .line.alt2 {
	background-color: #f6f6f6 !important;
}

    This does work in preview but not once on the website.
    This is not a cache issue (I’ve tried refreshing with Ctrl+F5 and opening the page on another software for the first time).

    Even stranger, if I leave the customizer and then come back, the CSS won’t apply.
    But, as soon as I change any character into the CSS, it will apply again as wanted.

    Does anyone have an idea of what could cause this issue ?

    Thanks a lot !

    The blog I need help with is: (visible only to logged in users)

  • staff-totoro · Staff ·

    Hi there,

    The default background color of the syntax highlighter block hard to override directly, as it also as !important declarations. So your custom CSS needs more specificity in order to override the built in styles in this case.

    To do that you can add the class for the containing div that the syntax highlighter is contained within, which is

    .wp-block-syntaxhighlighter-code

    The modified code looks like this, and worked well in my tests. Does it work for you if you apply it to your site?

    /* Change code background color */
.wp-block-syntaxhighlighter-code .syntaxhighlighter {
	background-color: f6f6f6 !important;
}

.wp-block-syntaxhighlighter-code .syntaxhighlighter .line .number {
	color: f6f6f6 !important;
	background-color: f6f6f6 !important;
}

.wp-block-syntaxhighlighter-code .syntaxhighlighter .line.alt1 {
	background-color: #f6f6f6 !important;
}

.wp-block-syntaxhighlighter-code .syntaxhighlighter .line.alt2 {
	background-color: #f6f6f6 !important;
}

    Hope that helps. Please let us know if you have any more questions.

  • The topic ‘Additional CSS for syntax code doesn't apply ?’ is closed to new replies.