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

19. April 2022
No agrega bloques nuevos a WordPress, ya que potencia el bloque de código existente. Soporta gran cantidad de Lenguajes, puedes mostrar líneas y marcar ciertas partes del código. ¡Vaya todo lo que necesito! Y no hay que configurar nada!
21. Januar 2022
Just found this gem of a plugin when looking for code syntax highlighting plugins. No hassle at all to get working, just install and activate and it formats and styles existing code blocks in posts. Could not be happier with this plugin. Wlldone!
19. November 2021
I've switched to "Syntax-highlighting Code Block" from a similar plugin, mainly because the old one didn't recognize the new Java Text Blocks. This one does, and GTMetrix also reports a heavily reduced DOM size for almost all my pages, for example: from 2,363 elements down to 1,654 elements from 1,842 elements down to 1,442 elements That's an amazing and surprising improvement! I do have one feature request, though: It would be great if one could select a subset of the available languages for the dropdown, so you don't always have to scroll through all 185 languages.
7. Juni 2021
Hi, I just wanted to stop by to say thanks for such a great plugin. It does the job perfectly for me. The way you have used CSS allows me to customise the different colours etc for different components and I have even got a dark mode version working (with prefers darkmode CSS). I really hope you are able to keep this project maintained. Cheers Colin
12. April 2021
Just saw this plugin in the source code of another developers blog. I use(d) another block to highlight my code but instantly bought in the idea of server render the code instead of ship JS to my users. I try to step up my game of resource efficient webdevelopment. So reduce the JS I ship to users - server rendering over client side rendering etc. So this plugin rocks. Also I am glad that changing over will be doable. The plugin I currently use let me switch to your plugin without trouble, so this will be a task for every now and then in the next days. Thanks for this plugin!
Alle 21 Rezensionen lesen

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 7 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.