Overriding all base16 colors possible still leaves grey lines I can't get rid of

[ElectricRCAircraftGuy]

Environment

This repo: https://github.com/ElectricRCAircraftGuy/ElectricRCAircraftGuy.github.io

This file: https://github.com/ElectricRCAircraftGuy/ElectricRCAircraftGuy.github.io

At line 57, before the SAS @imports, add this:

$base00: #f6f6f6;
$base01: #f6f6f6;
$base02: #f6f6f6;
$base03: #f6f6f6;
$base04: #f6f6f6;
$base05: #f6f6f6;
$base06: #f6f6f6;
$base07: #f6f6f6;
$base08: #f6f6f6;
$base09: #f6f6f6;
$base0a: #f6f6f6;
$base0b: #f6f6f6;
$base0c: #f6f6f6;
$base0d: #f6f6f6;
$base0e: #f6f6f6;
$base0f: #f6f6f6;

I still see these grey lines I can't seem to get rid of no matter what I do:

• Minimal Mistakes version: 4.20.2
• Ruby gem or remote theme version:
• Jekyll version:
• Git repository URL: https://github.com/ElectricRCAircraftGuy/ElectricRCAircraftGuy.github.io
• GitHub Pages hosted (if yes provide URL to site): https://gabrielstaples.com
• Operating system: Ubuntu 20.04

$ gem list jekyll

*** LOCAL GEMS ***

jekyll (4.1.1, 3.9.0)
jekyll-avatar (0.7.0)
jekyll-coffeescript (2.0.0, 1.1.1)
jekyll-commonmark (1.3.1)
jekyll-commonmark-ghpages (0.1.6)
jekyll-default-layout (0.1.4)
jekyll-feed (0.15.1)
jekyll-gist (1.5.0)
jekyll-github-metadata (2.13.0)
jekyll-include-cache (0.2.1)
jekyll-mentions (1.6.0)
jekyll-optional-front-matter (0.3.2)
jekyll-paginate (1.1.0)
jekyll-readme-index (0.3.0)
jekyll-redirect-from (0.16.0)
jekyll-relative-links (0.6.1)
jekyll-remote-theme (0.4.2)
jekyll-sass-converter (2.1.0, 1.5.2)
jekyll-seo-tag (2.7.1, 2.6.1)
jekyll-sitemap (1.4.0)
jekyll-swiss (1.0.0)
jekyll-tagging (1.1.0)
jekyll-theme-architect (0.1.1)
jekyll-theme-cayman (0.1.1)
jekyll-theme-dinky (0.1.1)
jekyll-theme-hacker (0.1.2)
jekyll-theme-leap-day (0.1.1)
jekyll-theme-merlot (0.1.1)
jekyll-theme-midnight (0.1.1)
jekyll-theme-minimal (0.1.1)
jekyll-theme-modernist (0.1.1)
jekyll-theme-primer (0.5.4)
jekyll-theme-slate (0.1.1)
jekyll-theme-tactile (0.1.1)
jekyll-theme-time-machine (0.1.1)
jekyll-titles-from-headings (0.5.3)
jekyll-watch (2.2.1)
jekyll_test_plugin (0.1.0)
jekyll_test_plugin_malicious (0.2.0)
minimal-mistakes-jekyll (4.21.0, 4.20.2)

Expected behavior

I expect that when I set all base16 colors to the exact same grey color, all I see is a big section all this color, with no distinguishable text or code in it whatsoever until I highlight something.

Steps to reproduce the behavior

See above.

[ElectricRCAircraftGuy]

Eventual goal is to get a Stack Overflow or GitHub-looking light syntax highlighting for code. #2278 (comment) I've attempted a handful of times, each time unsuccessfully, over the last few months.

[ElectricRCAircraftGuy]

@mmistakes, Ok, I found the problem, but I need help resolving it please. I added this to main.scss:

code {
  /* force background code highlighting inside headings & all other elements too */
  background: $code-background-color;
}

My intent was to make headings with code in them to have the code show up, like this:

Example heading with code: some_func()

Without my extra lines above, the above heading would NOT have some_func() show up as code, but I need it to. Additionally, I'd like it to be a darker grey in inline code like this, than in block code like this:

some code
some more code

...just like on Stack Overflow.

example:

Inline code and block code are highlighted in a different shade of grey:

How can I achieve this?

Note: I'm struggling with Jekyll, CSS, etc. I've probably put 12+ hours into this one thing alone: trying to get syntax highlighting like Stack Overflow and GitHub on my website.

[mmistakes]

Try using your browser's web developer tools to inspect the elements. <code> elements have a transparent background which is set with this Sass variable $code-background-color: rgba(27,31,35,0.05)

That transparent "grey" is darkening when stacked on the code block background.

code {
    background: rgba(27,31,35,0.05);
}

You'll probably need to change that background color to match the background-color set on div.highlight otherwise you're going to have two different grays.

As mentioned before you'll need to change the base16 variables to a GitHub base16 scheme, changing all the values to the same hexcode isn't going to give you the correct colors.

If you use these values you'll get the GitHub styling.

$code-background-color: #fafafa;
$base00: #fafafa;
$base01: #f5f5f5;
$base02: #c8c8fa;
$base03: #969896;
$base04: #e8e8e8;
$base05: #333333;
$base06: #ffffff;
$base07: #ffffff;
$base08: #ed6a43;
$base09: #0086b3;
$base0a: #795da3;
$base0b: #183691;
$base0c: #183691;
$base0d: #795da3;
$base0e: #a71d5d;
$base0f: #333333;

Which will turn something like this:

```scss
body {
  margin: 0;
  padding: 0;
  color: $text-color;
  font-family: $global-font-family;
  line-height: 1.5;

  &.overflow--hidden {
    /* when primary navigation is visible, the content in the background won't scroll */
    overflow: hidden;
  }
}

into this:

If that still doesn't meet your needs then you'll need to replace the entire _syntax.scss with Rouge's CSS for GitHub.

.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight .cm {
  color: #999988;
  font-style: italic;
}
.highlight .cp {
  color: #999999;
  font-weight: bold;
}
.highlight .c1 {
  color: #999988;
  font-style: italic;
}
.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
  color: #999988;
  font-style: italic;
}
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}
.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}
.highlight .ge {
  color: #000000;
  font-style: italic;
}
.highlight .gr {
  color: #aa0000;
}
.highlight .gh {
  color: #999999;
}
.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}
.highlight .go {
  color: #888888;
}
.highlight .gp {
  color: #555555;
}
.highlight .gs {
  font-weight: bold;
}
.highlight .gu {
  color: #aaaaaa;
}
.highlight .gt {
  color: #aa0000;
}
.highlight .kc {
  color: #000000;
  font-weight: bold;
}
.highlight .kd {
  color: #000000;
  font-weight: bold;
}
.highlight .kn {
  color: #000000;
  font-weight: bold;
}
.highlight .kp {
  color: #000000;
  font-weight: bold;
}
.highlight .kr {
  color: #000000;
  font-weight: bold;
}
.highlight .kt {
  color: #445588;
  font-weight: bold;
}
.highlight .k, .highlight .kv {
  color: #000000;
  font-weight: bold;
}
.highlight .mf {
  color: #009999;
}
.highlight .mh {
  color: #009999;
}
.highlight .il {
  color: #009999;
}
.highlight .mi {
  color: #009999;
}
.highlight .mo {
  color: #009999;
}
.highlight .m, .highlight .mb, .highlight .mx {
  color: #009999;
}
.highlight .sb {
  color: #d14;
}
.highlight .sc {
  color: #d14;
}
.highlight .sd {
  color: #d14;
}
.highlight .s2 {
  color: #d14;
}
.highlight .se {
  color: #d14;
}
.highlight .sh {
  color: #d14;
}
.highlight .si {
  color: #d14;
}
.highlight .sx {
  color: #d14;
}
.highlight .sr {
  color: #009926;
}
.highlight .s1 {
  color: #d14;
}
.highlight .ss {
  color: #990073;
}
.highlight .s, .highlight .sa, .highlight .dl {
  color: #d14;
}
.highlight .na {
  color: #008080;
}
.highlight .bp {
  color: #999999;
}
.highlight .nb {
  color: #0086B3;
}
.highlight .nc {
  color: #445588;
  font-weight: bold;
}
.highlight .no {
  color: #008080;
}
.highlight .nd {
  color: #3c5d5d;
  font-weight: bold;
}
.highlight .ni {
  color: #800080;
}
.highlight .ne {
  color: #990000;
  font-weight: bold;
}
.highlight .nf, .highlight .fm {
  color: #990000;
  font-weight: bold;
}
.highlight .nl {
  color: #990000;
  font-weight: bold;
}
.highlight .nn {
  color: #555555;
}
.highlight .nt {
  color: #000080;
}
.highlight .vc {
  color: #008080;
}
.highlight .vg {
  color: #008080;
}
.highlight .vi {
  color: #008080;
}
.highlight .nv, .highlight .vm {
  color: #008080;
}
.highlight .ow {
  color: #000000;
  font-weight: bold;
}
.highlight .o {
  color: #000000;
  font-weight: bold;
}
.highlight .w {
  color: #bbbbbb;
}
.highlight {
  background-color: #f8f8f8;
}

[mmistakes]

Closing as GH issues are for bug reports and there is already an open discussion covering how to modify the syntax highlighting base16 variables.

[ElectricRCAircraftGuy]

Thank you. That was a big help. After some investigating and guessing I determined you generated that block of CSS using rougify style github > out.css, where github is the style, and can be any of the styles as indicated by their filename without the extension, as found here: https://github.com/rouge-ruby/rouge/tree/master/lib/rouge/themes.

UPDATE:

Correction, these are the theme-name options in the command rougify style theme-name:

available themes:
base16, base16.dark, base16.light, base16.monokai, base16.monokai.dark, base16.monokai.light, base16.solarized, base16.solarized.dark, base16.solarized.light, bw, colorful, github, gruvbox, gruvbox.dark, gruvbox.light, igorpro, magritte, molokai, monokai, monokai.sublime, pastie, thankful_eyes, tulip

I found this by running rougify help style:

$ rougify help style 
usage: rougify style [<theme-name>] [<options>]

Print CSS styles for the given theme.  Extra options are
passed to the theme. To select a mode (light/dark) for the
theme, append '.light' or '.dark' to the <theme-name>
respectively. Theme defaults to thankful_eyes.

options:
  --scope       (default: .highlight) a css selector to scope by
  --tex         (default: false) render as TeX
  --tex-prefix  (default: RG) a command prefix for TeX
                implies --tex if specified

available themes:
  base16, base16.dark, base16.light, base16.monokai, base16.monokai.dark, base16.monokai.light,
  base16.solarized, base16.solarized.dark, base16.solarized.light, bw, colorful, github, gruvbox,
  gruvbox.dark, gruvbox.light, igorpro, magritte, molokai, monokai, monokai.sublime, pastie,
  thankful_eyes, tulip