Code syntax highlighting problems on mobile

support
1

Hello, I’m having problems with the syntax highlighting on mobile. That’s how it looks on iPhone:

IMG_0634
IMG_06341170×1981 136 KB

The first block doesn’t create horizontally scrollable box and the second one has weird font size.

My SCSS that might mess with the chroma highlighting:

code {
  font-family: $font-main, monospace;
  font-size: $text-size;
  color: darken(desaturate($text-color-rightpane, 100%), 40%);
}

table {
  margin-left: auto;
  margin-right: auto;
  margin-top: 48px;
  margin-bottom: 48px;
}

table tr th {
  text-align: left;
  padding: 6px 13px;
  border-bottom: 1px solid;
  margin: 0;
}

table tr td {
  text-align: left;
  padding: 6px 13px;
  margin: 0;
}

Here you can find the article that the shot above shows Learning Zig - first hour...

Also, the config.toml:

pygmentsUseClasses     = true               # generate classes used by the CCS
pygmentCodeFences      = true               # enable highlighting for ``` markdown fences

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
  [markup.highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = false
    hl_Lines = ""
    lineAnchors = ""
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    style = "monokai"
    tabWidth = 4
2

Hi there,

This looks like a CSS/SCSS question, which is not Hugo-specific, and is outside the scope of this forum.

3

Yeah after thinking about this it doesn’t seem like Hugo is at fault here. I think it’s ok to close this. I’ll look for help elsewhere. Thanks.