Discover in this tutorial how to use the "Code Highlight" attribute of Finsweet, to easily give a Highlight style to your code snippets on Webflow
Discover in this tutorial how to use the no-code solution "Attributes - Code Highlight" from Finsweet, to easily give a Highlight style 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 know how important it is to make your code easy to read and understand for your readers. And as a picture is worth a thousand words, I propose you to compare below, two identical code extracts, with for only difference, the addition of a feature - Code Highlight -.
You get it, By using syntax preview on your site, you can make your code more readable and appealing to your readers, which can improve their reading experience and encourage them to stay on your website longer (or come back more often 🤗).
So, how do you add this design customization option to your Webflow site content?
How to use the solution on your Webflow site?
Unfortunately, Webflow does not natively offer to integrate this functionality on the pages of your websites. But... Finsweet attributes do! And in just a few clicks.
→ Using Finsweet Attributes- Code Highlight
- Go to the Finsweet "Code Highlight" documentation
- Copy the script
- Paste the script in the head tag of the page(s) where the codes you want to style are located
- Add attribute "fs-codehighlight-element - code"
- Choose a theme
- Intégrer votre code entre les balises suivantes <!-- fs-richtext-ignore --><pre><code> YOUR_CODE </code></pre> (remplacer "YOUR_CODE" par votre code)
- Publish your webflow site! 🎉
And there you have it, in no time you have considerably improved the readability of your code snippets ! And as a bonus, this solution works for static elements, or can be integrated directly into dynamic pages (CMS) of your site.
If you prefer, I propose a video tutorial in French, to explain you how to integrate the solution on your website.
.jpg)
