Widget de bloc de code d'élémenteur avec mise en évidence de syntaxe (Pro)
Code source est un widget Master Addons Pro pour afficher des extraits de code sur une page Elementor Collez le code, choisissez l'une des 75 langues et l'un des huit thèmes Prism.js, et le bloc se rend avec des couleurs de syntaxe, des numéros de ligne facultatifs et une copie sur le bouton du presse-papiers Les visiteurs peuvent lire et copier le code mais pas le modifier Il convient aux didacticiels, à la documentation, aux journaux de modifications et aux portefeuilles de développeurs.
Comment ajouter un bloc de code dans Elementor
Le code source a besoin d'un élément et d'un actif Maître Addons Pro licence.
- Activez Master Addons Pro, modifiez la page avec Elementor et recherchez dans le panneau des widgets Code source.
- Faites-le glisser là où appartient l'extrait.
- Choisissez la langue Code et un Thème.
- Collez l'extrait dans le Code source boîte.
- Activez le bouton de copie et les numéros de ligne, et définissez le texte du bouton, la visibilité et la position.
- Dans l'onglet Style, définissez une hauteur pour les longs extraits et stylisez le bouton, puis prévisualisez la page et testez Copier.
Chaque paramètre est couvert dans le Paramètres du widget Code source guide.
75 langues et 8 thèmes Prism.js
Le Code dropdown répertorie 75 langages, du HTML, CSS, JavaScript et PHP à Python, Bash, SQL, JSON, YAML, TypeScript, React JSX, Go, Kotlin et Swift. Thème offre Par défaut, Sombre, Funky, Okaidia, Crépuscule, Coie, Lumière Solarisée et Demain Choisir Personnalisé pour définir votre propre arrière-plan, couleur du texte, couleur du numéro de ligne et typographie dans l'onglet Style.
- Utilisez un thème clair tel que la lumière par défaut ou solarisée sur les pages blanches, et Okaidia ou Tomorrow sur les sections sombres.
- Custom n'a pas de couleurs de mots clés : le code s'affiche dans la couleur de texte unique que vous choisissez, utilisez donc un thème prédéfini lorsque vous souhaitez des couleurs de syntaxe.
- Un widget contient un extrait. Placez plusieurs widgets côte à côte pour le code et la sortie.
Mise en surbrillance du code Elementor Pro par rapport au code source des modules principaux
Elementor Pro possède son propre widget Code Highlight Les deux utilisent Prism.js, donc le choix se résume aux extras dont vous avez besoin.
| Caractéristique | Mise en évidence du code Elementor Pro | Code source des modules complémentaires principaux |
|---|---|---|
| Prix | Besoins d'Elementor Pro | Besoins de Master Addons Pro |
| Langues | 37 | 75 |
| Thèmes | 6 (Solide, Sombre, Okaidia, Lumière Solarisée, Demain, Crépuscule) | 8 plus Couleurs personnalisées |
| Copier bouton | Copier sur le commutateur du Presse-papiers | Texte personnalisé, texte copié, Always or On Hover, deux positions, style complet |
| Numéros de ligne | Oui | Oui |
| Lignes de surbrillance | Oui | Non |
| Wrap | Oui | Non |
| Hauteur et taille de la police | Oui | Hauteur, plus typographie avec le thème Custom |
Choisissez Elementor Pro si vous avez besoin de mettre en surbrillance des lignes spécifiques ou d'envelopper de longues lignes Choisissez des modules complémentaires principaux si vous souhaitez plus de langues, plus de thèmes ou un bouton de copie stylisé. Connexes : Table des matières pour de longs tutoriels et Tableau dynamique pour les tableaux de référence.
Copier les numéros de bouton et de ligne
Allumer Activer le bouton Copier pour ajouter un bouton qui copie l'intégralité de l'extrait. Définissez son Copier le texte du bouton, le Texte du bouton après copie affiché après un clic, Visibilité des boutons (Toujours ou En vol stationnaire) et Position du bouton (coin supérieur droit ou inférieur droit). Activer le numéro de ligne ajoute des chiffres sur le côté gauche.
- Gardez le bouton réglé sur Toujours sur les pages du didacticiel afin que les lecteurs le remarquent.
- Les numéros de ligne facilitent la référence à une ligne dans votre texte.
- Il n'y a aucune option pour mettre en évidence des lignes spécifiques ou enrouler de longues lignes à l'intérieur du widget.
Style de conteneur et de bouton
Le Conteneur section définit une hauteur (jusqu'à 1200 px) si long snippets défilement, plus remplissage, marge, bordure et rayon Avec le thème Custom il ajoute également un fond, typographie, couleur de texte et couleur de numéro de ligne Le Bouton la section stylise le bouton de copie avec typographie, couleur du texte, couleur d'arrière-plan, remplissage, bordure et rayon.
- Capuchon la hauteur sur les fichiers longs pour que la page reste lisible.
- Faites correspondre l'arrière-plan du bouton à la couleur de votre marque.
- Ajoutez du remplissage pour que le code ne touche pas les bords du bloc.
Foire aux questions pour le code source
Le widget Code source est-il gratuit ?
Le code source n° en fait partie Maître Addons Pro. Les utilisateurs d'Elementor Pro disposent également du widget Code Highlight d'Elementor.
Puis-je cacher les numéros de ligne à côté du code ?
Oui. Ensemble Activer le numéro de ligne à Non pour un bloc nettoyeur.
Où puis-je positionner le bouton de copie ?
Définir Position du bouton dans le coin supérieur droit ou inférieur droit, et Visibilité des boutons à toujours ou en vol stationnaire.
Quelles langues le widget Code source prend-il en charge ?
75, choisis dans la liste déroulante Code Ils incluent HTML, CSS, JavaScript, PHP, Python, Bash, SQL, JSON, YAML, Markdown, TypeScript, React JSX et TSX, Go, Java, Kotlin, Swift, Ruby, C, C++ et C# Les visiteurs peuvent lire et copier le code mais ne peuvent pas le modifier.
Puis-je utiliser ma propre palette de couleurs au lieu des thèmes prédéfinis ?
En partie. Définissez le thème sur mesure pour choisir l'arrière-plan, la couleur du texte, la couleur du numéro de ligne et la typographie dans la section Style du conteneur Les couleurs des mots clés ne sont livrées qu'avec les huit thèmes prédéfinis, donc un bloc personnalisé affiche le code dans une seule couleur, sauf si vous ajoutez votre propre CSS.
Puis-je mettre en évidence des lignes spécifiques ?
Non. Le widget n'a pas d'option de surbrillance de ligne. Le widget Code Highlight d'Elementor Pro peut mettre en surbrillance les lignes choisies si vous en avez besoin.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
