Disable text wrapping for code blocks

[3goats]

Hi,

I see for tailwind you can disable text wrapping as per here - https://tailwindcss.com/docs/text-wrap#no-wrap

However, this doesn't seem to work for codeblocks. Is there a way to do this in Skeleton UI ?

[endigo9740]

Hey @3goats we provide a small blurb about this at the bottom of the docs, but wrapping is set by default as it's typically more accessible:
https://www.skeleton.dev/utilities/codeblocks#accessibility

Unfortunately one of the limitations of Skeleton v2 is it can be hard to overwrite "base" styles for many of the elements within the components. We only provided a limit set of style props per each component. This is an key issue we're resolving in Skeleton v3. But in the meantime, here's what you can do.

First, here's where the wrap style is defined:
https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/CodeBlock/CodeBlock.svelte#L48

This is then applied to the <pre> tag towards the bottom of the file:
https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/CodeBlock/CodeBlock.svelte#L102

So you'll need to make use of the Tailwind arbitrary variant syntax to "reach" this portion of template. This can be done as follows:

<CodeBlock ... class="[&>pre]:!whitespace-nowrap" /

This does a few things:

1. Searches within the component for the first instance of the pre tag
2. Applies whatever whitespace overwrite you wish to use
3. Uses ! to make this !important

Alternatively, I would welcome a PR if you wish to help implement a style prop directly into the component. The Skeleton team has shifted our priority to v3, but we're still welcoming v2 contributions from the community. Just let me know if I can walk you through what's needed for this.