Info echo

Ist der Classic-Editor schon zu kennen? –

“Advanced Editor Tools – ist so klasse!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Anklickt Classic-Editor mit Advanced Editor Tools

“Advanced Editor Tools – ist das ausgezeichnete!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Klassischen Editor anwenden! – und …

“Advanced Editor Tools – ist so sehr gut !”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

… 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

Advanced Editor Tools aktive Installationen: 2+ Millionen

“Advanced Editor Tools – ist so fabelhaft!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Ansprechend! – so gehts hier zur Lancierung

“Advanced Editor Tools – ist de luxe!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

… und NEU! – Classic Widgets

“Classic Widgets – sind so grandiose!”
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

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-Highlighten allein reicht nicht aus:
Priorität von vorformatiertem 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.

• CSS Beautifier
• PHP Beautifier
• JavaScript Beautifier

Code Beautify: CODE IST POESIE

Plug-ins / Bibliotheken zum Code Highlighten

Anzumerken ist, dass ich 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.

Es ist zu beachten, dass das besondere Feature von AH, nämlich die performante Speicherung der Codes über einen Button und modales Fenster im Editor, bei diesem selbst erstellten Plug-in nicht enthalten ist:

How to Add Prism.js Syntax Highlighting to Your WordPress Site

Zusammenfassung

Hier ist erst mal eine Zusammenfassung, um Prism JS und CSS-Dateien herunterzuladen, auf deinen Server hochzuladen und sie in dein Child-Theme zu integrieren:

1. Besuche die Download-Seite von Prism und wähle deine bevorzugten Optionen aus, wie Theme, die Sprachen, Plug-ins und 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.

Ich empfehle 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;
}

2. 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.
3. Verbinde dich mit deinem Server und navigiere zu deinem Child-Theme-Ordner. Erstelle einen neuen Ordner namens prism.
4. Lade die heruntergeladene prism.js-Datei in den neu erstellten prism-Ordner deines Child-Themes hoch.
5. Lade auch die heruntergeladene prism.css-Datei in den prism-Ordner deines Child-Themes hoch.
6. Öffne die functions.php-Datei deines Child-Themes und füge den folgenden Code am Ende der Datei hinzu:

/* 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' );

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

Erstellung einer Schaltfläche für ein modales Fenster im Editor zur Einfügung von Code

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:

/* ModalWindowButton Code */
(function() {
    tinymce.PluginManager.add('prism_button', function(ed, url) {
        ed.addButton('prism_button', {
            text: 'Prism',
            icon: false,
            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>');
                    }
                });
            }
        });
    });
})();

Ein Beispiel, wie man den Anzeigebereich für den Code begrenzen kann, ist durch die Verwendung von height: 600px, also <pre class="my-pre" style="height: 600px;"> möglich. Die Class my-pre wird dabei im CSS definiert, um die Scrollbalken aus- und einzublenden:

pre.my-pre {
    overflow: hidden;
}

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

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 fügt eine Schaltfläche im Editor hinzu, die es Benutzern ermöglicht, Code über ein Modalfenster einzufügen.

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

    // Check if the post content contains a <code> tag
    if ( is_single() && stripos( get_the_content(), '<code>' ) !== 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
        );

        // Enqueue the registered style and script files
        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) {
    array_push($buttons, "|", "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!  😉 

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

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

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

Wenn es um Benutzerfreundlichkeit geht, dann siehe auch:

Tools für bessere Lesbarkeit: Schreiben mit Komfort

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

Aktualisiert im Jahr 2023-Mai