Quellcode
Teilen Sie Code-Schnipsel auf Ihrer Elementor-Site auf die richtige Art und Weise – wunderschön formatiert und für Besucher einfach zu verwenden. Mit diesem Source Code-Element können Sie HTML, CSS, JavaScript, PHP oder eine der 80+-Programmiersprachen mit sauberer Syntaxhervorhebung anzeigen Wählen Sie einfach Ihre Sprache aus, wählen Sie ein Farbthema, das zu Ihrem Stil passt, und fügen Sie Ihren Code ein. Es fügt sogar eine praktische „Kopieren“-Schaltfläche hinzu, damit Benutzer sofort Ihren Code mit einem Klick greifen können. Es ist das perfekte Tool für Tutorials, Dokumentation, Entwicklerportfolios oder jede Website, auf der Sie Code sauber und professionell präsentieren müssen.
Unterstützung für breite Sprache und Themen
Anzeige von Code in über 80 verschiedenen Programmier - und Auszeichnungssprachen, jeweils mit genauer Syntaxhervorhebung Wählen Sie aus 8+ visuellen Themes, die zur dunklen oder hellen Ästhetik Ihrer Website passen, sodass Ihr Code lesbar und optisch ansprechend ist.
- Perfekt für Tutorial-Blogs, die mehrere Sprachen wie HTML, CSS, JS und PHP abdecken.
- Verwenden Sie ein dunkles Theme für einen modernen, entwicklerfreundlichen Look.
- Stellen Sie sicher, dass Code auf einen Blick leicht lesbar und verständlich ist, und verbessern Sie so die Lernerfahrung.
One-Click-Kopierfunktionalität
Fügen Sie eine benutzerfreundliche Schaltfläche hinzu, mit der Besucher Ihren Code sofort in ihre Zwischenablage kopieren können Passen Sie den Text, die Position und die Bestätigungsnachricht der Schaltfläche an, die nach dem Kopieren angezeigt wird, sodass sie nicht mehr manuell auswählen und kopieren müssen.
- Verbessert das Benutzererlebnis für Entwickler, die Ihre Snippets wiederverwenden möchten, erheblich.
- Steigern Sie das Engagement, indem Sie Ihren wertvollen Code einfach zu nehmen und zu verwenden.
- Zeigen Sie eine “Kopiert!” - Bestätigung, um den Nutzern ein klares Feedback zu geben.
Vollständige visuelle Anpassung
Gestalten Sie jeden Teil des Codeblocks so, dass er nahtlos mit Ihrem Design harmoniert Passen Sie die Polsterung, Ränder und Ränder des Behälters an und gestalten Sie unabhängig die Farben, Typografie und Eckrundungen der Kopierschaltfläche.
- Passen Sie den Hintergrund und die Grenzen des Codeblocks an das Farbschema Ihrer Website an.
- Entwerfen Sie eine markante Kopierschaltfläche, die Klicks fördert.
- Steuern Sie den Abstand um den Code herum für einen sauberen, integrierten Look auf der Seite.
Häufig gestellte Fragen zum Quellcode
Wie ändere ich die Programmiersprache für die Syntaxhervorhebung?
Wählen Sie in den Inhaltseinstellungen mit dem Dropdown-Menü “Code” die richtige Sprache für Ihr Snippet aus (z.B. HTML, CSS, PHP).Damit wird sichergestellt, dass die Schlüsselwörter und die Syntax genau eingefärbt werden.
Kann ich die Zeilennummern neben dem Code ausblenden?
Ja. Sie können Zeilennummern deaktivieren, indem Sie die Option “Zeilennummer aktivieren” auf “Nein” setzen. Dadurch erhalten Sie einen saubereren Codeblock, wenn Zeilennummern für Ihr Beispiel nicht erforderlich sind.
Wo kann ich den Kopier-Button positionieren?
Sie können die Position des Buttons wählen, z.B. die “Obere rechte Ecke” des Codeblocks, Sie können auch seine Sichtbarkeit steuern, indem Sie ihn so einstellen, dass er immer angezeigt wird oder vielleicht nur im Hover erscheint.
Ist der angezeigte Code für Website-Besucher bearbeitbar?
Nr. Der Code wird als statischer, gestylter Block zum Betrachten und Kopieren dargestellt Besucher können den Quellcode nicht direkt auf Ihrer Seite bearbeiten; er dient nur zur Anzeige.
Kann ich anstelle der voreingestellten Themes ein eigenes Farbschema verwenden?
Das Element bietet mehrere vorgestaltete Themes (wie “Morgen”).Um komplett benutzerdefinierte Farben zu verwenden, müssten Sie wahrscheinlich benutzerdefiniertes CSS hinzufügen, da die Styling-Optionen hauptsächlich den Container und die Schaltfläche steuern, nicht die internen Syntaxfarben.
Funktioniert der Kopier-Button auf mobilen Geräten?
Ja, die Kopierfunktion ist so konzipiert, dass sie auf allen Geräten funktioniert. Die Schaltfläche ist berührungsfreundlich und der Kopierbefehl wird ausgeführt, wenn auf ein Telefon oder Tablet getippt wird.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
