How code wrap automatically in new line

[tignioj]

I have some quoted paragraphs of text in the code block, and I want the text to wrap itself instead of showing up on the same line. The reason I don’t use a quote block is because the quoted paragraph has many lines of text, and adding the symbol “>” to each line is cumbersome.

But I can’t find an option to turn on wrap from the documentation: Syntax highlighting | Hugo

• linenos: configure line numbers. Valid values are true, false, table, or inline. false will turn off line numbers if it’s configured to be on in site configuration. table will give copy-and-paste friendly code blocks.
• hl_lines: lists a set of line numbers or line number ranges to be highlighted.
• linenostart=199: starts the line number count from 199.
• anchorlinenos: Configure anchors on line numbers. Valid values are true or false;
• lineanchors: Configure a prefix for the anchors on line numbers. Will be suffixed with -, so linking to the line number 1 with the option lineanchors=prefix adds the anchor prefix-1 to the page.
• hl_inline Highlight inside a <code> (inline HTML element) tag. Valid values are true or false. The code tag will get a class with name code-inline.

[jmooring]

Can you provide a small markdown example of what you are trying to achieve? Line wrapping in a fenced or indented code block is, for the most part, not desirable.

[tignioj]

thanks for your reply, I use obsidian to manage my articles, which wrap and display well, while hugo does not wrap and not easy to read.

obsidian(Markdown editor):

hugo:

In this case I think auto-wrap is easier to read because I don’t have to drag the slider, I hope that there’s an option to turn on auto-wrap.

[tignioj]

The text was copied from somewhere else, and if I used a reference block I would also need to escape each html tag and add the symbol “>” to each line, which I thought would be a hassle, so I put them in the code block

[nfriedli]

Wrapping is a CSS problem. So add something like this in your stylesheet:

code[data-lang=text] {
    text-wrap: wrap;
}

[chrillek]

You’d make it easier to read the original text if you posted it as code instead of a screenshot using a light font on a dark background, with too little contrast.

[tignioj]

Tanks for your reply, Doesn’t seem to work, I’m sure the selector selected the code block.

[chrillek]

It’s not a Hugo issue in any case. You might try posting a link to your repo or at least the website so that one could have a look at the whole image.

[tignioj]

Thanks for your tips, in order to show this article (not yet finished), I posted it here:

hugo SEO optimization

[chrillek]

Remove the horrible table stuff around the code and the lines wrap just fine. You don’t need line numbers anyway, do you? And a table is semantically wrong, anyway.

It is still not a Hugo issue, so you should continue your quest in places dealing with HTML and CSS problems.

[nfriedli]

Your source is not the same as the one displayed in a screenshot. An option is added and everything changes.

I don’t want to waste time with people who don’t give clear information and multiply messages.

Bye.

[tignioj]

Thank you, after remove the line number and add the css code, it’s working fine.

[tignioj]

Oh I’m sorry, your solution is fine, after remove the line number and add the css code that you given, it’s working well.