Jekyll - Code block background colours not consistent

Question

I have a Jekyll website that I'm running locally with bundle exec jekyll serve, using the Minima default theme.

When I use a code block, the background colour of the box and the background colour of the text in the box is different, resulting in an ugly presentation:

```r
filter(grepl("A", Source)) %>%
group_by(Source) %>%
summarise(Amount = sum(Amount)) %>%
mutate(Percentage = Amount / sum(Amount) * 100)
```

This issue occurs for most languages I define at the start of the code block and when no language is defined (e.g. ```r, ```python ```), but not funnily not for ```shell-script.

The relevant _sass/minima/_base.scss section (I think) looks like this:

/**
 * Blockquotes
 */
blockquote {
  color: $grey-color;
  border-left: 4px solid $grey-color-light;
  padding-left: $spacing-unit / 2;
  @include relative-font-size(1.125);
  letter-spacing: -1px;
  font-style: italic;

  > :last-child {
    margin-bottom: 0;
  }
}



/**
 * Code formatting
 */
pre,
code {
  @include relative-font-size(0.9375);
  border: 1px solid $grey-color-light;
  border-radius: 3px;
  background-color: #e6e6e6;
}

code {
  padding: 1px 5px;
}

pre {
  padding: 8px 12px;
  overflow-x: auto;

  > code {
    border: 0;
    padding-right: 0;
    padding-left: 0;
  }
}

How do I make the entire code block use the grey colour currently only being used for the text background?

edit: After disabling the rouge syntax highlighter the code blocks appear correctly, along with the syntax highlighting.

edit: This issue also occurs when the website is built with github pages