# Code syntax highlighting problems on mobile

**URL:** <https://discourse.gohugo.io/t/code-syntax-highlighting-problems-on-mobile/34247>\
**Category:** support\
**Created:** [August 13, 2021, 1:29pm UTC](https://discourse.gohugo.io/t/code-syntax-highlighting-problems-on-mobile/34247 "2021-08-13T13:29:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mronetwo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mronetwo/32/10022_2.png) [@mronetwo](https://discourse.gohugo.io/u/mronetwo)\
**Post date:** [August 13, 2021, 1:29pm UTC](https://discourse.gohugo.io/t/code-syntax-highlighting-problems-on-mobile/34247/1 "2021-08-13T13:29:08Z")

</div>

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

 ![IMG_0634](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/6/67f80b589d0cebce08fd629cdc4cf60a57c0f591.jpeg)

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:

```auto
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...](https://ciesie.com/post/zig_learning_01/)

Also, the _config.toml_:

````auto
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

````

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [August 14, 2021, 10:46am UTC](https://discourse.gohugo.io/t/code-syntax-highlighting-problems-on-mobile/34247/2 "2021-08-14T10:46:38Z")

</div>

Hi there,

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

---

<div class="post-metadata">

**Author:** ![mronetwo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mronetwo/32/10022_2.png) [@mronetwo](https://discourse.gohugo.io/u/mronetwo)\
**Post date:** [August 14, 2021, 1:32pm UTC](https://discourse.gohugo.io/t/code-syntax-highlighting-problems-on-mobile/34247/3 "2021-08-14T13:32:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [August 15, 2021, 10:47am UTC](https://discourse.gohugo.io/t/code-syntax-highlighting-problems-on-mobile/34247/4 "2021-08-15T10:47:40Z")

</div>