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.

Elementor-Quellcode-Widget: Syntax-Highlighting

Fügen Sie Code in ein normales Text-Widget ein und es entfernt die Formatierung, sodass ein nicht lesbarer Block zurückbleibt Die Quellcode Widget in Master-Addons für Elementor Behebt Folgendes: Es zeigt Ihren Code mit der richtigen Syntaxhervorhebung, Zeilennummern, einem Sprachthema und einer Kopierschaltfläche an, sodass Leser mit einem Klick einen Ausschnitt erhalten können.

Es ist für Tutorials, Dokumentation und Entwicklerblogs gebaut, überall dort, wo Sie PHP, JavaScript, CSS, HTML oder eine andere Sprache sauber anzeigen müssen Sie fügen den Code ein, wählen eine Sprache und ein Thema aus und setzen den Kopierknopf, alles aus dem Elementor-Panel Unten finden Sie einen Durchlauf durch jede Einstellung.

Was das Quellcode-Widget tut #

Das Widget nimmt einen Codeblock und rendert ihn mit farbcodierter Syntaxhervorhebung basierend auf der von Ihnen gewählten Sprache. Es kann die Zeilen nummerieren, eines von mehreren Editor-Themen anwenden und eine Copy-to-Clipboard-Taste hinzufügen, die bestätigt, wann der Code kopiert wurde.

Es verfügt über drei Registerkarten: Inhalt für den Code, die Sprache und die Kopierschaltfläche, Stil für den Container- und Schaltflächenlook und Erweitert für die üblichen Elementoroptionen.

Bevor Sie beginnen #

WordPress Mit Elementor Installiert und aktiv.
Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
Das Code-Snippet, das Sie anzeigen möchten.

So fügen Sie das Quellcode-Widget hinzu #

Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Quellcode‘oder scrollen Sie in den Abschnitt Master Addons Ziehen Sie es auf Ihre Seite Es wird mit einem Beispiel-Schnipsel geladen, damit Sie die Hervorhebung sofort sehen können.

Fügen Sie Ihren Code hinzu und wählen Sie eine Sprache aus #

Öffnen Sie die Inhalt Tab. Die Quellcode Abschnitt hält alles Einfügen Ihres Snippets in die Quellcode Box, dann Sprache und Theme darüber setzen.

Karteikarte Quellcodeinhalt mit dem Feld Code-Sprache-Dropdown, Theme-Dropdown und Quellcode

Code: Die hervorzuhebende Sprache, wie PHP, JavaScript, CSS, oder HTML. Hier wird festgelegt, wie die Farben angewendet werden.
Thema: Die Farbgebung für den Block (unten behandelt).
Quellcode: Das Snippet selbst, mit einer Option Schreiben mit KI, wenn Sie ein schnelles Beispiel benötigen.

Wählen Sie ein Thema #

Die Thema Dropdown legt das Farbschema des Codeblocks fest. Es enthält Standard, Dunkel, Funky, Okaidia, Dämmerung, Koje, Solarisiertes Licht, Morgen und eine benutzerdefinierte Option, sodass Sie den Block einer hellen oder dunklen Seite zuordnen können.

Quellcode-Themen-Dropdown geöffnet, mit Standard, Dunkel, Funky, Okaidia, Dämmerung, Coy, Solarisiertes Licht, Morgen und Benutzerdefiniert

Durch das gemeinsame Umschalten von Sprache und Theme erhält jeder Snippet den richtigen Look Hier ist ein JavaScript-Snippet zum Thema Dark.

Quellcode-Widget, das einen JavaScript-Schnipsel mit angewandtem Dark-Design zeigt

Richten Sie die Kopierschaltfläche ein #

Der Kopier-Button macht das Widget für Tutorials nützlich Unterhalb des Codefelds befinden sich die Bedienelemente dafür.

Kopiertaste aktivieren: Die Schaltfläche Kopieren-zu-Clipboard anzeigen oder ausblenden.
Zeilennummer aktivieren: Schalten Sie die Liniennummern links ein oder aus.
Knopfsichtbarkeit: Taste anzeigen Immer oder nur im Schwebezustand.
Tastenposition: Platzieren Sie es in einer Ecke, wie oben rechts.
Kopieren Sie den Schaltflächentext und den Text der nachkopierten Schaltfläche: Das Etikett vor und nach einer Kopie, z. B. Code kopieren und kopieren.

Wenn ein Besucher auf die Schaltfläche klickt, wechselt die Beschriftung zu Ihrem Text nach dem Kopieren, um zu bestätigen, dass die Kopie funktioniert hat.

Kopierschaltfläche Quellcode, die den Zustand der kopierten Bestätigung nach einem Klick anzeigt

Stil des Codeblocks #

Die Stil Tab aufgeteilt wird in Container und Knopf„Plus Muster (eine Pro-Option). Die Container Abschnitt steuert den Rahmen des Codeblocks.

Quellcode-Stil Tab Containerabschnitt mit Höhe, Polsterung, Rand, Randtyp und Randradius

Höhe: Verschließen Sie die Blockhöhe und lassen Sie langen Code scrollen.
Polsterung und Rand: Abstand innerhalb und um den Block.
Grenztyp und Grenzradius: Die Umrisse und abgerundeten Ecken.

Die Knopf Abschnitt Stile der Kopiertaste: ihre Farben, Typografie, Polsterung und Umrandung, sowohl im Normalzustand als auch im Schwebezustand.

Das Ergebnis auf der Seite #

Veröffentlichen oder Vorschau und der Code wird hervorgehoben, mit Zeilennummern und einer funktionierenden Kopierschaltfläche Unten finden Sie einen CSS-Schnipsel zum Dark-Design, wobei die Schaltfläche den kopierten Zustand anzeigt.

Fertig Master Addons Quelltextblock auf der Live-Seite, ein CSS-Snippet auf einem dunklen Theme mit einem Kopierten Button

Häufige Anwendungsfälle #

Tutorials und Anleitungen Code-Leser freigeben kopieren können.
Plugin - und Themedokumentation Mit Config - oder Hook-Beispielen.
Entwicklerblogs Schnipsel in PHP, JavaScript oder CSS anzeigen.
Wissensdatenbanken Mit Copy-Paste-Befehlen.
Landing-seiten Demonstration eines API-Aufrufs oder Einbettungscodes.

Tipps für die Arbeit mit dem Quelltext-Widget #

Ordnen Sie die Sprache dem Code zu. Die richtige Code-Einstellung macht die Hervorhebung genau.
Wählen Sie ein Thema aus, das zur Seite passt. Verwenden Sie ein dunkles Thema auf dunklen Abschnitten und ein helles auf weißen Seiten.
Halten Sie die Kopierschaltfläche sichtbar. Stellen Sie die Schaltflächensichtbarkeit für Tutorials immer ein, damit die Leser sie erkennen.
Kappe die Höhe für lange Schnipsel. Eine feste Höhe mit Bildlauf verhindert, dass ein langer Block die Seite übernimmt.
Schreiben Sie klare Tastenbeschriftungen. Kopieren Sie Code und kopiert, um den Lesern genau zu sagen, was passiert ist.

Häufig gestellte Fragen #

Was ist das Quellcode-Widget in Master-Addons?

Es handelt sich um ein Elementor-Widget, das Code mit Syntaxhervorhebung, Zeilennummern, einem Sprachthema und einer Copy-to-Clipboard-Taste anzeigt. Sie fügen einen Ausschnitt ein, wählen die Sprache und das Design aus und stellen die Kopiertaste ein, alles aus dem Elementor-Panel, ohne dass Plugins oder Shortcodes erforderlich sind.

Welche Programmiersprachen werden hervorgehoben?

Sie wählen die Sprache im Code-Dropdown aus, einschließlich gängiger Sprachen wie PHP, JavaScript, CSS und HTML. Die Auswahl legt fest, wie die Syntaxfarben angewendet werden, sodass das Snippet so liest, wie es in einem Code-Editor der Fall wäre.

Können Leser den Code mit einem Klick kopieren?

Ja. Schalten Sie die Schaltfläche Kopieren aktivieren ein und auf dem Block erscheint eine Schaltfläche von Kopie zu Zwischenablage Sie legen seine Position fest, wann sie angezeigt wird, und den Text vor und nach einer Kopie, wie Code kopieren und kopiert, was bestätigt, dass der Klick funktioniert hat.

Kann ich Zeilennummern im Codeblock anzeigen?

Ja. Der Umschalter für die Aktivierungszeilennummer in der Inhaltsregisterkarte fügt Zahlen auf der linken Seite des Blocks hinzu. Sie erleichtern das Referenzieren einer bestimmten Zeile in einem Tutorial und Sie können sie für einen saubereren Look ausschalten.

Kann ich das Farbthema des Codes ändern?

Ja. Der Theme-Dropdown bietet Standard-, Dunkel-, Funky-, Okaidia-, Dämmerungs-, Kojen-, Solarlicht-, Morgen- und benutzerdefinierte Angebote. Wählen Sie eine aus, die zu einer hellen oder dunklen Seite passt, oder verwenden Sie Benutzerdefiniert, um Ihre eigenen Farben auf der Registerkarte Stil festzulegen.

Einwickelnd #

Das Quellcode-Widget verwandelt ein Roh-Snippet in einen sauberen, hervorgehobenen Block, den die Leser mit einem Klick kopieren können Fügen Sie Ihren Code ein, legen Sie die Sprache und das Thema fest, schalten Sie Zeilennummern und den Kopierknopf ein und stylen Sie dann den Container passend zu Ihrer Seite. Eine andere Möglichkeit, strukturierten Inhalt darzustellen, finden Sie im Dynamisches Tabellen-WidgetDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.

Themenbauer

Popup-builder

Widget-builder

Mega-Menü-Builder

Benutzerdefinierte Css

Dynamische Tags

Anzeigebedingungen

Icons-bibliothek

Animation

Vorlagenkits

Bereit Sektionen

Bereit Popups

Bereit Seiten

Bereit Header

Bereit Fußzeile

WP Adminify

Admin Bar Editor

Loginfy

Rollenmeister-Suite

Masterblöcke

WP Spotlight