vitepress

vitepress copied to clipboard

Is your feature request related to a problem? Please describe.

Is that possible to add a special syntax to enable line wrapping in code block, e.g. something like :::js:line-numbers syntax, maybe :::js:wrap? Optionally provide a global configuration and :::js:nowrap, the same as lineNumbers?

For a single code block, I can wrap in a <div> and use inline style to force child <code> to wrap by !important, but there's no way I can do so for code-group. So I guess we have to have a built-in syntax by vitepress to handle such things.

And need to make sure it can be used together with :line-numebrs so it won't break anything

Describe the solution you'd like

inline: to force wrap:

```js:wrap

to force no-wrap:

```js:nowrap

global (default to wrap or not):

export default {
  markdown: {
    wrapCodeBlock: true
  }
}

Describe alternatives you've considered

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

And need to make sure it can be used together with :line-numebrs so it won't break anything

This will be difficult. Code wrapping doesn't work properly with current line number implementations. Refer https://github.com/vuejs/vitepress/issues/2567#issuecomment-1616599682

@brc-dd I see, as I have read the related issue. Then is that reasonable to implement without compatibility with line-number? I think this is a common case, e.g. displaying long query string

Yeah we can add the wrap feature.

Yeah we can add the wrap feature.

I read part of the source code, I found that the current vitepress code block does not seem to support automatic line wrapping, I will continue to pay attention to this issue Thank you developers!