Springe zum Hauptinhalt

So fügen Sie einen Codeausschnitt mit Gutenberg in WordPress hinzu

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Fast jeder Blogger, Ersteller von Inhalten oder technische Entwickler muss von Zeit zu Zeit hervorgehobene Ausschnitte in seinem Blog veröffentlichen. Es kann Kopfschmerzen an sich sein. Es kann jedoch auch erforderlich sein, eine oder mehrere Zeilen in diesem Snippet hervorzuheben, und diese Funktionalität ist leider nicht Teil der meisten Code-Integrationen. Glücklicherweise existiert das Plugin SyntaxHighlighter Evolved. Wir zeigen Ihnen, wie Sie damit den Code so sauber und lesbar wie möglich halten.

SyntaxHighlighter weiterentwickelt

Syntax-Textmarker

Die Installation und Aktivierung des Plugins ist einfach. Sie finden es im WP.org-Plugins-Repository aber stellen Sie sicher, dass es gut gemacht ist Alex Mills (Viper007Bond), weil es in der Tat viele Ergebnisse gibt. Wir wissen jedoch, dass dieser zuverlässig und aktuell ist. Darüber hinaus enthält dieser einen speziellen Block für den Gutenberg-Editor. Ganz zu schweigen von einer Reihe von Parametern, mit denen Sie Ihre Erfahrung personalisieren können. Dies macht es zu unserer Wahl für diese Art von Aufgabe.

Syntax Textmarker WordPress Plugin

Im Menü Parameter In Ihrem WordPress-Dashboard finden Sie ein neues Element namens Syntax . Gehen Sie voran und klicken Sie darauf. Dort können Sie alles einstellen, was Sie zum Einbetten der Snippets in Ihre WordPress-Site benötigen.

SyntaxHighlighter-Einstellungen

Die Einstellungsseite für das Plugin ist relativ einfach. Ein besonderes Element, das uns an diesem Plugin gefällt, ist, dass Sie eine Reihe von Anpassungen hinsichtlich der Art und Weise erhalten, wie der Code auf Ihrer Site angezeigt wird. Sie können der Einbettung CSS-Klassen hinzufügen, den Zeilenumfang anpassen, Farbthemen auswählen, intelligente Registerkarten und Zeilenumbrüche verwenden und entscheiden, ob die individuelle Hervorhebung der Codierungssprache geladen werden soll. Website-weit.

Syntaxhighlighter-Konfiguration

Wir möchten drei bestimmte Parameter definieren, die die meisten Menschen kennen sollten.

Plugin-Version, Zeilennummern und Tabulatorgrößen

Die erste ist, welche Version des Plugins Sie laden. Obwohl das Plug-In im Repository auf dem neuesten Stand bleibt, Sie können zwischen den Versionen 2.x und 3.x des Plug-Ins wählen , abhängig davon, wie Sie Ihren Code anzeigen möchten. Beide sind sicher, bieten jedoch jeweils bestimmte Funktionen, die der andere (zum Zeitpunkt des Schreibens) nicht bietet.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Wenn Benutzer Ihren Code am wichtigsten kopieren, reicht Version 3.x aus. Wenn Ihre jedoch für die Anzeige nützlicher ist als das eigentliche Dienstprogramm, ist die neue Zeile in Version 2.x möglicherweise besser für Sie, da keine Bildlaufleisten mehr erforderlich sind. für große Codefragmente.

Dann müssen Sie die Zeilennummern anzeigen oder nicht. Für große Codestücke und Tutorials sind Zeilennummern von unschätzbarem Wert. Wenn Sie jedoch kurze Snippets haben, müssen Sie diese nicht dauerhaft als Zeilen 1 und 2 kennzeichnen. Wenn Sie sie entfernen, kann das Erscheinungsbild des Codes erheblich verbessert werden.

Und dann ist da noch der Registerkartengröße immer noch umstritten. Die Standardoption ist 4, Sie können sie jedoch in eine beliebige Zahl ändern. Einschließlich des korrekten Werts von 2. (Ja, wir stellen fest, dass es keinen korrekten Wert gibt. Wir mögen nur 2 Leerzeichen für die Tabulatoren.)

Ihr Code und Shortcodes

Wenn Sie zum Ende der Seite scrollen Parameter Sie sehen eine große Code-Vorschau sowie eine große Anzahl von Shortcode-Parametern. Ihre Zeit wäre gut angelegt, um zu sehen, was das Plugin alles tun kann, um Ihre Snippets zu präsentieren. Alle Änderungen, die Sie oben an der Codeanzeige in den obigen Einstellungen vorgenommen haben, werden hier wiedergegeben. Stellen Sie also sicher, dass Sie auf Speichern klicken, nachdem Sie eine der Optionen geändert haben.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Siehe Divi-Syntaxhighliter-Modifikationen

Während einige Leute möglicherweise nicht die größten Fans von Shortcodes sind, weil sie Sie mit bestimmten Plugins verknüpfen können, halten wir diese für sinnvoll, da sie intelligent und leicht zu merken sind. Wenn nichts anderes, müssen Sie sich an zwei Dinge erinnern, und dann funktioniert das Plugin optimal für Sie.

ou ou ou et...bien, vous obtenez</li><li></li></ul>

Oder einige Variationen. Wenn Sie sich erinnern können, sind Sie zuversichtlich, was Sie mit diesem Plugin alles anstellen können. Während Sie lange Bezeichner verwenden können, ist das SyntaxHighlighter-Plugin gut genug aufgebaut, um Ihre Arbeit zu vereinfachen.

Verwenden Sie Funktionscodes

Überall dort, wo Sie einen Shortcode erstellen können, können Sie ihn verwenden. In Divi oder dem klassischen Editor können Sie das Textmodul oder den TinyMCE-Editor verwenden und den Code einfach zwischen die Funktionscodes einfügen. Aufgrund der Funktionsweise der Registerkarte "Visual" empfehlen wir die Verwendung von Text um diese Formatierungs-Sonderzeichen beizubehalten.

Divi-Textparameter

Wenn Sie ein Gutenberg / Block Editor-Benutzer sind, sind die Dinge so einfach. Sie können auch hier den Textblock verwenden. Noch einfacher ist der benutzerdefinierte HTML-Block. Fügen Sie den Code wie oben in die Shortcode-Tags ein.

html gutenberg divi . blockieren

Besser noch, der SyntaxHighlighter Evolved-Block ist selbst. Die Plug-In-Installation enthält einen eigenen Gutenberg-Block. Wenn Sie also kein Shortcode sind und sich nicht mit den Einstellungen herumschlagen möchten, müssen Sie dies nicht tun. Finden Sie einfach den Block unter Formatierung und fügen Sie es in Ihre Nachricht oder Seite ein.

Syntax Highliter Gutenberg

Unabhängig davon, wie Sie den Code einfügen, wird im Frontend Ihrer WordPress-Site dasselbe Rendering angezeigt.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Um es zusammenzufassen

Möglicherweise müssen Sie Ihrem Publikum aus vielen Gründen Ausschnitte präsentieren. Vielleicht schreiben Sie Tutorials oder veröffentlichen Lösungen für häufig auftretende Probleme, die das Publikum nach Belieben verwenden kann? Aber manchmal bietet eine GitHub-Integration Ihren Benutzern einfach nicht die gewünschte Erfahrung. In diesem Fall benötigen Sie ein Plugin wie SyntaxHighlighter Evolved. 

Mit nur wenigen Klicks, einer kleinen Anpassung und einem Gutenberg-Block oder einem Shortcode kann Ihr Publikum Ihren Code problemlos durchsuchen.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren