Is it possible to format code snippets on the CMS rich text template in Webflow?

Published on
September 22, 2023

Yes, it is possible to format code snippets on the CMS rich text template in Webflow. Webflow's CMS allows you to add code snippets into rich text fields using custom code embedding. Here's how you can format code snippets on the CMS rich text template:

  1. Open the Webflow Designer and navigate to the CMS Collection Editor.
  2. Select the Rich Text field where you want to add the code snippet.
  3. Within the selected Rich Text field, click on the "Embed" button in the toolbar.
  4. A modal window will appear where you can add custom code. Enter your code snippet here.
  5. Click "Save & Close" to exit the modal.
  6. Your code snippet will now be displayed within the rich text field.

To ensure that your code snippet is properly formatted and styled, you can use either inline code or a code block:

Inline code:

  • Use backticks (`) to enclose your inline code snippet.
  • For example: console.log("Hello, World!");

Code block:

  • Use triple backticks (\\`) to create a code block.
  • Specify the language for syntax highlighting after the opening triple backticks.
  • Add your code snippet below the language declaration.
  • Close the code block with triple backticks.
  • For example:
    ```html

    Hello, World!

    \`\`\`

By following these steps, you can format code snippets on the CMS rich text template in Webflow and ensure that they are displayed properly on your website.