[Feature]: enable code-wrapping for shiki-highlighting

[ap0nia]

What problem does this feature solve?

It was possible to enable wrapping with shiki-highlighting by conditionally adding "white-space: pre" to the code element.

However, this could cause breaking changes for people that don't want this style applied to their shiki codeblock. Alternatively, a data attribute could be attached to the element, and the user can apply css targeting it.

What does the proposed API look like?

1. If the code block should be wrapped, apply a data-rp-code-wrapped=true attribute to the element.

<code {...props} data-rp-code-wrapped={codeWrapped}></code>

3. The user can write custom CSS for that data-attribute.

code[data-rs-code-wrapped="true"] {
  white-space: pre-wrap;
}

Alternatively, always apply the white-space style for them, but allow it to be overridden. Or do both strategies; always apply the white-space style, but add a data-attribute that's easy to override the default styles from CSS.

<code style={{ whiteSpace: codeWrap ? 'pre-wrap' : undefined }} {...props} data-rp-code-wrapped={codeWrapped}></code>

[Timeless0911]

How about adding a specific classname for it? like rspress-shiki-code.

[ap0nia]

That makes sense too, and I think there should be a specific class that's applied when the code is wrapped. e.g. rspress-shiki-code-wrapped.