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
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

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today