Willkommen beim Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
code

Code-Highlighten: Tipps und Tools für Entwickler:innen

Collage mit Bildern von Pexels und feelphotoz
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Code-Highlighten ist eine Methode, um Code in deinen Webseiten oder Anwendungen übersichtlicher und leichter lesbar zu machen. Wenn du als Entwickler:in Code in deinen Webseiten oder Anwendungen verwendest, ist es wichtig, dass dieser Code übersichtlich und leicht lesbar ist. Hierbei kann die Verwendung von HTML-Tags wie <pre> und <code> helfen, um Code-Blöcke optisch abzugrenzen und darzustellen.

Um die Syntax des Codes zusätzlich benutzerfreundlicher zu gestalten, kannst du auch ein Plug-in oder eine Bibliothek nutzen, die den Code hervorhebt und somit die verschiedenen Elemente des Codes farblich oder durch unterschiedliche Schriftarten hervorhebt. Doch Highlighten allein reicht nicht aus, um Code lesbar und verständlich zu machen, muss der Code zuerst gut strukturiert und formatiert werden.

Lass deinen Code erstrahlen mit Code Beautify und Syntax Highlighting – für eine perfekte Darstellung und verständliche Funktionen.

HTML <pre> und <code>

Zunächst sollten wir die Start-Tags definieren, die für dieses Thema relevant sind:

  • Das Tag <pre> ist praktisch für die Anzeige von PHP-Codes, HTML-Quelltext, JavaScript und CSS, da dabei die Leerzeichen, Tabulatoren, Spalten und Zeilenumbrüche erhalten bleiben.
  • Das Tag <code> hingegen ist ein Inline-Tag, das keinen Zeilenumbruch durchführt. Es wird verwendet, um Code innerhalb von Fließtexten zu kennzeichnen. Der <code>-Tag kann auch innerhalb des <pre>-Elements verwendet werden.

Wenn wir nun jedoch Texte übersetzen möchten, sollten wir beachten, dass die Übersetzung von Codes im <code>-Tag ausgeschlossen ist, während der Text im <pre>-Tag übersetzt werden kann. Um sicherzustellen, dass Codes nicht übersetzt werden, können wir den <pre>-Tag mit der Klasse notranslate versehen.

Wenn wir das Styling von <pre> und <code> anpassen möchten, können wir dies mit CSS tun. Eine einfache Möglichkeit besteht darin, die Attribute font-family, font-size und background-color anzupassen.

Zusammenfassend sind <pre> und <code> nützliche Tags für die Darstellung von Code in HTML-Dokumenten. Wir sollten jedoch darauf achten, dass die Übersetzung von Codes ausgeschlossen wird und das Styling dieser Tags mit CSS angepasst werden kann. Oder gleich besser folgend so Plug-in wie in Empfehlung ist: AH Code Highlighter. – somit ist auch das Thema von wegen der sprachlichen Übersetzung gebongt.

Designs Code Beispiel: Hier ist ein Beispielcode für Designs, den du nach Belieben anpassen oder im Customizer oder im Child-Theme reduzieren kannst.

/* pre-Tag, Text vorformatiert */
pre {
    border: 1px solid #f6f7f8;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    overflow: auto;
    margin: 0 0 15px;
    max-width: 100%;
    font-family: "Courier New", Consolas, Monaco, monospace;
    font-size: 1rem;
    color: #363636;
}
/* code-Tag, Code im Textverlauf */
code {
    background: #f9f9f9;
    padding: 2px;
    font-family: "Courier New", Consolas, Monaco, monospace;
    color: #363636;
}

Betreff für <code>

Um sicherzustellen, dass das <code>-Tag korrekt dargestellt wird, sollten Leerzeichen vor und nach dem <code>-Tag eingefügt werden.

Text <code>Code</code> Text


Im Folgenden werden wir uns mit verschiedenen Tools und Techniken beschäftigen, um Code lesbarer und verständlicher zu machen. Dieser Abschnitt beschäftigt sich mit dem Workflow zur Codes-Interpretation, bei dem die Formatierung eine wichtige Rolle spielt. Anschließend behandeln wir das Highlighten des Codes.

Code-Highlighting reicht nicht aus:
Priorität von formatiertem Code

Highlighten allein reicht nicht aus, um Code lesbar und verständlich zu machen. Code muss zuerst gut strukturiert und formatiert werden, um eine klare Struktur, richtige Einrückungen und kommentierte Codezeilen zu haben. Das Vorformatieren oder "Beautifier" von Code ist daher genauso wichtig wie das Highlighten, um den Code leichter verständlich zu machen.

Code-Highlighten, CODE IST POESIE
Illustrations geralt; var.

Code Beautify: CODE IST POESIE

Plug-ins / Bibliotheken
zum Code Highlighten

Anzumerken ist, dass wir der Auswahl von 16 Plug-ins zum Code Highlighten folgende besonders hervorhebe.

Wegerl.at empfiehlt:

AH Code Highlighter

Der AH Code Highlighter ist ein Tool, das 1,2 MB Speicherplatz bedarf, wobei davon ca. 1,1 MB für die Bildervorschauen der Themes verwendet werden. Es ist also ein äußerst performantes Plug-in, das an und für sich in so 100 KB steckt. Es bietet acht verschiedene Themes sowie die Möglichkeit, Code-Blöcke im Editor konform einzubinden und diese im Frontend durch einfaches Anklicken zu kopieren.

Verleihe deinem Code mit Code Beautify und Syntax Highlighten das Format und den Glanz seiner Funktion!

PRISM Plug-in SELBST erstellen

Die Erweiterung mit den oben genannten Bibliotheken wie dem AH Code Highlighter können auch selbst erstellt werden. Da ist folgende Website und Titel PRISM.JS Syntax Highlighter sehr von Nutzen. Es ist möglich, dies mit nur einem Theme in etwa mit 40 KB zu realisieren.

Prism.js-Syntaxhervorhebung zu deiner WordPress-Site hinzufügen.
Prism.js-Syntaxhervorhebung zu deiner WordPress-Site hinzufügen.

Es ist zu beachten, dass das Feature von AH, nämlich die performante Speicherung der Codes über einen Button und modales Fenster im Editor, in diesem selbst erstellten Prism-Plug-in nicht enthalten ist. Wenn du diese Funktionalität auch für den selbst erstellten Prism-Plug-in wünschst, musst du sie separat implementieren. In meiner folgenden Zusammenfassung zur Erstellung des Prism-Plug-ins wird die Umsetzung dieses Features behandelt.

PRISM steht für "Planning Tool for Resource Integration, Synchronization, and Management" und wird oft in der Informatik als probabilistisches Modellierungswerkzeug für Systeme verwendet. Es wird in der Software- und Hardware-Verifikation eingesetzt, um die Eigenschaften von Systemen zu überprüfen.

Prism.js: Eine präzise Nachlese

Folgende Auswertung zeigt, wie du Prism JS- und CSS-Dateien herunterladen und auf deinen Server hochladen kannst, um sie anschließend in dein Child-Theme zu integrieren. Diese Analyse führt dich durch jeden Schritt, einschließlich der Integration einer Schaltfläche für ein modales Fenster im Editor.

  1. Besuche wie oben anklicke des Bild (QR-Code) die Download-Seite von Prism und wähle deine bevorzugten Optionen aus, wie das Theme, die Sprachen, Plug-ins und die Komprimierungsstufe.

Es sei angemerkt, wie performant diese Seite ist: Nach der Auswahl des Themes werden alle Codes der Website mit dem ausgewählten Theme visuell dargestellt, was eine praktische Möglichkeit bietet, sich mit dem Theme vertraut zu machen.

Ein weiterer Tipp: Die Komprimierungsstufe in "Entwicklerversion" sind unten bei den Download-Buttons, die Codes gleich WYSIWYG verfügbar, was auch für künftige CSS-Anpassungen sehr praktisch sein kann. Für den Download zur Website empfiehlt sich die minimierte Version.

Sprachen: Für die Sprachen solltest du zunächst den Standardeinstellungen folgen:

  • Markup + HTML + XML + SVG + MathML + SSML + Atom + RSS; CSS; C-like; JavaScript) und dann je nach Bedarf weitere Sprachen auswählen. In meinem Beispiel wurden PHP und SQL hinzugefügt.

Plug-ins: Der Plug-in beinhaltet verschiedene Funktionen wie Line Numbers, Show Language, Copy to Clipboard Button (dabei wird das Häkchen zur "Toolbar" automatisch gesetzt.) Es ist dir überlassen, welche Features du benötigst. Das Line Highlight-Feature hat sich als unpraktisch erwiesen, siehe unterhalb, die Anmerkung. Eine schöne Ergänzung wäre jedoch das Previewers-Plug-in.

Anmerkung zum 'Copy to Clipboard Button': In manchen Fällen kann es sinNvoll sein, die Codes ohne den Copy-Button darzustellen. Hierfür steht das folgende JavaScript zur Verfügung:

/* PRISM Copy-Button ausblenden 'no-copy' */
document.addEventListener('DOMContentLoaded', function () {
    var codeBlocks = document.querySelectorAll('pre.no-copy');
    codeBlocks.forEach(function (codeBlock) {
        var copyButton = codeBlock.nextElementSibling.querySelector('.copy-to-clipboard-button');
        if (copyButton) {
            copyButton.remove();
        }
    });
});

Das ist dann der Class: no-copy im pre-Tag funktionell:

<pre class="no-copy">
    <code class="language-html">
        Das ist dann der Class: no-copy im pre-Tag funktionell.
    </code>
</pre>
Anmerkung zum Line Highlight-Feature

Das Line Highlight-Feature hat sich als unpraktisch erwiesen, da sind bspw im Lesemodus andere Zeilen markiert als man für den Normalmodus eingestellt hat. Wenn das Plug-in anderswo Probleme bereitet, hebt sich dies als Feature selbst auf.

Auch die Vorlage bspw. <pre class="line-numbers" data-line="7"><div style="padding: .25em">Some content</div><hr><code class="language-markup" id="foo"> funktioniert nicht wie erwartet, weil WordPress den Code im Umschalten vom Text- zum Visuell-Modus nicht korrekt interpretiert und das Ergebnis ist falsch dargestellt.

Wir empfehlen neben der Sprachanzeige und dem Kopieren-Button auch die Zeilennummerierung zu aktivieren. Im Betrieb kannst du dies dann entweder manuell durch Eingabe des entsprechenden Codes tun oder durch Anhaken der Option zur Zeilennummerierung in einem modalen Fenster.

Zur Zeilennummerierung auch CSS, welches von Nutzen sein kann:

pre[class*="language-"].line-numbers {
    position: relative;
    padding-left: 3.4em;
    line-height: 1;
}
  1. Klicke ganz unten auf die großen Schaltflächen "JS herunterladen" und "CSS herunterladen", um die Prism JS- und CSS-Dateien auf deinen Computer herunterzuladen.
  2. Verbinde dich mit deinem Server und navigiere zu deinem Child-Theme-Ordner. Erstelle einen neuen Ordner namens prism.
  3. Lade die heruntergeladene prism.js-Datei in den neu erstellten prism-Ordner deines Child-Themes hoch.
  4. Lade auch die heruntergeladene prism.css-Datei in den prism-Ordner deines Child-Themes hoch.
  5. Öffne die functions.php-Datei deines Child-Themes und füge den folgenden Code am Ende der Datei hinzu:
Child-Themes functions.php

/* JS und CSS für PRISM laden */
function mytheme_add_prism() {
  wp_enqueue_style( 'prism', get_stylesheet_directory_uri() . '/prism/prism.css' );
  wp_enqueue_script( 'prism', get_stylesheet_directory_uri() . '/prism/prism.js' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_add_prism' );
  1. Speichere die Datei und aktualisiere deine Website. Nun solltest du bald sehen können, dass "Prism" erfolgreich in dein Child-Theme integriert wurde.

Die Snippets zur functions.php ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Child Theme! – zum Beitrag Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

Im Editor

Um den Code in der gewünschten Form darzustellen, muss er zuerst im pre-Tag eingefügt werden und anschließend im Texteditor mit <pre><code class="language-*"> bearbeitet werden.

* der Platzhalter ist mit jeweiliger Sprache des Codes zu ersetzten.

Beispiel mit Zeilennummerierung <pre><code class="language-css line-numbers">

Classic-Editor:
Schaltfläche für ein modales Fenster im Editor zur Einfügung von Code

Schaltfläche für modales Fenster:
Einfach Code eingeben und einfügen

Um im Editor durch einen Button ein modales Fenster aufzurufen und dort den Code einzufügen, müssen zwei Codes implementiert werden.

Im ersten Schritt muss im Child-Theme im Ordner prism die Datei prism-button.js erstellt werden und der folgende JavaScript-Code abgespeichert werden:

Im Ordner prism die Datei prism-button.js

/* ModalWindowButton */
(function() {
    tinymce.PluginManager.add('prism_button', function(ed, url) {
        ed.addButton('prism_button', {
            text: false,
            image: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNIDEwMCAxNSBMIDAgMTg1IEwgMjAwIDE4NSBMIDEwMCAxNSIgc3R5bGU9ImZpbGw6IHJnYig4MSwgODcsIDk0KTsiLz4KPC9zdmc+',
			tooltip: 'PRISM Highlighter',
            onclick: function() {
                ed.windowManager.open({
                    title: 'Insert Code',
                    body: [
                        {
                            type: 'listbox',
                            name: 'language',
                            label: 'Language',
                            values: [
                                {text: 'HTML', value: 'html'},
                                {text: 'CSS', value: 'css'},
                                {text: 'JavaScript', value: 'javascript'},
                                {text: 'PHP', value: 'php'},
                                {text: 'SQL', value: 'sql'}
                            ]
                        },
                        {
                            type: 'checkbox',
                            name: 'line-numbers',
                            label: 'Show line numbers'
                        },
                        {
                            type: 'textbox',
                            name: 'code',
                            label: 'Code',
                            multiline: true,
                            minWidth: 600,
                            minHeight: 300
                        }
                    ],
                    onsubmit: function(e) {
                        var escapedCode = tinymce.html.Entities.encodeAllRaw(e.data.code);
                        var lineNumberClass = e.data['line-numbers'] ? ' line-numbers' : '';
                        ed.insertContent('<pre><code class="language-' + e.data.language + lineNumberClass + '">' + escapedCode + '</code></pre>');
                    }
                });
            }
        });
    });
})();

Nach Abschluss des folgenden zweiten Schrittes kann im Editor das Modalfenster durch Klicken auf das Icon geöffnet werden.

Im zweiten Schritt speichert man den folgenden Code in die functions.php des Themes:

  • Der erste Code lädt die PRISM JavaScript- und CSS-Dateien nur für Beiträge, die Code enthalten. Falls das so erwünscht ist, ist der Code von oben in Schritt 6 zu ersetzen. Aber falls bei dir der folgende Code, der nur für die Beiträge die PRISM-Dateien lädt, nicht funktioniert, so bleibt der Code aus Schritt 6 relevant.
  • Der zweite Code ab Zeile 28 (/* ModalWindowButtonEditor laden */) fügt eine Schaltfläche im Editor hinzu, die es Benutzern ermöglicht, Code über ein Modalfenster einzufügen.
Child-Themes functions.php

/* JS, CSS von PRISM laden */
function add_prism() {

    // Prüfen, ob der Inhalt des Beitrags einen <code class=-Tag hat
    if ( is_single() && stripos( get_the_content(), '<code class=' ) !== false ) {

        // Register prism.css file
        wp_register_style(
            'prismCSS', // handle name for the style 
            get_stylesheet_directory_uri() . '/prism/prism.css' // location of the prism.css file
        );

        // Register prism.js file
        wp_register_script(
            'prismJS', // handle name for the script 
            get_stylesheet_directory_uri() . '/prism/prism.js' // location of the prism.js file
        );

        // Die registrierten Stil- und Skriptdateien in die Warteschlange stellen
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');

    }
}
add_action('wp_enqueue_scripts', 'add_prism');

/* ModalWindowButtonEditor laden */
function add_prism_button() {
    if (!current_user_can('edit_posts') && !current_user_can('edit_pages')) {
        return;
    }
    if (get_user_option('rich_editing') == 'true') {
        add_filter('mce_external_plugins', 'add_prism_tinymce_plugin');
        add_filter('mce_buttons', 'register_prism_button');
    }
}
add_action('init', 'add_prism_button');

function register_prism_button($buttons) {
    // Füge das Icon nach dem letzten Standard-Icon in der Toolbar hinzu
    array_splice($buttons, count($buttons) - 1, 0, "prism_button");
    return $buttons;
}

function add_prism_tinymce_plugin($plugin_array) {
    $plugin_array['prism_button'] = get_stylesheet_directory_uri() . '/prism/prism-button.js';
    return $plugin_array;
}

Herzlichen Glückwunsch! Wir haben es geschafft – das PRISM Highlighting Plug-in ist nun erfolgreich erstellt. Die Erweiterung des Buttons für das Modalfenster konnten im Chat mit ChatGPT ermittelt werden. Vielen Dank an das PRISM Highlighter-Team und ChatGPT für die Unterstützung bei der Erstellung.

Das war’s schon!  😉

Kleiner Tipp: Anzeigebereich für den Code begrenzen

Hier ein Beispiel, wie man den Anzeigebereich für den Code begrenzen kann. Zum Beispiel im HTML durch <pre class="my-pre" style="height: 200px;">. Die Klasse 'my-pre' wird dabei im CSS definiert, um die Scrollbalken ein- und auszublenden:

/* Scroller aus- einblenden */
pre.my-pre {
    overflow: hidden;
    height: 400px;
}

pre.my-pre:hover,
pre.my-pre:focus {
    overflow: scroll;
}

Obige dem CSS-Beispiel ist die Höhe auf height: 400px; begrenzt.


Das Plug-in 'Enlighter' darf hier nicht unerwähnt bleiben, jedoch erfordert die Einrichtung etwas mehr Zeit im Vergleich zu den zuvor genannten Plug-ins. Es ist umfangreicher und bietet mehr Funktionen, daher ist ein höherer Zeitaufwand bei der Einrichtung zu erwarten. Das Plug-in wird häufig im Web verwendet und hat eine Dateigröße von etwa 1 MB, wobei der Großteil (fast allesamt) dieser Bytes programmbedingt ist.

Enlighter – Customizable Syntax Highlighter

Uns ist aufgefallen, dass der Code lediglich durch die entsprechende Klasse im <pre>-Tag und nicht durch den <code>-Tag ausgezeichnet wird. Dadurch werden die Codes in der sprachlichen Übersetzung mitübersetzt, was nicht ideal ist. Allerdings ist dies kein großes Problem, da beim Verwenden des Kopieren-Buttons der ursprüngliche Code und nicht die Übersetzung kopiert wird. Wenn man den Code jedoch manuell markiert und kopiert, sollte man darauf achten, die Browsers Übersetzung zu vermeiden.

Code optimieren. Lesbarkeit verbessern.
Customizable Syntax Highlighter Enlighter.


Aktualisiert im Jahr 2023-August