Qu’est-ce que la coloration syntaxique ?
La coloration syntaxique du code html permet de lire facilement les lignes de code. Une couleur est attribuée à chaque typologie d'élément (classe, fonctions etc.).
Pourquoi utiliser la coloration syntaxique ?
Le but de la coloration syntaxique est d'améliorer la lisibilité du code : les couleurs permettent de parcourir facilement les lignes et d'identifier les différents éléments de syntaxe.
La répétition des éléments créée un rythme qui révèle la logique et la structure du code. Ce guide visuel offre un expérience plus agréable et efficace.
Comment utiliser la coloration syntaxique ?
Une fois de plus, l'équipe de Finsweet a préparé un hack pour partager un aperçu syntaxique coloré. Tout est expliqué pas ) pas à pas dans la documentation Attributes.
Le processus est toujours le même avec la solution Attributes :
- Copier d'abord le Code Highlight <script>
- Coller le code dans la partie <head> de votre page
- Paramétrer le bloc text qui contient l'extrait de code avec les Attribute : fs-codehighlight-element=code
- L'extrait du code à afficher est placé entre des balises : <pre><code> extrait de code </code></pre>
- Enfin, remplacer le chevron ouvrant et fermant de la script par < pour afficher la balise <script>
Pour styliser l'extrait de code Finsweet propose d'ajouter un deuxième attribute qui vous donnera accès à plusieurs thème colorés :
- Ajouter l'attribut fs-codehighlight-theme=theme
- Pour choisir votre theme, aller sur highlight.js
- Remplacer "theme" parmi les nombreuses options possibles
Pour mon site j'ai choisi le theme a11y-light pour son fond blanc qui s'harmonise avec la charte graphique.
Comment utiliser la coloration syntaxique dan sun article de blog ?
Cette solution s'applique aussi aux éléments dynamiques du CMS Webflow.
Depuis l'interface CMS collection.
- Dans le corps de l'article, ajouter un élément embed
- Coller l'extrait du code entre des balises : <pre><code> extrait de code </code></pre>
- Enfin, remplacer le chevron ouvrant et fermant de la script par < pour afficher la balise <script>
