# OT: Code highlight not rendered completely

**URL:** <https://discourse.gohugo.io/t/ot-code-highlight-not-rendered-completely/32892>\
**Category:** support\
**Created:** [May 14, 2021, 10:15pm UTC](https://discourse.gohugo.io/t/ot-code-highlight-not-rendered-completely/32892 "2021-05-14T22:15:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![BDHU](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bdhu/32/14364_2.png) [@BDHU](https://discourse.gohugo.io/u/BDHU)\
**Post date:** [May 14, 2021, 10:15pm UTC](https://discourse.gohugo.io/t/ot-code-highlight-not-rendered-completely/32892/1 "2021-05-14T22:15:19Z")

</div>

Here is an illustration for my problem:

[https://www.bodunhu.com/blog/posts/linux-program-measurement-and-mmap/#memory-map](https://www.bodunhu.com/blog/posts/linux-program-measurement-and-mmap/#memory-map)

The problem is when I scroll to the right, all the code and texts don’t come with the background highlight. It seems only the portion inside the column width get rendered. The theme I’m using is [mini](https://github.com/nodejh/hugo-theme-mini). In my config, the setting that seems to relate to syntax highlights are:

```
markup:
  goldmark:
    renderer:
      unsafe: true
  highlight:
    guessSyntax: true
    style: emacs

```

I use the original style.css file in the theme and didn’t make any changes.

The sections related to code and highlight are defined as:

```
.highlight pre {
   padding: 7px;
}

.highlight {
   max-width: 100%;
   overflow-x: auto;
}
p code {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
  font-size: inherit;
  background-color: rgba(0, 0, 0, 0.06);
  padding: 0 2px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 2px 2px;
  line-height: inherit;
  word-wrap: break-word;
  text-indent: 0;
}
pre code {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
}

```

It seems the original theme’s site also has this problem. I’m not really familiar with html or css. Any help or hint is appreciated!

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 15, 2021, 1:23am UTC](https://discourse.gohugo.io/t/ot-code-highlight-not-rendered-completely/32892/2 "2021-05-15T01:23:55Z")

</div>

In your CSS replace this:

```auto
.highlight pre {
  padding: 7px;
}

```

with:

```auto
.highlight pre {
  padding: 7px;
  overflow-x: auto;
}

```

---

<div class="post-metadata">

**Author:** ![BDHU](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bdhu/32/14364_2.png) [@BDHU](https://discourse.gohugo.io/u/BDHU)\
**Post date:** [May 15, 2021, 1:41am UTC](https://discourse.gohugo.io/t/ot-code-highlight-not-rendered-completely/32892/3 "2021-05-15T01:41:33Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [May 17, 2021, 1:41am UTC](https://discourse.gohugo.io/t/ot-code-highlight-not-rendered-completely/32892/4 "2021-05-17T01:41:57Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.