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

support
1

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

[markup]
  [markup.highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = true
    hl_Lines = ""
    lineAnchors = ""
    lineNoStart =1
    lineNos = false
    lineNumbersInTable = false
    noClasses = true
    style = "gruvbox"
    tabWidth = 4

[markup.goldmark.renderer]
  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!

image
image1230×196 5.45 KB

2

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.

3

Is your css a chroma generated one?

Cf. hugo gen chromastyles | Hugo

4

I nees this css

5

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

6

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.

7

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

8

solved

9

Please post your solution…

1 Like
10

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
https://swapoff.org/chroma/playground/