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

Beschreibung

Das Plugin erweitert den Code-Block im WordPress Core mit Syntax-Hervorhebung, das auf dem Server gerendert wird. Dadurch, dass die Syntax-Hervorhebung auf dem Server durchgeführt wird, gibt es keinen Grund, JavaScript dafür im Frontend bereitzustellen (z. B. Highlight.js oder Prism.js). Außerdem stellt das sicher, dass es kein Aufblitzen von Code ohne Hervorhebung (FOUC?) gibt. Die Reduzierung von Skripten im Frontend verbessert die Frontend-Leistung und es erlaubt die richtige Darstellung des Codes mit Syntax-Hervorhebung auf AMP-Seiten mit dem offiziellen AMP-Plugin (engl.) (siehe auch ampproject/amp-wp#972 (engl.)).

Der erweiterte Code-Block benutzt eine automatische Erkennung für die Sprache, die im Block benutzt wird, um die Syntax-Hervorhebung hinzuzufügen. Du kannst aber die Sprache im Block-Inspektor überschreiben. (Es gibt aktuell keine Syntax-Hervorhebung des Code-Blocks im Editor.) Das Plugin unterstützt alle 185 Programmiersprachen (engl.), die highlight.php (engl.) unterstützt (welches eine Portierung von highlight.js (engl.) ist).

Jeder der 89 Stile (engl.), die von highlight.php/highlight.js angeboten werden, kann eingebunden werden. Um den Standard-Stil zu ändern, kannst du ein Theme im Customizer im Abschnitt Farben auswählen. Um den Standard-Stil programmatisch zu ändern, benutze syntax_highlighting_code_block_style, um einen der Stilnamen (engl.) auszuliefern, zum Beispiel github:

add_filter(
    'syntax_highlighting_code_block_style',
    function() {
        return 'github';
    }
);

Wenn ein Filter verfügbar ist, wird die Thame-Auswahl im Customizer automatisch deaktiviert.

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, um beim Erweitern zu helfen.

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

  • Stelle Inhalte wie gewohnt im Code-Block bereit und überschreibe optional die automatisch erkannte Sprache.
  • Der Code-Block wird mit Syntax-Hervorhebung im Frontend ohne irgendein eingebundenes JavaScript dargestellt.

Blöcke

Dieses Plugin unterstützt 1 Block.

core/code
Syntax-highlighting Code Block (with Server-side Rendering)

Rezensionen

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!
30. August 2019
The best plugin for highlighting code in the block editor Gutenberg. Its main advantage: no need to enqueue any JavaScript. The only drawback is the long plugin name. Great!
1. August 2019
Just installed this on my site and started writing up a new post. I can't get over how well it works. Thanks, Weston!
Lies alle 7 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.