How can I avoid the syntax highlight backgroundcolor overwrite by other css

Hi I use this css in my blog theme. then I found it will affect the syntax highlight.

    <link rel="stylesheet" href="{{ "hugo-theme-console/css/terminal-0.7.2.min.css" | absURL }}">

my markup config

    anchorLineNos = false
    codeFences = true
    guessSyntax = true
    hl_Lines = ""
    lineAnchors = ""
    lineNoStart =1
    lineNos = false
    lineNumbersInTable = false
    noClasses = true
    style = "gruvbox"
    tabWidth = 4

  unsafe = true

then code looks like this . the background color is white. if I comment that terminal css it works fine. Thanks for any help!

I doubt that CSS is on-topic here. If you don’t like the styling, you should modify it (and no, that does not happen in the markup config section).

You should either modify the CSS you include to your liking or add your own file to provide the settings you prefer. How you do that can depend on your theme.

Is your css a chroma generated one?

Cf. hugo gen chromastyles | Hugo

I nees this css

syntax highlight css? I don’t generated it. just set markup.highlight it will highlight code

If you need it, you either have to live with what it does or modify it in a way that suits you. That’s not related to Hugo.

I had said this is this css problem so I asked fore help in there? did you read this issue?


Please post your solution…

1 Like

Better delete the your config and using this :grin:

My config chroma syntax hightlight style , im using this in config.toml, only two line

PygmentsCodeFences = true
PygmentsStyle = “xcode”

Then add css overflow auto

Try chroma styles you prefered