dataCobra / hugo-vitae

Vitae is a blog theme for Hugo that focuses on your content.
GNU General Public License v3.0
131 stars 61 forks source link

Dark mode markdown codeblock background is white #84

Open celeroncool opened 2 years ago

celeroncool commented 2 years ago

I just upgraded my sites vitae theme to the latest version, and I noticed that when using codeblocks with markdown codeblock https://markdown.land/markdown-code-block The codeblock background is set to

.highlight {
    background: 0 0;
        background-color: rgba(0, 0, 0, 0);
    background-color: var(--bg-color);
}

But later on it is set to

element {
    background-color: #fff;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

This causes code to be unreadable in dark mode. This does not affect inline code without newline after codeblock "```".

Capture

dataCobra commented 2 years ago

Hi @celeroncool,

thank you for reporting this issue.

I'll have a look at this and try to fix it.

Regards, Ben

dataCobra commented 2 years ago

Hey @celeroncool,

I'm not able to replicate your problem. Could you please tell my which syntax highlighting you're using?

I use monokai as set in the example config.toml.

Regards, Ben

vladvasiliu commented 2 years ago

Hi,

I can actually reproduce this, with the example config for pygmets, using either monokai or colorful theme.

pygmentsstyle = "monokai"
pygmentscodefences = true
pygmentscodefencesguesssyntax = true
dataCobra commented 2 years ago

Hi @vladvasiliu @celeroncool,

I'm not able to reproduce the Issue with the given information. :frowning_face:

Is it possible that you give me some example content that is rendered wrong?

Regards, Ben

vladvasiliu commented 2 years ago

Sure. Here's the repository that I'm trying to use: https://github.com/vladvasiliu/blog, and a page that exhibits the behaviour: https://github.com/vladvasiliu/blog/blob/a6d9340f95a5f88f15a94eb9664110a2f1854b25/content/post/20180827-0922-ipv6_prefix_delegation_freebsd.md

The latest commit over there is quite old and uses an old version of the theme. I updated the theme locally to the latest stable version and built the site with hugo 0.95.0. Nothing else was changed.

edit: I've only tried this on Firefox 98.

dataCobra commented 2 years ago

Hello,

@vladvasiliu thanks to your latest message I was able to reproduce the issue.

It seems like your markup configuration uses a style that the theme is yet not compatible with.

I'll try to fix this problem.

Here the snippet from your config that I'm referring to:

[markup]
  [markup.highlight]
    codeFences = true
    noClasses = true
    guessSyntax = true
    lineNos = true
    lineNumbersInTable = true
    style = "manni"
vladvasiliu commented 2 years ago

Thanks, can confirm it works if I switch to monokai.