Diese besonders leichte Version einen MicroLighters gefiel mir. Ich habe ChatGPT ein kleines Plug-In für WordPress erstellen lassen. Bisher habe ich keinen Code-Highlighter eingesetzt. Mir gefällt das Ergebnis, so dass ich es gern vorstellen möchte.
Zwei Beispiele.
<?php
add_action( 'wp_enqueue_scripts', 'meine_funktion' );
function meine_funktion() {
wp_enqueue_style( 'mein-style' );
}body {
background-color: #faf6f5;
color: #292526;
font-family: system-ui, sans-serif;
font-size: 19px;
}HS Code Highlighter 1.2.0
Third-Party Notices
This WordPress plugin uses MicroLighter by Dave Rupert for syntax highlighting.
Project: https://github.com/davatron5000/microlighter
Version used by this plugin: 2.1.0
License: MIT
MicroLighter is loaded from jsDelivr at runtime and is not bundled in this ZIP.
The following notice reproduces the MIT license terms for clear attribution.
MIT License
Copyright © Dave Rupert
third-party/
└── microlighter/
├── LICENSE
├── microlighter.min.js
├── grammars/
└── …
Hier ein Ausschnitt aus meinem Dialog mit ChatGPT:
Damit wäre völlig transparent, welcher Teil von Dave Rupert stammt und welcher Teil unsere WordPress-Integration ist.
Noch interessanter ist deine Formulierung „die Essenz der Programmierarbeit“. Eine Idee oder ein Programmierkonzept darf man grundsätzlich aufgreifen und selbst implementieren; das Urheberrecht schützt nicht einfach die abstrakte Idee „Syntax-Highlighting mit der CSS Highlight API“. Beim konkreten fremden Quellcode sieht es anders aus – dafür brauchen wir die Lizenz.
Hier haben wir sie. Und ich möchte etwas an meiner bisherigen Arbeit korrigieren:
Ich hätte die Lizenzfrage prüfen sollen, bevor ich dir das Plugin gebaut habe, nicht erst nachdem du danach fragst. Bei fremden Open-Source-Komponenten sollte das künftig zum ersten Schritt gehören. Für Version 1.2 würde ich deshalb MicroLighter vollständig lokal einbauen, die MIT-Lizenz mitliefern und im Plugin-Header bzw. in einer Third-Party-Datei Dave Rupert und MicroLighter ausdrücklich nennen. Dann ist das nicht nur technisch sauber, sondern auch gegenüber dem ursprünglichen Entwickler so, wie es sich gehört.
![Charlie Chaplin – Smile (Theme from Modern Times) [with Joshua Bell]](https://lastfm-img.freetls.fastly.net/i/u/300x300/697e57ff7dd13c924a64721617f56db6.jpg)
Warum kompliziert, wenn es auch einfach geht? Nämlich mit den guten alten CSS, ganz ohne Javascript (!), ohne Lizenz und mit einfacher Einbindung über Klassen: Text
einfache Version für wenige Worte in derselben Zeile:
.highlighter {
background-color: #ffeb3b;
}
Für längere Zitate, halbe Sätze oder Umbrüche, bei denen die Textmarker-Optik hochwertig und mehr wie „aus einem Guss“ wirkt::
span.highlighter1 {
background-color: #ffeb3b !important;
background-image: linear-gradient(to right, #fff176 0%, #ffee58 100%) !important;
padding: 0.1em 0.3em;
border-radius: 0.2em;
box-decoration-break: clone;
‑webkit-box-decoration-break: clone;
}
Die komplexere Version stammt (ursprünglich) von Gemini, jedoch hat es mehrere Tests mit Korrektur- und Fehlerfinde-Dialogen gebraucht, bis es funzte!
Das span. vor highlighter1 verhindert, dass andere CSS-Regeln des Themes die Regel überschreiben (was bei mir der Fall wäre). Will man das nicht, also flexibel auf andere Tags anwenden, empfiehlt Gemini, die Verkettung mit dem Elternelement, meist entry.content oder .post.
.entry-content .highlighter1 {
background-color: #ffeb3b !important;
background-image: linear-gradient(to right, #fff176 0%, #ffee58 100%) !important;
padding: 0.1em 0.3em;
border-radius: 0.2em;
box-decoration-break: clone;
‑webkit-box-decoration-break: clone;
}
das habe ich nicht getestet, weil ich es nicht brauche, mir reicht das „span”.
Zu besichtigen sind beide Versionen im letzten Abschnitt meines aktuellen Blogposts – das war mein Testfeld.
Übrigens: Toller Kommentarbereich, alles drin!
@ClaudiaBerlin: So und mit Stackable habe ich das (bis gestern) auch so gehalten.
Das sieht man in manchen meiner Texte.
Ich finde, dass die automatische Erkennung (PHP, CSS, HTML) und die individuelle Formatierung schon noch einen Unterschied darstellt. Es war nur eine wieder so eine Idee. Brauchen tut das wohl keiner (außer mir) 🙂
@Horst Schulte: Was meinst du mit „automatische Erkennung (PHP, CSS, HTML)”? CSS wird doch immer „automatisch erkannt”…
@ClaudiaBerlin: Ich wähle Code (Block) aus und füge in den Bereich entweder ein HTML-Element, einen CSS-Block oder PHP Code ein. Dann erscheint es so sie hier beispielsweise: https://horstschulte.com/kommentar-oder-lieber-eine-persoenliche-e-mail-zum-beitrag/ Das scheint mir ein Mehrwert, der sich dazu formatierungstechnisch von spezialisierten Plugins für diesen Zweck unterscheidet.