Fügen Sie Code in ein normales Text-Widget ein und es entfernt die Formatierung, sodass ein nicht lesbarer Block zurückbleibt Die Quellcode-WidgetEin Pro-Widget in Master-Addons für Elementor„Heilt das ab: 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 Pro Mit aktiver Lizenz installiert, da Source Code ein Pro Widget ist 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.
- Code: Die Sprache, die hervorgehoben werden soll, eine von 75, wie PHP, JavaScript, CSS, oder HTML. Diese legt fest, 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.
Durch das gemeinsame Umschalten von Sprache und Theme erhält jeder Snippet den richtigen Look Hier ist ein JavaScript-Snippet zum Thema Dark.
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.
Stil des Codeblocks #
Die Stil Tab aufgeteilt wird in Container und Knopf„Plus Muster Wenn die freie Muster Erweiterung eingeschaltet Die Container Abschnitt steuert den Rahmen des Codeblocks.
- 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.
- Nur benutzerdefiniertes Thema: Hintergrund, Typografie, Textfarbe, und Zeilennummernfarbe Benutzerdefiniert zeigt den Code in einer Farbe, ohne Keyword-Hervorhebung.
Die Knopf Abschnitt Stile der Kopiertaste: seine Typografie, Textfarbe, Hintergrundfarbe, Polsterung, Umrandung, und Radius Es gibt keine separaten Hover-Farben.
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.
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 Master Addons Pro Widget für Elementor, das Code mit Syntaxhervorhebung, Zeilennummern, einem Sprachthema und einer Copy-to-Clipboard-Taste anzeigt. Sie fügen ein Snippet ein, wählen die Sprache und das Thema 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 eine von 75 Sprachen im Code-Dropdown aus, darunter PHP, JavaScript, CSS, HTML, Python, SQL und YAML. Die Auswahl legt fest, wie die Syntaxfarben angewendet werden, sodass der Ausschnitt so liest, wie er es in einem Code-Editor tun würde.
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, Dark, Funky, Okaidia, Twilight, Coy, Solarized light, Tomorrow, and Custom Wählen Sie eine, um eine helle oder dunkle Seite zu treffen, oder verwenden Sie Benutzerdefinierte, um Ihren eigenen Hintergrund und Textfarben in der Registerkarte Stil-Benutzerdefinierte zeigt Code in einer Farbe, ohne Keyword-Hervorhebung.
Einwickelnd #
Das Quellcode-Widget verwandelt ein Roh-Snippet in einen sauberen, hervorgehobenen Block, den 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. Für einen Vergleich mit dem Code Highlight-Widget von Elementor Pro siehe die Elementorcodeblock-Widget Seite. Für eine andere Möglichkeit, strukturierte Inhalte darzustellen, siehe die Dynamisches Tabellen-WidgetDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
