Designing the Display of an "Embed Code" Rich Text | Webflow Tutorial

Tutorial
March 20, 2023
3 min
#webflowtuto with a code snippet on a Webflow rich text
Use AI to summarize this article
Key points

On our blog, we often insert short code snippets that we share with the Webflow user community. However, when you simply copy and paste code into a Rich Text field in Webflow, two major problems arise:

  1. Your article is no longer responsive: the code lacks spacing between characters, causing Webflow to place it all on a single line and create an absolutely terrible "horizontal scrolling" effect...
  2. It becomes difficult to identify within an article (same design)

Our goal was to assign a unique class to these snippets to enhance the UI and specifically improve responsiveness, with an overflow scroll, when sharing code snippets!

The writing of this article is a co-production!  THANK YOU to Chris @Lumious Digital (YouTube channel here) who shared his solution on the Webflow Expert Slack!!!

Guided tutorial in 5 steps:

1 - Create a class in your Style Guide

For this example, we are creating a class .custom-code. It doesn't matter whether it's a div block or a paragraph. Just create a CSS class with the style of your choice.

Creating a class .custom-code in the Webflow designer

In our case, we designed it as follows:

  • Background color: whitesmoke  
  • Black border with a radius of 1rem
  • Overflow: scroll

2 - Open the Rich Text of your blog post

3 - Add a Custom Code element (HTML code editor)

Opening the Webflow embed code editor

4 - Embed your code using "<!-- fs-richtext-ignore --><xmp> - </xmp>"

<xmp class="custom-code">"YOUR CODE HERE"</xmp>
XMP code example

XMP is a more recent variant of the old <!-- fs-richtext-ignore --><pre> feature. It tells search engines that they need not bother executing the code that follows but rather use it for "display purposes." You can replace the value "custom-code" here with the name of your CSS class.

5 - Publish your site!

And here’s the result!

Preview of a custom class in Webflow Rich Text

Discover more tutorials on Webflow in French on our blog or on our YouTube channel 🍿

Now, you can also change the preview of a code snippet on Webflow with Finsweet to achieve a professional design.

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

AI Tech Summit 2025 conference with a speaker on stage in front of a large audience, surrounded by big screens displaying “AI” and “Tech Summit 2025”. (Gen by AI)
Events

2025 Calendar of Must-Attend Web, Design & AI Events

2025 Calendar of Must-Attend Web, Design & AI Events
Screenshot of Google search homepage with search bar and Google logo.
Documentation
SEO

3 tools to track your SEO rankings in the SERP

3 tools to track your SEO rankings in the SERP
ChatGPT 5.0 OpenAI
News
AI

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1: The Ultimate AI Comparison 2025

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1: The Ultimate AI Comparison 2025

Want to turn your website into your most valuable asset?

Contact us today