Webflow Rich Text Block

Code Blocks in Rich Text Blocks

Overview
Rich Text Block Limitations & Bugs
001
Styling
Styling Rich Text Blocks
100
Styling CMS-Bound Rich Text Blocks
102
Markdown Support in Rich Text Blocks
103
Code Blocks in Rich Text Blocks
105
Wrapping Lists Around Images & Video
106
Creating "Paragraph" Breaks within a Blockquote
108
Embedding Tables
Embedding Tables Using Google Slides
6:36
150
Embedding HTML Tables Using Markdown
16:08
151
Lists & Nested Lists
Nested Lists
201
Advanced
Extending Rich Text's Capabilities with 3rd Party Libraries
800
Advanced
Adding ID's for Linking
801
Footnotes & Tooltips
801
No items found.
Published
December 16, 2023
Updated
December 16, 2023
in lightbox
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;

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.