Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
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 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:
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 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 Zusammenfassung zur Erstellung des Prism-Plug-ins wird die Umsetzung dieses Features behandelt.
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.
- Besuche wie oben anklicke des Bild die Download-Seite von Prism (oder klicke auf den QR-Code) 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 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.
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;
}
- 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.
- Verbinde dich mit deinem Server und navigiere zu deinem Child-Theme-Ordner. Erstelle einen neuen Ordner namens
prism. - Lade die heruntergeladene
prism.js-Datei in den neu erstelltenprism-Ordner deines Child-Themes hoch. - Lade auch die heruntergeladene
prism.css-Datei in denprism-Ordner deines Child-Themes hoch. - Öffne die
functions.php-Datei deines Child-Themes und füge den folgenden Code am Ende der Datei hinzu:
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' );- 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">
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:
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.
Etwas Off-Topic, aber da es dennoch dazu passt, hier ein Beispiel, wie man den Anzeigebereich für den Code begrenzen kann. Dies ist durch die Verwendung von 'height: 550px' möglich, zum Beispiel durch <pre class="my-pre" style="height: 550px;">. Die Klasse 'my-pre' wird dabei im CSS definiert, um die Scrollbalken ein- und auszublenden.
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.
functions.php/* 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) {
// 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-3.5 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
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.
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.
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:
Lass deinen Code erstrahlen mit Code Beautify und Syntax Highlighting – für eine perfekte Darstellung und verständliche Funktionen.
Aktualisiert im Jahr 2023-August
