Wrapping Code Blocks

As of 27-Aug-2024, Webflow's code blocks do not wrap.

When you're dropping in something like a regex, which cannot have line breaks in it, it creates some UX inconveniences.

Goals

• We want to be able to wrap code blocks like this;

• Control by syntax type, e.g. Plain Text, JavaScript... which is set for each block

Ideally;

• Ideally, block-specific control even within rich text elements

Ideas;

• Usurp line numbers as a wrapping control?

Usage Notes

wfu-codeblock-wrap = ( no value )

Place this on any Code Block, or on a Rich Text Block to affect the Code Block elements it contains.

After tagging your element, add an Embed in your page with the following code.

<style>
[wfu-codeblock-wrap] code {
  white-space: pre-wrap !important;
}
</style>

To limit to code blocks with a specific language selected, you can add a class to the code selector, see Language Types below for the class name to use.

<style>
[wfu-codeblock-wrap] code.language-javascript {
  white-space: pre-wrap !important;
}
</style>

Future;

In the future we'll support wrapping on language-specific blocks in the SA5 lib directly.

• Specifying a language code will wrap only those languages identified

  • Several can be specified, comma-separated

Language Types

Work-in-progress.

As of 27-Aug-2024 the list below contains the languages supported. In most, the CSS class name applied to the Code Block is the lowercased language name prefixed with language-(name).

You can see this on the <code> element;

Some languages however vary that, for example C++ is classed as language-cpp.

IMPORTANT The list below is a quick attempt to guess what CSS class Webflow will generate as the language codes for each, it has not been verified for many. Use Chrome inspector to double-check.

Use the Code. If you're uncertain, check the course code in Chrome inspector

Technical Notes

Must force the <code> element to pre-wrap.