OT: Code highlight not rendered completely

support
1

Here is an illustration for my problem:

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. 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!

2

In your CSS replace this:

.highlight pre {
  padding: 7px;
}

with:

.highlight pre {
  padding: 7px;
  overflow-x: auto;
}
1 Like
3

Thank you!

4

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