Collez le code dans un widget de texte normal et il supprime le formatage, laissant un bloc illisible. Le Widget Code Source, un widget Pro dans Modules complémentaires principaux pour Elementor(, corrige que : il affiche votre code avec une coloration syntaxique appropriée, des numéros de ligne, un thème de langue, et un bouton de copie, afin que les lecteurs puissent prendre un extrait en un clic.
Il est conçu pour les didacticiels, la documentation et les blogs de développeurs, partout où vous devez afficher PHP, JavaScript, CSS, HTML ou un autre langage proprement Vous collez le code, choisissez un langage et un thème et définissez le bouton de copie, le tout dans le panneau Élémenteur. Vous trouverez ci-dessous une exécution dans chaque paramètre.
Ce que fait le widget Code Source #
Le widget prend un bloc de code et le restitue avec une coloration syntaxique codée par couleur en fonction de la langue que vous choisissez Il peut numéroter les lignes, appliquer l'un des nombreux thèmes de l'éditeur et ajouter un bouton copier dans le presse-papiers qui confirme quand le code a été copié.
Il comporte trois onglets : Contenu pour le code, la langue et le bouton de copie, Style pour le conteneur et l'apparence du bouton, et Avancé pour les options Elementor habituelles.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Maître Addons Pro installé avec une licence active, puisque Source Code est un widget Pro. Nouveau dans le plugin ? voir le guide d'installation.
- L'extrait de code que vous souhaitez afficher.
Comment ajouter le widget Code source #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Code source(ou faites défiler vers la section Addons principaux) Faites-le glisser sur votre page Il se charge avec un extrait d'échantillon afin que vous puissiez voir la surbrillance tout de suite.
Ajoutez votre code et choisissez une langue #
Ouvrir le Contenu onglet. Le Code source section tient tout Collez votre extrait dans le Code source box, puis définissez la langue et le thème au-dessus.
- Code: le langage à mettre en évidence, l'un des 75, tels que PHP, JavaScript, CSS ou HTML. Cela définit la manière dont les couleurs sont appliquées.
- Thème: la palette de couleurs du bloc (couverte ci-dessous).
- Code source : l'extrait lui-même, avec une option Écrire avec IA si vous avez besoin d'un exemple rapide.
Choisir un thème #
Le Thème dropdown définit la palette de couleurs du bloc de code Il inclut Default, Dark, Funky, Okaidia, Twilight, Coy, Solarized light, Tomorrow, et une option Custom, afin que vous puissiez faire correspondre le bloc à une page claire ou sombre.
La commutation du langage et du thème ensemble donne à chaque extrait le bon look Voici un extrait JavaScript sur le thème Dark.
Configurez le bouton de copie #
Le bouton de copie est ce qui rend le widget utile pour les tutoriels Sous la boîte de code se trouvent les contrôles pour elle.
- Activer le bouton de copie : afficher ou masquer le bouton copier dans le presse-papiers.
- Activer le numéro de ligne : allumez ou désactivez les numéros de ligne à gauche.
- Visibilité des boutons : afficher le bouton Toujours ou seulement en vol stationnaire.
- Position du bouton : placez-le dans un coin, comme en haut à droite.
- Copier le texte du bouton et le texte du bouton après copie : l'étiquette avant et après une copie, telle que Copier le code et Copier.
Lorsqu'un visiteur clique sur le bouton, l'étiquette passe à votre texte Après copie pour confirmer la copie travaillée.
Stylez le bloc de code #
Le Style tab est divisé en Conteneur et Bouton, plus Modèles quand le gratuit Modèles l'extension est allumée Le Conteneur section contrôle la trame du bloc de code.
- Hauteur: cap la hauteur du bloc et laisser défiler le code long.
- Rembourrage et marge : espacement à l'intérieur et autour du bloc.
- Type de frontière et rayon de frontière : le contour et les coins arrondis.
- Thème personnalisé uniquement : arrière-plan, typographie, couleur du texte et couleur du numéro de ligne. Personnalisé affiche le code dans une couleur, sans surbrillance du mot-clé.
Le Bouton la section stylise le bouton de copie : sa typographie, la couleur du texte, la couleur de fond, le rembourrage, la bordure et le rayon. Il n'y a pas de couleurs de survol distinctes.
Le résultat sur la page #
Publier ou prévisualiser et le code rend mis en évidence, avec des numéros de ligne et un bouton de copie de travail Vous trouverez ci-dessous un extrait CSS sur le thème Dark avec le bouton indiquant son état copié.
Cas d'utilisation courants #
- Tutoriels et messages pratiques les lecteurs de code de partage peuvent copier.
- Documentation du plugin et du thème avec des exemples de configuration ou de crochet.
- Blogs développeurs affichage des extraits en PHP, JavaScript ou CSS.
- Bases de connaissances avec commandes copier-coller.
- Pages d'atterrissage démonstration d'un appel API ou d'un code d'intégration.
Conseils pour travailler avec le widget Code source #
- Faites correspondre la langue au code. Le bon paramètre de code est ce qui rend la mise en évidence précise.
- Choisissez un thème qui correspond à la page. Utilisez un thème sombre sur les sections sombres et un thème clair sur les pages blanches.
- Gardez le bouton de copie visible. Définissez la visibilité du bouton sur Toujours pour les didacticiels afin que les lecteurs le repèrent.
- Capuchon la hauteur pour les longs extraits. Une hauteur fixe avec défilement empêche un long bloc de prendre le contrôle de la page.
- Écrivez des étiquettes de bouton claires. Copier le code et Copier dire aux lecteurs exactement ce qui s'est passé.
Foire aux questions #
Qu'est-ce que le widget Code Source dans Master Addons ?
Il s'agit d'un widget Master Addons Pro pour Elementor qui affiche du code avec coloration syntaxique, numéros de ligne, un thème de langue et un bouton copier dans le presse-papiers Vous collez un extrait, choisissez la langue et le thème, et définissez le bouton de copie, le tout depuis le panneau Elementor, sans plugins ni shortcodes nécessaires.
Quels langages de programmation met-il en évidence ?
Vous choisissez l'un des 75 langages dans la liste déroulante Code, notamment PHP, JavaScript, CSS, HTML, Python, SQL et YAML. Le choix définit la manière dont les couleurs de syntaxe sont appliquées, de sorte que l'extrait se lit comme il le ferait dans un éditeur de code.
Les lecteurs peuvent-ils copier le code en un clic ?
Oui. Activez Activer le bouton Copier et un bouton copier-clipboard apparaît sur le bloc Vous définissez sa position, quand il s'affiche, et le texte avant et après une copie, comme Copier le code et Copier, qui confirme le clic travaillé.
Puis-je afficher les numéros de ligne dans le bloc de code ?
Oui. La bascule Activer le numéro de ligne dans l'onglet Contenu ajoute des nombres sur le côté gauche du bloc. Ils facilitent la référence d'une ligne spécifique dans un didacticiel et vous pouvez les désactiver pour un look plus épuré.
Puis-je modifier le thème de couleur du code ?
Oui. La liste déroulante Thème offre Par défaut, sombre, funky, Okaidia, crépuscule, cocotte, lumière solarisée, demain et personnalisé Choisissez-en une pour correspondre à une page claire ou sombre, ou utilisez Personnalisé pour définir vos propres couleurs d'arrière-plan et de texte dans l'onglet Style Personnalisé affiche le code dans une couleur, sans surbrillance de mot clé.
Envelopper #
Le widget Code source transforme un extrait brut en un bloc épuré et surligné que les lecteurs peuvent copier en un clic Coller votre code, définir la langue et le thème, activer les numéros de ligne et le bouton de copie, puis styliser le conteneur pour qu'il corresponde à votre page Pour une comparaison avec le widget Code Highlight d'Elementor Pro, voir le Widget de bloc de code d'élémenteur page. Pour une autre façon de présenter du contenu structuré, voir le Widget Table dynamique: parcourez le tableau complet Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.
