Code chunk lines so far are wrapping. After playing around a bit with both the markdown syntax of 3 backticks and the language name and the highlight shortcode, {{< highlight language “linenos=false” >}} by adding various widths and overflow options to .highlight and .highlight > pre , only setting a really wide width for the pre tag seems to straighten the lines (adding flex and flex-wrap:nowrap to divs and parents does nothing).
In this case however, it throws out the widths for the rest of the page. One option could be to set max-width for divs and sections throughout the page, but that couldn’t be right.
Is anyone familiar with a quick setting that adds no line wrapping to code chunks with a scrollbar?
This is difficult to answer without access to your project’s source code. By default, without any CSS resets or style sheets, these do not wrap:
```text {linenos=false}
one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen twenty twenty-one twenty-two twenty-three twenty-four twenty-five twenty-six twenty-seven twenty-eight twenty-nine
```
```text {linenos=true}
one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen twenty twenty-one twenty-two twenty-three twenty-four twenty-five twenty-six twenty-seven twenty-eight twenty-nine
```
Please post a link to the public repository for your project, or to a repository that demonstrates the problem.
Bootstraps reboot.css does not wrap preformatted text (in version 4 and 5). flex and flex-wrap have no influence on inline text being wrapped they are for blocklevel elements. overflow might be the culprit.
You typically debug this not by disabling whole CSS files but by doing a right click on the section and check the code and what stylesheets are applied to it. But that whole problem is better suited on Stackexchange.
“Is anyone familiar with a quick setting that adds no line wrapping to code chunks with a scrollbar?” is at lease Hugo community relevant. As is jmooring’s reply.
Temporarily disabling reboot.css (unfortunately on this site, I can’t get rid of everything bootstrap immediately), suggests anyway it’s a <pre> issue, example: white-space:pre-wrap; , even if that doesn’t resolve it at the moment.
You’re welcome to inspect the post in the browser and see if you spot any obvious fix (overlook if you can other site deficiencies , they are to start time related.
Now it seems another issue arises with the code blocks. Toggling on/off chrome’s device inspector to Galaxy S5 gets any post with backtick code blocks to render without overflowing the screen. However, some posts don’t render within the screen on an actual Galaxy S5, and they all have basically the same markdown. Here are two examples:
Given the markdown is largely the same, it may have something to do with the length of the lines in the code chunk? That is the reason I’m looking into the word wrap issue.
Thanks. As one would expec, and as you suggest, the pre code {white-space:pre-wrap;} does straighten the lines. The issues with how that plays out in practice are related to css-grid settings, as well as padding settings in the pre {} tag. No idea how disabling reboot played into that, as there seems no pre-wrap setting in reboot. Could be the additional reset used later addressed some reboot code, which broke the cascade. Would like to mess around with it more, but you know how it goes. Cheers
, they are to start time related.