How to change code snippet background in Jekyll blog

Help
1

I want to change the background of my code snippets from black to something lighter (like light grey.) I have already tried the suggestion from this previous SO question which suggests to change the _base.scss in the _sass folder. As you can see from my _base.scss, the code snippet background is specified already as #eef, which is a lighter color. However, my blog does not obey that color.

/**
 * Code formatting
 */
pre,
code {
    font-size: 15px;
    border: 1px solid $grey-color-light;
    border-radius: 3px;
    background-color: #eef;
}

I then looked in another file called _variables.scss located in the same _sass file. The code contained in that file is this:

// Inline code block font color
$codeblock-font-color: #8cc4d8;

// Inline code block background color
$codeblock-background-color: #333333;

It looks like this would be the place to change my code snippet background from dark (#333333) to something else lighter like #F5F5F5 (HTML White Smoke) however, when I tried that, again, the blog does not obey.

When writing my code in the markdown file, I use the three backticks. Any help would be appreciated, thank you.

2

Chomes inspector is your friend here, it will show you the css that is controlling it, and you can edit it in the browser to get what you want and then find that in your css/sass and update it accordingly.

In Chrome right click in the code block and select Inspect, then start poking around. It is fairly amazing if you have not done it before.

You may have multiple css statements overriding each other.

3

You were right - I had multiple CSS’s overwriting each other. Have since cleaned it up. Thank you so so much!