So zeigen Sie hervorgehobene Code-Snippets auf Ihrer WordPress-Site an

Fast jeder Technologie-Blogger, Content-Ersteller oder Entwickler muss manchmal hervorgehobene Code-Snippets in seinem Blog anzeigen. Das kann an und für sich Kopfschmerzen bereiten. Es kann jedoch auch notwendig sein, eine oder mehrere Zeilen innerhalb dieses Snippets hervorzuheben, und diese Funktion ist leider nicht Teil der meisten Codeeinbettungen. Glücklicherweise existiert das SyntaxHighlighter Evolved-Plugin. Wir zeigen Ihnen, wie Sie damit Code so sauber und lesbar wie möglich halten.

Abonnieren Sie unseren Youtube-Kanal

SyntaxHighlighter Evolved

Die Installation und Aktivierung des Plugins ist unkompliziert. Sie finden es im WP.org-Plugin-Repository, aber stellen Sie sicher, dass Sie das von Alex Mills (Viper007Bond) erstellen . Es gibt viele Plugins mit ähnlichen Namen und Funktionen, aber wir wissen, dass dieses zuverlässig und auf dem neuesten Stand ist. Außerdem enthält dieser einen speziellen Block für den Gutenberg-Editor. Ganz zu schweigen von einer Reihe von Parametern, mit denen Sie Ihre Erfahrung anpassen können, die es zu unserer Wahl für diese Art von Aufgabe macht.

Unter dem Menü Einstellungen in Ihrem WordPress-Dashboard finden Sie einen neuen Eintrag mit der Bezeichnung SyntaxHighlighter . Fahren Sie fort und klicken Sie hinein. Dort können Sie jede Kleinigkeit anpassen, die Sie benötigen, um die Code-Snippets in Ihre WordPress-Site einzubetten.

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 Vielzahl von Anpassungen in Bezug auf die Anzeige des Codes auf Ihrer Website erhalten. Sie können der Einbettung CSS-Klassen hinzufügen, den Zeilennummernabstand anpassen, Farbthemen auswählen, Smart-Tabs und Zeilenumbrüche verwenden und entscheiden, wie einzelne Codierungssprachen-Hervorhebungen auf einer Site-weiten Skala geladen werden.

Wir möchten drei besondere Einstellungen hervorheben, die unserer Meinung nach den meisten Menschen bewusst sein sollten.

Plugin-Version, Zeilennummern und Tab-Größe

Die erste ist, welche Version des Plugins Sie laden. Während das Plugin selbst das Repository aktualisiert, können Sie je nachdem, wie Sie Ihren Code am besten anzeigen möchten , zwischen den Versionen 2.x und 3.x des Plugins wählen . Beide sind sicher, bieten jedoch jeweils spezifische Funktionen, die der andere nicht bietet (zumindest zum Zeitpunkt dieses Schreibens).

Wenn es am wichtigsten ist, dass Benutzer Ihren Code kopieren, reicht Version 3.x aus. Wenn Ihre jedoch mehr für die Anzeige als für das eigentliche Dienstprogramm gedacht ist, ist der Zeilenumbruch von Version 2.x möglicherweise besser für Sie geeignet, da sie die Notwendigkeit von Bildlaufleisten bei großen Codeschnipseln vermeidet.

Dann haben Sie die Möglichkeit, Zeilennummern anzuzeigen oder nicht. Für große Code-Stücke und Tutorials sind Zeilennummern von unschätzbarem Wert. Wenn Sie jedoch kurze Ausschnitte haben, müssen Sie sie nicht ständig als Zeilen 1 und 2 kennzeichnen. Wenn Sie diese entfernen, kann das Aussehen des Codes ziemlich aufgeräumt werden.

Und dann ist da noch die ständig umstrittene Tab-Größe . Die Option ist standardmäßig auf 4 eingestellt, Sie können sie jedoch in eine beliebige Zahl ändern. Einschließlich des korrekten Werts 2. (Ja, wir wissen, dass es keinen richtigen Wert gibt. Wir mögen nur 2 Leerzeichen für Tabs.)

Ihr Code und Shortcodes

Wenn Sie zum Ende der Einstellungsseite scrollen, sehen Sie eine große Codevorschau sowie eine große Anzahl von Shortcode-Parametern. Ihre Zeit wäre gut investiert, um sie durchzugehen, nur um zu sehen, was das Plugin alles tun kann, um Ihre Codeschnipsel hervorzuheben. Darüber hinaus werden alle Änderungen, die Sie oben an der Anzeige des Codes in den obigen Einstellungen vorgenommen haben, hier widergespiegelt. Achten Sie also darauf, auf Speichern zu klicken, nachdem Sie eine der Optionen geändert haben.

Während einige Leute nicht die größten Fans von Shortcodes sind, weil sie dich an bestimmte Plugins binden können, denken wir, dass es sich lohnt, diese zu verwenden, da sie intelligent und leicht zu merken sind. Wenn nichts anderes, müssen Sie sich an zwei Dinge erinnern, und dann wird das Plugin für Sie die beste Leistung erbringen.

• oder

   or  or  or...well, you get it</li>
          <li>[highlight 5-9]</li>
  </ul>
  
  Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.
  
  While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here

  , und es ist formatiert und hervorgehoben.

  Verwenden der Shortcodes

  Überall, wo Sie einen Shortcode rendern können, können Sie diese verwenden. In Divi oder dem klassischen Editor können Sie das Textmodul oder den TinyMCE-Editor verwenden und den Code einfach zwischen die Shortcodes einfügen. Aufgrund der Funktionsweise der Registerkarte "Visuell" empfehlen wir Ihnen, die Registerkarte " Text" zu verwenden, um die Sonderzeichenformatierung beizubehalten.

  

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

  

  Noch besser ist jedoch der SyntaxHighlighter Evolved-Block selbst. In der Plugin-Installation ist ein eigener Gutenberg-Block enthalten, sodass Sie dies nicht tun müssen, wenn Sie kein Shortcode-Benutzer sind und nicht mit den Parametern herumfummeln möchten. Suchen Sie einfach den Block unter Formatierung und fügen Sie ihn in Ihren Beitrag oder Ihre Seite ein.

  

  Unabhängig davon, wie Sie den Code einfügen, sehen Sie das gleiche Rendering im Frontend Ihrer WordPress-Site.

  

  Beenden

  Es gibt viele Gründe, warum Sie Ihrem Publikum Code-Snippets präsentieren müssen. Vielleicht schreibst du Tutorials oder postest Fixes für häufige Probleme, damit die Öffentlichkeit sie nach Bedarf nutzen und verwenden kann. Aber manchmal bietet eine GitHub-Einbettung einfach nicht genau die Art von Erfahrung für Ihre Benutzer, die Sie möchten. Dann brauchen Sie ein Plugin wie SyntaxHighlighter Evolved. Mit ein paar Klicks, ein wenig Anpassung und entweder einem Gutenberg-Block oder einem Shortcode wird Ihr Publikum problemlos durch Ihren Code waten.

  Welche Verwendungsmöglichkeiten könnten Sie auf Ihrer Website finden, um Code wie diesen hervorzuheben?

  Beitragsbild des Artikels von Adil Bouyghajden / shutterstock.com