Comment changer l'aperçu d'un code sur Webflow ?

Tutoriel

21/3/2023

3 min

H2 Example

Key points

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 -

Comparaison d'un extrait de code avec ou sans syntax highlither — Code sans aperçu syntaxique (à gauche) vs code avec syntax highlighter (à droite)

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

‍