Code Block

The Code Block element allows you to display formatted code.

Features

• It can be used as a standalone element, or within a Rich Text Block.
• It supports multiple syntaxes
  • Appears to default to JS
• Light mode / dark mode appearance
• Works in the content editor
• Works with the CMS

Limitations

• No pre-wrap option ( this can be fixed with custom CSS )
• Limited margins & padding support ( margins affect padding )
  • No global support as there is no All Code Blocks archetype element
  • No margins & padding support for code blocks that are within CMS-bound rich text blocks
• ? Scrolling
  • ? Maximum size
• No control over the syntax highlighting styling
  • Restricted to light-mode or dark-mode styling
• No native copy-code button feature
• Limitations in copying content from one code block to another
• Editing problems with code blocks that are within rich text component properties, surrounding the layered dialog UX

Extending Code Blocks

Adding Margins & Padding

When 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;

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.

‍

‍

‍

‍