Set width when using syntax highlighting and code fences


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

With or without line numbers?

for code fences - i prefer to use linenumbers

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

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

@jmooring yup

:slight_smile: please


```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


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



Try it:

git clone --single-branch -b hugo-forum-topic-26544 hugo-forum-topic-26544
cd hugo-forum-topic-26544
hugo server


  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

Nice one thanks @jmooring

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

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