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 -
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
- Go to the Finsweet "Code Highlight" documentation
- Copy the script
- Paste the script into the head tag of the page(s) where your code that you want to style is located
- Add the attribute "fs-codehighlight-element - code"
- Choose a theme
- Integrate your code between the following tags <!-- fs-richtext-ignore --><pre><code> YOUR_CODE </code></pre> (replace "YOUR_CODE" with your code)
- 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.
