Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets
Die Start-Tags HTML pre und code dieses Themas sind zur Darstellung von Codes. Im Anschluss ist kurz ein Plug-in zum Code-Highlighten vorgestellt.
Zum Thema hier sind erst mal die Start-Tags zu definieren:
- Der Tag
<pre>ist praktikabel zur Anzeige für PHP-Codes, HTML-Quelltext, Javascript und CSS. Somit bleiben die Leerzeichen, Tabulatoren, Spalten und Zeilenumbrüche erhalten. - Der Tag
<code>ist ein Inline-Tag, das keinen Zeilenumbruch durchführt. Hiermit sind die Codes innerhalb des Fließtextes kenntlich zu machen. Dercode-Tag kann auch innerhalb vompre-Element sein.
Das Folgende ist dann zur Klarsicht:
HTML pre und code
<pre> s. Edior/Visuell → Absatz/’Vorformatiert'.
<code>s. im Editor/Text/’code'.
- Starttag
<pre>für typografische Formatierung eines Textes. Des Weiteren im Titel: HTML pre • Formatierter Text. - Der Starttag
<code>ist für Computercodes im Verlauf von Text. Und das anfügen von<code>Innerhalb vom Tag<pre>? Da würde bei der Translation (d. h. sprach-wie textliche Übersetzung der Website) die korrekte Codeauszeichnung ebenso funken. Welches aber von wegen des Zeilenumbruchs mit dem Tag<code>nicht so zu empfehlen ist. S. doch HTML code, dfn, var • Definitionen und Variablen.
Somit nächst, s. u. im Subtitel: Codes vom Tranlator ausschließen.
Vorher dessen Beispiel <code> und <pre><code>:
Die textl. Übersetzung (Translate) von Codes im Tag <code> ist ausgeschlossen </code>, nicht aber Text der Vorformatierung </pre>:
… nicht aber Text der Vorformatierung <pre>
Starttag <code> dessen Anwendung im Starttag <pre> entsprechend angefügt ist von Tranlation (textl. Übersetzung der Suchmaschinen) ausgeschlossen:
<pre><code>CODE IST POESIE</code></pre>
Visuell:
CODE IST POESIECodes vom Translatator ausschließen
Des Browsers der sprachlichen Übersetzung ist das von Codes auszuschließen!
<pre class="notranslate">
Die class="notranslate" muss nicht definiert werden, da es eine (Pseudo-) Klasse darstellt.
Sollte sich der Hinsicht eine Änderung für alle Beiträge der Auszeichnung <pre> nach <pre class="notranslate"> ergeben: das Plug-in Search & Replace, Tabelle: wp_posts(…KB), intuitiv & okay!
Designs Code entliehen der Website:
Beispiel nach Belieben zu variieren oder reduzieren, Customizer oder Child-Theme:
/* 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 Markup für <code>
Zur konformen Darstellung des Markups des Paddings möchte im Editor (Text) darauf gedacht sein, dass <code>an den Textcode angefügt</code> ist, also davor sowie danach das Leerzeichen.
Code-Highlighten mit Plug-in
AH-Code-Highlighter
Das von mir aus empfohlene Plug-in ist das AH-Code-Highlighter. Des Beispiels von Highlighten ist oberhalb zu sehen. Wenn auch des Plug-ins Pflege hintan, ist es funktionell!
Kleine Anmerkung: Solch Plug-in ist das mit notranslate automatisch dabei. – performant.
Funktionell
… leider in WordPress Classic Editor ist die Funktion zum Einfügen das 'Code' der Programmiersprachen nicht im Editor, siehe das Bild https://ps.w.org/ah-prism-syntax-highlighter/assets/screenshot-2.png?rev=1724348. Hingegen ClassicPress da funktioniert das.
So in Handarbeit gehts auch
<pre><code class="language-css"> … </code></pre>Das sind die Programmiersprachen
Nach bedarf einzutragen. Bspw
class="language-css"class="language-php"usw.
Aktualisiert im Jahr 2021-Dezember
