Syntax-highlighting Code Block (with Server-side Rendering)

Beschreibung

Dieses Plugin erweitert den Code-Block im WordPress-Core um Syntax-Hervorhebung, die auf dem Server gerendert wird. Existierende Code-Blöcke auf einer Website werden automatisch um Syntax-Hervorhebung erweitert. Serverseitige Syntax-Hervorhebung macht das Einbinden eines JavaScripts im Frontend (z. B. Highlight.js oder Prism.js) überflüssig und es garantiert, dass es kein kurzes Aufblitzen des nicht hervorgehobenen Codes gibt (FOUC?). Durch das Reduzieren des Skripts im Frontend verbessert dessen Leistung und erlaubt auch eine vernünftige Syntax-Hervorhebung auf AMP-Seiten, die vom offiziellen AMP-Plugin (engl.) erstellt werden (siehe auch ampproject/amp-wp#972 (engl.)) oder wenn JavaScript im Browser deaktiviert ist.

Zusätzlich dazu, dass kein JavaScript zum Frontend hinzugefügt wird, wird das Stylesheet, um das Styling des Code-Blocks festzulegen, nur dann eingebunden, wenn es auf der Seite einen Code-Block gibt. Das Stylesheet wird inline eingebunden, wenn der Code-Block angezeigt wird, damit dieser nicht von anderen Stylesheets überschrieben wird. Wenn das Stylesheet aus irgendeinem Grund nicht geladen wird, wird der Block einfach ohne Styling angezeigt, mit einer kleinen Ausnahme: hervorgehobene Zeilen sind von mark-Elementen (engl.) umschlossen, sodass sie dennoch hervorgehoben werden, ebenfalls in RSS-Feeds und Beiträge, die als E-Mail versendet werden (solange diese das mark-Element im jeweiligen Programm unterstützen).

Der erweiterte Code-Block benutzt eine automatische Erkennung der Sprache, um die Syntax-Hervorhebung hinzuzufügen, aber du kannst die Sprache in den Einstellungen des Blocks innerhalb der Sidebar überschreiben. (Es gibt aktuell keine Syntax-Hervorhebung des Code-Blocks im Editor.) Das Plugin unterstützt alle Programmiersprachen (engl.), die highlight.php (engl.) unterstützt (das eine Portierung von highlight.js (engl.) ist). Der Code-Block wurde ebenfalls erweitert, um das Hervorheben einzelner Zeilen zu ermöglichen. Es gibt auch ein Auswahlkästchen, um einzustellen, ob die Zeilennummern im Frontend angezeigt werden soll (wobei die Nummern nicht auswählbar sind). Zuletzt, aufgrund Inkonsistenzen über Themes hinweg, ob die Zeilen im Code-Block umgebrochen werden sollen oder nicht, fügt dieses Plugin Styling hinzu, um sie standardmäßig nicht umbrechen zu lassen, mit einem Auswahlkästchen, sie umbrechen zu lassen, wenn gewünscht.

Für eine erweiterte Benutzer, schau dir bitte das Plugin-Wiki (engl.) an.

Dieses Plugin wird auf GitHub entwickelt (engl.). Siehe die Liste der aktuellen Probleme (engl.) des Plugins. Bitte zögere nicht, weitere Probleme oder Anfragen zu melden, auf die du stößt. Pull requests (engl.) sind willkommen.

Danksagungen

Dies ist ein Fork des Code-Syntax-Blocks (engl.) von Marcus Kazmierczak (engl.) (mkaz), welcher auch auf de.WordPress.org verfügbar ist. Copyright (c) 2018 Marcus Kazmierczak. Lizenziert unter GPL 2.0 oder später.

highlight.php (engl.) ist unter der BSD 3-Clause-Lizenz veröffentlicht. Copyright © 2006-2013, Ivan Sagalaev (maniac@softwaremaniacs.org), highlight.js (ursprünglicher Autor). Copyright © 2013, Geert Bergman (geert@scrivo.nl), highlight.php

Screenshots

  • Code-Blöcke können wie gewohnt hinzugefügt werden, optional mit Überschreiben der automatisch erkannten Sprache. Definiere auch Zeilen, die hervorgehoben werden sollen, ob Zeilennummern angezeigt und ob die Zeilen umgebrochen werden sollen.
  • Der Code-Block wird ohne JavaScript mit Syntax-Hervorhebung im Frontend dargestellt. Stylesheets werden nur hinzugefügt, wenn der Block auf der Seite ist.

Rezensionen

15. Mai 2020
Congratulations. This is a great plugin. I used it to enable AMP on my blog. I believe this is the right way to do things on the web. Javascript should be used only when there is user interaction on the client side and when there is no other alternative. Everything that can be rendered on the server should be done that way.
20. Februar 2020
Server-side rendering is absolutely preferred and even allows you to have syntax highlighting in AMP pages. Great plugin, best Syntax-highlighting plugin so far for Gutenberg!
3. November 2019
Plug and play. The language auto detection is awesome and it works with Gutenberg. Thank you for the great plugin!
Lies alle 9 Rezensionen

Mitwirkende & Entwickler

„Syntax-highlighting Code Block (with Server-side Rendering)“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

„Syntax-highlighting Code Block (with Server-side Rendering)“ wurde in 3 Sprachen übersetzt. Danke an die Übersetzerinnen und Übersetzer für ihre Mitwirkung.

Übersetze „Syntax-highlighting Code Block (with Server-side Rendering)“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

Bitte schaue auf die Release-Seite auf GitHub (engl.) für das Änderungsprotokoll des Plugins.