The Code Block element allows you to display formatted code.
Updated 24-Apr-2024
All Code Blocks
archetype elementWhen used in a Rich Text Block, by default the Code Block element is uncomfortably close to the paragraphs above and below it.
The Code Block element offers margin settings, however changing the margin setting also affects the padding within the code block.
What gives?
The HTML that Webflow generates for a code block look something like this;
<pre style="...">
<code>
...
</code>
</pre>
And <pre>
element have some unusual layout and formatting constraints.
However, the Code Block element also does not yet have an All Code Blocks styling element, which means that a stylesheet approach won't work for your CMS-bound RTB's that contain Code Blocks.
Solution-
We'll go with a fully CSS solution here.
The following CSS targets all code blocks within any rich text element. You can adjust the margins of the code block itself in relation to adjacent content in the first rule, and the padding within the code block in the second rule.
IMPORTANT: This works great in Chrome, but has not been tested on any other browsers.
<style>
.w-richtext pre.w-code-block {
margin: 2rem 0;
}
.w-richtext pre.w-code-block code {
margin: 0;
padding: 1rem;
}
</style>