How to change the preview of a code on Webflow?

Tutorial
March 21, 2023
3 min
Preview of a Webflow icon with a code snippet in syntax highlight.
Key points

Discover in this tutorial how to use the no-code solution "Attributes - Code Highlight" from Finsweet, to easily apply Highlight styling to your code snippets on Webflow.

Why use "Code Highlight"?

If you are a developer or if you publish technical content on your site, you understand how crucial it is to make your code easy to read and comprehend for your readers. And since a picture is worth a thousand words, I invite you to compare two identical code snippets below, with the only difference being the addition of a feature - Code Highlight -

Comparison of a code snippet with and without syntax highlighting
Code without syntax highlight (on the left) vs code with syntax highlighter (on the right)

As you can see, by using a syntax highlighter on your site, you can make your code more readable and visually appealing for your readers, which can enhance their reading experience and encourage them to stay longer on your website (or come back more often 🤗).

So, how can you add this customization option to the content of your Webflow site?

How to use the solution on your Webflow site?

Unfortunately, Webflow does not natively offer the integration of this feature on your website pages. But... the Finsweet attributes do!  And it only takes a few clicks.

→ Use the Finsweet Attributes - Code Highlight

  1. Go to the Finsweet "Code Highlight" documentation
  2. Copy the script
  3. Paste the script into the head tag of the page(s) where your code that you want to style is located
  4. Add the attribute "fs-codehighlight-element - code"
  5. Choose a theme
  6. Integrate your code between the following tags <!-- fs-richtext-ignore --><pre><code>   YOUR_CODE   </code></pre> (replace "YOUR_CODE" with your code)
  7. Publish your Webflow site! 🎉

And there you have it, in no time you have significantly improved the readability of your code snippets! As a bonus, this solution works for static elements, or can be directly integrated into the dynamic pages (CMS) of your site.

If you prefer, I also have a video tutorial in French, explaining how to integrate the solution into your website.

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