Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

Code-Highlighting ist eine Methode, um Code in Webseiten oder Anwendungen übersichtlicher und leichter lesbar zu gestalten. Für Entwickler ist es wichtig, dass der Code gut strukturiert und optisch klar gegliedert ist. Die Verwendung von HTML-Tags wie <pre> und <code> kann dabei helfen, Code-Blöcke optisch abzugrenzen und darzustellen.

Um die Syntax zusätzlich benutzerfreundlicher zu gestalten, kann ein Plug-in oder eine Bibliothek verwendet werden, die den Code hervorhebt und verschiedene Elemente farblich oder durch unterschiedliche Schriftarten darstellt. Jedoch reicht das Highlighting allein nicht aus; der Code muss zunächst gut strukturiert und formatiert werden, um lesbar und verständlich zu sein.

Einführung: 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, nach Belieben anpasszupassen:

/* 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.

Priorität von formatiertem Code

Der Code sollte 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 folgende 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 wir der Auswahl von 16 Plug-ins zum Code Highlighten gesehen haben, welches wir folgendes besonders hervorheben:

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.

Lass deinen Code erstrahlen mit Code Beautify und Syntax Highlighting – für perfekte Darstellung und klare Funktionen.

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

Wegerl.at empfiehlt:

Prism.js: Eine präzise Nachlese

Die folgende Auswertung zeigt, wie Prism JS- und CSS-Dateien heruntergeladen und auf den Server hochgeladen werden können, um sie anschließend in ein Child-Theme zu integrieren. Diese Analyse führt durch jeden Schritt, einschließlich der Integration einer Schaltfläche für ein modales Fenster im Editor.

1. Wie oben gezeigt, das Bild (QR-Code) anklicken, um die Download-Seite von Prism zu besuchen und die bevorzugten Optionen auszuwählen, 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 sollten zunächst die Standardeinstellungen verwendet werden:

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

Plug-ins: Das Plug-in umfasst verschiedene Funktionen wie wie Line Numbers, Show Language, Copy to Clipboard Button (das Häkchen für 'Toolbar' wird automatisch gesetzt). Die Auswahl der benötigten Features bleibt flexibel. Das Line Highlight-Feature hat sich als unpraktisch erwiesen (siehe Anmerkung weiter unten). Eine nützliche Ergänzung wäre 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>

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

Zur Zeilennummerierung auch CSS, welches von Nutzen sein kann:

pre[class*="language-"].line-numbers {
    position: relative;
    padding-left: 3.4em;
    line-height: 1;
}

2. Unten auf der Seite auf die Schaltflächen 'JS herunterladen' und 'CSS herunterladen' klicken, um die Prism JS- und CSS-Dateien auf den Computer herunterzuladen.
3. Im Child-Theme einen neuen Ordner namens prism erstellen und die heruntergeladenen prism.js– und prism.css-Dateien in diesen Ordner hochladen.
4. Abschließend in die functions.php-Datei des Child-Theme folgenden Code hinzufügen:

/* 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. Die Datei speichern und die Website aktualisieren. Nun sollte sichtbar werden, dass 'Prism' erfolgreich in das Child-Theme integriert wurde.

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 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 */
(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.

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

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 dies gewünscht ist, sollte der Code aus Schritt 4 durch diesen ersetzt werden. Sollte der folgende Code, der die PRISM-Dateien nur für Beiträge lädt, nicht funktionieren, bleibt der Code aus Schritt 4 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.

/* 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!  😉

Scrollleiste und Anzeigebereich für den pre-Tag

Um den Anzeigebereich für Code ab einer gewissen Höhe zu begrenzen und eine Scrollleiste anzuzeigen, können folgende CSS-Angaben verwenden. Hier ist ein Beispiel, wie der Anzeigebereich für den Code einschränkt werden kann, wodurch auch eine horizontale Scrollleiste automatisch erscheint:

<pre class="my-pre"><code class="language-css">

Wenn jedoch nur die horizontale Scrollleiste relevant ist, sollte dies mit einem anderen Selektor gestylt werden:

<pre class="my-pre2"><code class="language-css">

Hier ein CSS-Beispiel:

• Mit pre.my-pre { overflow-x: auto; max-height: 400px; } wird die Höhe des Anzeigebereichs auf 400px begrenzt, wodurch eine vertikale Scrollleiste aktiviert wird. Zusätzlich wird eine horizontale Scrollleiste angezeigt, wenn der Inhalt breiter als der Anzeigebereich ist.
• Der Teil pre.my-pre2::-webkit-scrollbar: Aktiviert nur die horizontale Scrollleiste für breiten Inhalt ohne Höhenbegrenzung.

Dieses CSS stellt sicher, dass sowohl vertikale als auch horizontale Scrollleisten korrekt angezeigt werden, abhängig vom Bedarf:

/* === pre-Tag stylen === */

/* --- Grundlegendes Styling für pre-Tag und Scrollleiste --- */
#content pre {
    font-size: 90%;
    margin-bottom: 30px;
}

/* --- pre-Tag mit fester Höhe und Scrollleisten --- */
pre.my-pre {
    overflow-x: auto;
    height: 400px;
    margin-bottom: 45px !important;
}

/* --- Styling der Scrollleisten für pre.my-pre --- */
pre.my-pre::-webkit-scrollbar {
    width: 5px; /* Breite der vertikalen Scrollleiste */
}

pre.my-pre::-webkit-scrollbar {
    height: 5px; /* Höhe der horizontalen Scrollleiste */
}

.my-pre::-webkit-scrollbar-track {
    border-radius: 6px;
    box-shadow: inset 0 0 2px #8e989e;
}

.my-pre::-webkit-scrollbar-thumb {
    border-radius: 6px;
    box-shadow: inset 0 0 4px #7d7d7d;
}

.my-pre::-webkit-scrollbar-corner {
    background: #cd5606;
}

/* --- Horizontale Scrollleiste für pre.my-pre2 --- */
pre.my-pre2::-webkit-scrollbar {
    height: 5px; /* Höhe der horizontalen Scrollleiste */
}

.my-pre2::-webkit-scrollbar-track {
    border-radius: 6px;
    box-shadow: inset 0 0 2px #8e989e;
}

.my-pre2::-webkit-scrollbar-thumb {
    border-radius: 6px;
    box-shadow: inset 0 0 4px #7d7d7d;
}

/* --- "to scroll" Hinweis für pre.my-pre --- */
pre.my-pre::after {
    content: "\00a0\25B2to scroll";
    font-family: sans-serif;
    position: absolute;
    bottom: -25px;
    left: 0;
    font-size: 16px;
    color: #7f7f7f;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

pre.my-pre:hover::after {
    opacity: 0;
}

/* = Ende pre-Tag stylen = */

• Im Beitrag "Text scrollen ist Struktur" ist das zur Anzeige des "to scroll" HInweises erläutert.

Parallel zur Formatierung im Frontend kann es äußerst praktisch sein, längere Codeabschnitte im Editor mit derselben Classe zu versehen. Mit folgendem Code in der functions.php wird das Scrollen im Editor erleichtert.

/* --- Editor CSS für Pre --- */

function my_custom_tinymce_styles($mce_init) {
    $mce_init['content_style'] = 'body .my-pre { height: 250px; overflow-y: auto; }';
    return $mce_init;
}
add_filter('tiny_mce_before_init', 'my_custom_tinymce_styles');

/* - Ende Editor CSS für Pre - */

Plug-in 'Enlighter'

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.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 Juli