Fast alle Blogger, Ersteller von Inhalt oder Technologieentwickler müssen manchmal hervorgehobene Codeausschnitte in ihrem Blog anzeigen. Dies kann an sich schon Kopfschmerzen bereiten. 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 gibt es das SyntaxHighlighter Evolved-Plugin. Wir zeigen Ihnen, wie Sie damit den Code so sauber und lesbar wie möglich halten.
SyntaxHighlighter weiterentwickelt
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.
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 große Anzahl von Anpassungen erhalten, wie der Code auf Ihrer Website angezeigt wird. Sie können der Einbettung CSS-Klassen hinzufügen, die Zeilennummerierung anpassen, auswählen Themen Farbe, verwenden Sie intelligente Tabulatoren und Zeilenumbrüche und entscheiden Sie, wie einzelne seitenweite Codierungssprachen-Hervorhebungen geladen werden.
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.
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.
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>[highlight 5-9]</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 rendern können, können Sie ihn verwenden. Im Divi oder den klassischen Editor, Sie können das Textmodul oder den TinyMCE-Editor verwenden und den Code einfach zwischen den Shortcodes einfügen. Aufgrund der Funktionsweise der Registerkarte „Visuell“ empfehlen wir die Verwendung der Registerkarte Text um diese Formatierungs-Sonderzeichen beizubehalten.
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.
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.
Unabhängig davon, wie Sie den Code einfügen, wird im Frontend Ihrer WordPress-Site dasselbe Rendering angezeigt.
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.
