HTML pre und code

Die zwei Start-Tags dieses Themas sind zur Darstellung von Codes. Erst mal sind 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. Der code-Tag kann auch innerhalb vom pre-Element sein.

Das Folgende ist dann zur Klarsicht:

WP-Editor „Visuell“

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

Codes vom Tranlatator ausschließen

<pre class="notranslate">

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!

<pre> und <code> CSS-Styling

Designs Code entliehen der Website:

quer

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.

Plug-in

Im TEST von Plug-in Crayon Syntax Hightliter: folgend bleibe ich nach Antesten auch der hierzu verschiedenen „Code-Sprachen“ bei vorgegebenen Version des <pre class="notranslate"> oder <code>.

Kurzer Kommentar:

Plug-in Crayon Syntax Highlighter hebt mithin dezentem Aussehen des Designs die Syntaxen hervor, anstatt wie alleinigen <pre> Tags. – die Einstellungen sind vielfältig und hiermit gehört gewisse Einarbeitung dazu, besonders der Shot Codes, Tag und einer geeigneten „Sprache“ zur Codedarstellung. Aber ein Reset-Button (Einstellungen zurücksetzen) führt zur Grundeinstellung und fast alles ist in Deutsch beschrieben.

Kleine Designanpassung des visuellen Headers von Crayon Syntax Highlighter :

.crayon-syntax, .crayon-main {
 padding: 4px;
 border-radius: 2px;
}