Code Blocks in Rich Text Blocks

Mar-2024 Webflow has added code blocks support within rich text blocks, and it works inside of the CMS as well.

Key features

• Supported in rich text blocks
• Supported in CMS rich text fields
• Supported in the Editor
• Allows you to choose dark mode or light mode
• Allows you to specify the language for syntax highlighting
  • Not sure if it autodetects

Limitations

• Styling- Currently Code Blocks are not recognized in the styling system as an element type, e.g. All Code Blocks, which means you cannot style the block itself within a rich text class in the same way you can with e.g. Blockquotes.
• No copy button option
• ? Uncertain if there are scrolling options, e.g. max-height

Styling

Adding margins

Code Blocks are quite tight against the surrounding text, so you may desire to add a margin, which can be accomplished with custom CSS;

<style>
.w-richtext .w-code-block {
  margin: 1rem 0 !important;
}
</style>

‍

‍

‍

‍