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.
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.
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.
Last updated