Set width when using syntax highlighting and code fences

1

Hi

Is there a way to set a width for code-fences and highlighting so the text wraps on the page …

I’d like to have a width=500px or something so the user doesn’t have to scroll left-to-right

2

With or without line numbers?

3

for code fences - i prefer to use linenumbers

but sometimes even one long line of code i use syntax highlighting

4

To be clear, you want word wrap with line numbers?

5

@jmooring yup

:slight_smile: please

6

Markdown:

```txt {linenos=inline}
one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen
aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz
0123456789012345678901234567890123456789012345678901234567890123456789
```

CSS:

div.highlight {
  max-width: 500px;
}
div.highlight pre {
  white-space: pre-wrap;
  word-break: break-word;
}

Output:

image

Try it:

git clone --single-branch -b hugo-forum-topic-26544 https://github.com/jmooring/hugo-testing hugo-forum-topic-26544
cd hugo-forum-topic-26544
hugo server

Notes:

  1. What you want is not possible with linenos=table. That’s unfortunate, but a limitation of the Chroma syntax highlighter that Hugo uses to generate the HTML.
  2. The screen capture above is unattractive because, other than the CSS shown above, this is default browser output on Google Chrome (no resets, no normalization, no opinionated styling).
1 Like
7

Nice one thanks @jmooring

BTW I like your git hugo-testing repo … its a cool idea

8

Thanks. The mechanism was heavily influenced by @davidsneighbour, whom I hold personally responsible for several hours of lost personal time. :wink:

2 Likes