Hello,
I am writing a software documentation using Hugo with Learn team, and I have a problem with rendering bash code.
See, for example:
https://ihrivnac.github.io/installation/examples/
and the code block after:
"To configure the build, change into the build directory and run CMake with either -DVMC_WITH_Geant4"
I would like to prevent from line wrapping, and see always just 5 lines, with eventually a scroll bar below the code if the code does not fit in the window.
Would you have a suggestion how to achieve this?
The documentation source code is at:
Thank you,
You seem to have solved that because in my case it’s 5 lines 
If in doubt, you need the three backticks before each code block and after each codeblock and Hugo will render as you type (with all spaces/newlines as typed).
Don’t know though how to type the backtick here… ` << that one. (if it’s shown)
Thank you for looking at this. It seems that it depends on your defaults. On my side, the default looks like in the attachment. When I resize the page, the text gets shrunk to 5 lines, as you see it.
Ah, I am afraid that is what is wanted in the code. The width is not wide enough for the whole line. I did not check hat happens here on smaller widths…
From a CSS point of view what you want to do is
overflow-x: scroll;
on the class of the code template. I would say the following code will do the trick. Add it to your stylesheet:
pre code {
overflow-x: scroll;
}
But this will be very specific for this stylesheet. Could be breaking things.
If that doesn’t work use !important:
pre code {
overflow-x: scroll !important;
}
That’s the “I stomp my foot on the floor so just do it” notation.
Thank you. I tried it out, but it makes no effect.
Weird. Your screenshot seems to be 1174px wide but looks like a mobile phone screenshot. I don’t think there are many screen configurations that will end up like this. “Normal” 1200 pixel width screens should look fine.
Do you have any accessibility tools running that make fonts bigger? Any zooming going on? I think the issue might be only on your screen…
The screenshot is just for a rectangle selection on the screen; I work on Mac with a default display resolution 1440x900 and Chrome, also with defaults (Font size: Medium, Page size 100%)
And the snapshot was done on the screen displayed without zooming on the page.
Hi,
You could try to play around with white-space:pre; and see if that works for you.
Hello this support ticket appears to be about CSS and it is OT,
This forum is reserved only for Hugo support questions.
Also for CSS and frontend questions about specific themes it’s always best to ask in those themes’ repositories. In this case the Learn theme’s GitHub repo
Thank you for the understanding.
P.S. For future reference please have a look at the Requesting Help forum guidelines.
