Elementorcode-Block-Widget mit Syntax-Highlighting (Pro)
Source Code ist ein Master Addons Pro Widget zum Anzeigen von Code-Schnipseln auf einer Elementor-Seite Fügen Sie den Code ein, wählen Sie eine von 75 Sprachen und eines von acht Prism.js Themes, und der Block rendert mit Syntaxfarben, optionalen Zeilennummern und einer Kopie auf die Schaltfläche Zwischenablage Besucher können den Code lesen und kopieren, aber nicht bearbeiten Es passt zu Tutorials, Dokumentationen, Changelogs und Entwicklerportfolios.
So fügen Sie einen Codeblock in Elementor hinzu
Source Code benötigt Elementor und einen aktiven Master Addons Pro Lizenz.
- Master Addons Pro aktivieren, Seite mit Elementor bearbeiten und Widgets-Bedienfeld suchen nach Quellcode.
- Ziehen Sie es dorthin, wo das Snippet hingehört.
- Wählen Sie die Sprache aus Code und ein Thema.
- Fügen Sie den Ausschnitt in die ein Quellcode Box.
- Schalten Sie die Kopiertaste und die Zeilennummern ein und stellen Sie den Schaltflächentext, die Sichtbarkeit und die Position ein.
- Stellen Sie im Register Stil eine Höhe für lange Schnipsel ein und stylen Sie die Schaltfläche, sehen Sie sich dann die Seite in der Vorschau an und testen Sie Kopieren.
Jede Einstellung wird in der Einstellungen für Quellcode-Widgets Führung.
75 Sprachen und 8 Prism.js-Themen
Die Code Dropdown listet 75 Sprachen auf, von HTML, CSS, JavaScript und PHP bis hin zu Python, Bash, SQL, JSON, YAML, TypeScript, React JSX, Go, Kotlin und Swift. Thema Angebote Standard, Dark, Funky, Okaidia, Twilight, Coy, Solarized light und Tomorrow Wählen Sie Benutzerdefiniert Hintergrund, Textfarbe, Zeilennummerfarbe und Typografie im Reiter Stil selbst einzustellen.
- Verwenden Sie ein helles Thema wie Standard- oder Solarlicht auf weißen Seiten und Okaidia oder Tomorrow auf dunklen Abschnitten.
- Benutzerdefiniert hat keine Schlüsselwortfarben: Der Code wird in der einzelnen Textfarbe angezeigt, die Sie auswählen. Verwenden Sie daher ein voreingestelltes Design, wenn Sie Syntaxfarben wünschen.
- Ein Widget hält einen Snippet Platzieren Sie mehrere Widgets nebeneinander für Code und Ausgabe.
Elementor Pro Code Highlight vs. Master Addons Quellcode
Elementor Pro hat ein eigenes Code Highlight Widget Beide verwenden Prism.js, daher kommt es auf die Extras an, die Sie benötigen.
| Merkmal | Elementor Pro Code Highlight | Quellcode der Master-Addons |
|---|---|---|
| Preis | Benötigt Elementor Pro | Benötigt Master Addons Pro |
| Sprachen | 37 | 75 |
| Themen | 6 (Solid, Dark, Okaidia, Solarizedlight, Tomorrow, Twilight) | 8 plus Benutzerdefinierte Farben |
| Knopf kopieren | Kopieren Sie auf den Zwischenablageschalter | Benutzerdefinierter Text, kopierter Text, Immer oder im Mauszeiger, zwei Positionen, vollständiges Styling |
| Liniennummern | Ja | Ja |
| Zeilen hervorheben | Ja | Nein |
| Wortfolie | Ja | Nein |
| Höhe und Schriftgröße | Ja | Höhe, plus Typografie mit dem Custom-Thema |
Wählen Sie Elementor Pro, wenn Sie bestimmte Linien hervorheben oder lange Zeilen einwickeln müssen Wählen Sie Master-Addons, wenn Sie mehr Sprachen, mehr Themen oder einen gestylten Kopier-Button wünschen Verwandte: Inhaltsverzeichnis Für lange Tutorials und Dynamische Tabelle Referenztabellen.
Kopieren Sie Schaltflächen- und Zeilennummern
Einschalten Kopier-Taste aktivieren Schaltfläche hinzuzufügen, die das ganze Snippet kopiert Stellen Sie seine Kopieren Sie den Schaltflächentext, die Nach kopiertem Schaltflächentext Nach einem Klick gezeigt, wurde Knopfsichtbarkeit (Immer oder im Schwebeflug) und Tastenposition (oben rechts oder unten rechts Ecke). Liniennummer aktivieren Zahlen auf der linken Seite addiert.
- Halten Sie die Schaltfläche auf Tutorial-Seiten immer so eingestellt, dass die Leser es bemerken.
- Durch Zeilennummern kann man sich leicht auf eine Zeile in seinem Text beziehen.
- Es gibt keine Möglichkeit, bestimmte Linien hervorzuheben oder lange Linien in das Widget einzuwickeln.
Behälter- und Knopfstyling
Die Container Abschnitt setzt eine Höhe (bis zu 1200 px) so lange Schnipsel scrollen, plus Polsterung, Rand, Rand und Radius Mit dem Custom-Design fügt es auch einen Hintergrund, Typografie, Textfarbe und Liniennummer Farbe hinzu Die Knopf Abschnitt Stile der Kopierschaltfläche mit Typografie, Textfarbe, Hintergrundfarbe, Polsterung, Rand und Radius.
- Decken Sie die Höhe auf lange Dateien, damit die Seite lesbar bleibt.
- Passen Sie den Knopfhintergrund an Ihre Markenfarbe an.
- Fügen Sie eine Polsterung hinzu, damit der Code die Blockkanten nicht berührt.
Häufig gestellte Fragen zum Quellcode
Ist das Quellcode-Widget kostenlos?
Nr. Source Code ist Teil von Master Addons Pro. Elementor Pro-Benutzer haben auch das Code Highlight-Widget von Elementor.
Kann ich die Zeilennummern neben dem Code ausblenden?
Ja. Set Liniennummer aktivieren zu Nein für einen saubereren Block.
Wo kann ich den Kopier-Button positionieren?
Einstellen Tastenposition rechts oben oder rechts unten Ecke, und Knopfsichtbarkeit Immer oder im Schwebezustand.
Welche Sprachen unterstützt das Source Code Widget?
75, im Code-Dropdown ausgewählt Sie umfassen HTML, CSS, JavaScript, PHP, Python, Bash, SQL, JSON, YAML, Markdown, TypeScript, React JSX und TSX, Go, Java, Kotlin, Swift, Ruby, C, C++ und C#. Besucher können den Code lesen und kopieren, aber nicht bearbeiten.
Kann ich anstelle der voreingestellten Themes ein eigenes Farbschema verwenden?
Teilweise. Set Theme to Custom, um im Abschnitt Container-Stil den Hintergrund, die Textfarbe, die Liniennummernfarbe und die Typografie auszuwählen Keyword-Farben kommen nur mit den acht voreingestellten Themes daher zeigt ein Custom-Block Code in einer Farbe an, es sei denn, Sie fügen Ihr eigenes CSS hinzu.
Kann ich bestimmte Zeilen hervorheben?
Nein. Das Widget hat keine Zeilenhervorhebungsoption Das Code Highlight-Widget von Elementor Pro kann ausgewählte Zeilen hervorheben, wenn Sie das benötigen.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
