What is the Source Code widget in Master Addons?

It is an Elementor widget that displays code with syntax highlighting, line numbers, a language theme, and a copy-to-clipboard button. You paste a snippet, choose the language and theme, and set the copy button, all from the Elementor panel, with no plugins or shortcodes needed.

Which programming languages does it highlight?

You pick the language in the Code dropdown, including common ones like PHP, JavaScript, CSS, and HTML. The choice sets how the syntax colors are applied, so the snippet reads the way it would in a code editor.

Can readers copy the code with one click?

Yes. Turn on Enable Copy Button and a copy-to-clipboard button appears on the block. You set its position, when it shows, and the text before and after a copy, such as Copy code and Copied, which confirms the click worked.

Can I show line numbers in the code block?

Yes. The Enable Line Number toggle in the Content tab adds numbers down the left side of the block. They make it easy to reference a specific line in a tutorial, and you can turn them off for a cleaner look.

Can I change the color theme of the code?

Yes. The Theme dropdown offers Default, Dark, Funky, Okaidia, Twilight, Coy, Solarized light, Tomorrow, and Custom. Pick one to match a light or dark page, or use Custom to set your own colors in the Style tab.

Widget de code source de l'élémenteur : mise en évidence de la syntaxe

Collez le code dans un widget de texte normal et il supprime le formatage, laissant un bloc illisible. Le Code source widget dans Modules complémentaires principaux pour Elementor corrige cela : 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 récupérer un extrait en un seul 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.
Modules complémentaires principaux pour Elementor installé et actif. Nouveau au 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.

Onglet Contenu du code source avec le champ déroulant Langue du code, déroulant Thème et code source

Code: le langage à mettre en évidence, tel 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.

Code source Thème déroulant ouvert, répertoriant les valeurs par défaut, sombres, funky, Okaidia, crépuscule, cocotte, lumière solarisée, demain et personnalisées

La commutation du langage et du thème ensemble donne à chaque extrait le bon look Voici un extrait JavaScript sur le thème Dark.

Widget Code Source affichant un extrait JavaScript avec le thème Dark appliqué

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.

Bouton de copie du code source affichant l'état de confirmation copié après un clic

Stylez le bloc de code #

Le Style tab est divisé en Conteneur et Bouton, plus Modèles (une option Pro). Le Conteneur section contrôle la trame du bloc de code.

Code source Onglet Style Section conteneur avec hauteur, rembourrage, marge, type de bordure et rayon de bordure

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.

Le Bouton la section stylise le bouton de copie : ses couleurs, sa typographie, son remplissage et sa bordure, dans les états normal et en vol stationnaire.

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é.

Bloc de code source Master Addons terminé sur la page live, un extrait CSS sur un thème sombre avec un bouton 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 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 le langage dans la liste déroulante Code, y compris les langages courants comme PHP, JavaScript, CSS et HTML. 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 dans l'onglet Style.

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 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.

Constructeur de thèmes

Créateur Popup

Constructeur de widgets

Mega Menu Builder

Css personnalisé

Balises dynamiques

Conditions d'affichage

Bibliothèque d'icônes

Animation

Kits de modèles

Sections Prêtes

Popups prêtes

Pages Prêtes

En-tête prêt

Pied Prêt

WP Adminifier

Éditeur de barre d'administration

Connectez-vous

Suite Rolemaster

Blocs maîtres

Pleins feux WP