Découvrez dans ce tutoriel comment utiliser la solution no-code " Attributes - Code Highlight" de Finsweet, pour facilement donner un style Highlight à vos extraits de codes sur Webflow.
Pourquoi utiliser "Code Highlight" ?
Si vous êtes un(e) développeur(euse) ou si vous publiez du contenu technique sur votre site, vous savez à quel point il est important de rendre votre code facile à lire et à comprendre pour vos lecteurs. Et comme une image vaut mille mot, je vous propose de comparer ci-dessous, deux extraits de codes identiques, avec pour seule différence, l'ajout d'une fonctionnalité - Code Highlight -
Vous l'avez compris, En utilisant un aperçu syntaxique sur votre site, vous pouvez rendre votre code plus lisible et plus attrayant pour vos lecteurs, ce qui peut améliorer leur expérience de lecture et les inciter à rester plus longtemps sur votre site web (ou y revenir plus souvent 🤗).
Alors, comment faire pour ajouter cette option de personnalisation de design sur le contenu de son site Webflow ?
Comment utiliser la solution sur son site Webflow ?
Malheureusement, Webflow ne propose pas nativement d'intégrer cette fonctionnalité sur les pages de vos sites web. Mais... les attributes de Finsweet oui ! Et en quelques clics seulement.
→ Utiliser les Finsweet Attributes- Code Highlight
- Se rendre sur la documentation Finsweet "Code Highlight"
- Copier le script
- Coller le script dans le head tag de ou des pages où se trouvent les codes que vous souhaitez stylisés
- Ajouter l'attribut "fs-codehighlight-element - code"
- Choisir un thème
- Intégrer votre code entre les balises suivantes <!-- fs-richtext-ignore --><pre><code> YOUR_CODE </code></pre> (remplacer "YOUR_CODE" par votre code)
- Publier votre site Webflow ! 🎉
Et voilà, en un rien de temps vous avez considérablement amélioré la lisibilité de vos extraits de code ! Et en bonus, cette solution fonctionne pour des éléments statics, ou bien peut-être intégrée directement à des pages dynamiques (CMS) de votre site.
Si vous préférez, je vous propose un tutoriel vidéo en français, pour vous expliquer comment intégrer la solution sur votre site internet.
.jpg)
