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

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!
13. März 2021
Why this plugin is awesome. 1) The plugin renders on the server side which is ideally more work for your server. But with proper caching implementation, this approach increases page speed as the client doesn't have to load javascript on the client side. 2) The plugin adds on top of the existing gutenberg code block. Most of the syntax highlighters out there try to provide their own gutenberg block which makes it difficult to switch between plugins. For instance, I was using code syntax block plugin and I had to go to each post to convert them back to regular code blocks. 3) No client side scripts thus optimal for AMP enabled pages. As your AMP pages get cached on Google AMP cache anyway, your server has to generate pages rarely. 4) More theme options compared to other code block highlighters out there.
2. Januar 2021
This plugin is the best syntax highlighting plugin that I have used, thanks for all the hard work in developing it. One recommendation though... I just stumbled upon the ability to change the color scheme in the Customizer. This is an awesome feature, but not one that is highlighted in the description of the plugin or in the screenshots. Of course it is mentioned in the Advanced Usage wiki, but I have been using the plugin for months and definitely overlooked that 😉. A brief mention in the main description and a screenshot of the different theme options would definitely help unobservant users like myself. Thanks again!
24. Oktober 2020
I love that this is baked into the core code block without having to resort to a third-party integration that may or may not work. Well done on this one. Just a heads up though, which may require more testing. The latest Gutenberg release and this plugin do not appear to play well together. I had to disable the Gutenberg plugin, which invalidated the code blocks, and I had to recover each one. One feature request: Please add a rel attribute so I can display the language. Thanks again, Ronald Huereca
11. Oktober 2020
This is a great plugin. 1. The code looks just like it does in Visual Studio (theme: vs2015) 2. It improves performance in two ways: -generates html on the server-side, instead of rendering on the client-side. This is the main reason i looked into getting a different syntax highlighting plugin. I use a caching plugin, so it annoyed me that it was doing pointless client-side rendering. -the generated html is 3x smaller than the other plugin i was using. So the payload is smaller, and it's simply less work for the browser to paint. 3. It's simple. You just built-in Code block and change the language after you paste. 4. It has line wrapping. My current plugin doesn't have this, so it puts scroll bars on the code (looks bad) Great job with this plugin!
Alle 16 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.