hugo-theme-anubis
hugo-theme-anubis copied to clipboard
markdown: Enabling line numbers causes text to appear outside scroll area
Hello,
I have been playing around with upgrading to a more recent version of hugo
as well as a more recent revision of your excellent theme. When using
anubis at commit edc508fa (the current commit pointed to by master
)
and hugo v0.93.0, markdown code fences with line numbers do not render
as expected when they contain "long" lines of text. This issue does not
occur when the line number setting is omitted.
Here is a screenshot for reference:

Here are the markdown code fences for reference (the \
character is there
to escape the fences for GitHub, and can be removed):
\```c
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
\```
\```c {linenos=true}
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
\```
I also tried this with hugo v0.99.0 and experienced the same behavior (I could not test this with the latest hugo release, v0.99.1, because it does not compile).
I also tried reproducing this issue using anubis commit 350ae2d with the previously mentioned versions of hugo and did not experience this issue. So... perhaps this is an issue with hugo?
Thank you for developing this awesome theme.
Fixed by adding overflow: auto
to highlight class.
Reason: Hugo generates code block with line numbers as a div with table inside, not pre tag.
Thank you for the super fast fix, Dmitry. That fixed the issue!
I may have spoken a little too soon :)
It looks like the issue is resolved when using hugo v0.92.2 (this just happens to be the version I have been using). While experimenting with v0.99.0, it looks like there is still an issue where the code fence background does not render properly:

(this uses the same markdown code fence as before)
Finally 😢 fixed it