Code source
Partagez des extraits de code sur votre site Elementor de la bonne manière, formaté de manière magnifique et facile à utiliser pour les visiteurs Cet élément Source Code vous permet d'afficher HTML, CSS, JavaScript, PHP ou l'un des plus de 80 langages de programmation avec une coloration syntaxique épurée. Choisissez simplement votre langue, choisissez un thème de couleur qui correspond à votre style et collez votre code Il ajoute même un bouton de” pratique pour que les utilisateurs puissent saisir instantanément votre code en un clic C'est l'outil parfait pour les didacticiels, la documentation, les portefeuilles de développeurs ou tout site où vous devez présenter le code de manière propre et professionnelle.
Large support linguistique et thématique
Affichez du code dans plus de 80 langages de programmation et de balisage différents, chacun avec une coloration syntaxique précise Choisissez parmi plus de 8 thèmes visuels pour correspondre à l'esthétique sombre ou claire de votre site, rendant votre code lisible et visuellement attrayant.
- Parfait pour les blogs didacticiels couvrant plusieurs langues comme HTML, CSS, JS et PHP.
- Utilisez un thème sombre pour un look moderne et adapté aux développeurs.
- Assurez-vous que le code est facile à lire et à comprendre en un coup d’œil, améliorant ainsi l’expérience d’apprentissage.
Fonctionnalité de copie en un clic
Incluez un bouton convivial qui permet aux visiteurs de copier instantanément votre code dans leur presse-papiers Personnalisez le texte, la position et le message de confirmation du bouton qui s'affiche après la copie, en supprimant la nécessité pour eux de sélectionner et de copier manuellement.
- Améliore considérablement l'expérience utilisateur pour les développeurs qui souhaitent réutiliser vos extraits.
- Augmentez l'engagement en rendant votre précieux code facile à prendre et à utiliser.
- Afficher une “Copied !” confirmation pour donner aux utilisateurs un feedback clair.
Personnalisation visuelle complète
Stylez chaque partie du bloc de code pour se fondre parfaitement dans votre design Ajustez le rembourrage, les marges et les bordures du conteneur, et concevez indépendamment les couleurs, la typographie et l'arrondi des coins du bouton de copie.
- Faites correspondre l'arrière-plan et les bordures du bloc de code à la palette de couleurs de votre site.
- Concevez un bouton de copie proéminent qui encourage les clics.
- Contrôlez l'espacement autour du code pour un look propre et intégré sur la page.
Foire aux questions pour le code source
Comment changer le langage de programmation pour la coloration syntaxique ?
Dans les paramètres de contenu, utilisez le menu déroulant“Code” pour sélectionner la langue correcte pour votre extrait (par exemple, HTML, CSS, PHP).Cela garantit que les mots-clés et la syntaxe sont colorés avec précision.
Puis-je cacher les numéros de ligne à côté du code ?
Oui. Vous pouvez désactiver les numéros de ligne en définissant l'option “Enable Line Number” sur “No.” Cela vous donne un bloc de code plus propre si les numéros de ligne ne sont pas nécessaires pour votre exemple.
Où puis-je positionner le bouton de copie ?
Vous pouvez choisir la position du bouton, comme le “Top Right Corner” du bloc de code Vous pouvez également contrôler sa visibilité, en le définissant pour toujours afficher ou peut-être apparaître uniquement en vol stationnaire.
Le code affiché est-il modifiable par les visiteurs du site Web ?
Non. Le code est présenté comme un bloc statique et stylisé pour la visualisation et la copie. Les visiteurs ne peuvent pas modifier le code source directement sur votre page ; c'est uniquement à des fins d'affichage.
Puis-je utiliser ma propre palette de couleurs au lieu des thèmes prédéfinis ?
L'élément propose plusieurs thèmes pré-conçus (comme “Tomorrow”).Pour utiliser des couleurs entièrement personnalisées, vous devrez probablement ajouter des CSS personnalisés, car les options de style contrôlent principalement le conteneur et le bouton, et non les couleurs de syntaxe interne.
Le bouton de copie fonctionne-t-il sur les appareils mobiles ?
Oui, la fonctionnalité de copie est conçue pour fonctionner sur tous les appareils Le bouton est tactile et la commande de copie s'exécutera lorsqu'elle est appuyée sur un téléphone ou une tablette.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
