Published
December 16, 2023
Updated
December 16, 2023
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;