Intégrer Code Highlighter dans Divi
: L’intégration d’une mise en évidence du code sur WordPress avec Divi peut sembler technique. Toutefois, en suivant des étapes claires, cette fonctionnalité devient accessible et améliore grandement la lisibilité de vos codes pour vos visiteurs. Voici un guide étape par étape pour une intégration réussie.
Identification du Besoin :
- L’objectif est d’avoir une documentation technique sur un site WordPress avec Divi qui présente des extraits de code.
- Il est souhaitable que ces extraits de code aient une coloration syntaxique et un bouton pour copier le code.
Recherche de Librairies :
- Une recherche initiale a été effectuée pour des librairies de « text highlight », mais cela a conduit à des librairies pour la mise en évidence du texte et non du code.
- Une nouvelle recherche pour « code highlight » a été effectuée, aboutissant à la découverte de la librairie « highlight.js ».
Utilisation de CodePen pour des Exemples Pratiques :
- Plutôt que de se fier uniquement à la documentation officielle, il a été décidé de rechercher des exemples pratiques sur CodePen, en particulier ceux qui combinent la mise en évidence du code et la fonctionnalité de copie.
- Cette recherche a conduit à la découverte d’un exemple pertinent sur CodePen qui a été utilisé comme base pour l’intégration.
Test en Local (html / css / js) :
- Avant l’intégration dans WordPress, il est recommandé de tester la librairie et l’exemple de CodePen localement en utilisant du HTML et du CSS pour s’assurer qu’ils fonctionnent comme prévu.
Intégration dans WordPress :
Pour intégrer des librairies JavaScript et CSS dans WordPress avec Divi :
- Accédez au tableau de bord.
- Sélectionnez : Options du thème > Intégration
- Ajoutez les librairies CSS dans la section <head>.
- Ajoutez les librairies JavaScript à la fin du <body>.
Création d’une Nouvelle Page :
- Créer une nouvelle page pour tester
- Utilisez le mode filaire de Divi pour ajouter des blocs de code.
- Ajoutez le CSS dans un bloc CODE avec une balise
<style>. - Ajoutez le code HTML minimal nécessaire dans un bloc CODE.
- Ajoutez le JavaScript dans un bloc CODE avec une balise
<script>. - Pour une meilleure visibilité des blocs, vous pouvez nommer les blocs : code CSS / code HTML / code JS
Gestion des Erreurs :
- Si des erreurs se produisent, utilisez l’outil de développement (F12) pour identifier le problème.
- Dans ce cas, la librairie doit être chargée avant le script. La solution est de mettre la librairie dans la section
<head>.
Optimisation :
- Pour éviter de dupliquer le code sur plusieurs pages, envisagez de déplacer le CSS et le JavaScript vers des emplacements globaux.
- Vous pouvez ajouter le CSS dans « Options du thème » > « Personnaliser le CSS ».
- Le JavaScript peut être ajouté dans un fichier externe ou directement dans « Options du thème ».
Duplication et Extension :
- Une fois que tout est en place, vous pouvez facilement dupliquer les blocs de code pour ajouter d’autres langages ou fonctionnalités.
En utilisant à la fois la documentation officielle et des exemples pratiques de CodePen, vous pouvez obtenir une solution robuste et bien testée pour intégrer la mise en évidence du code et la fonctionnalité de copie dans WordPress avec Divi.
– Astuces Divi
Divi : Astuce pour modifier styles & paramètres rapidement
Découvrez cette astuce simple et efficace pour afficher uniquement les styles et paramètres modifiés sur Divi, gagner du temps et augmenter votre productivité lors de la modification des gabarits.
