HTML <pre> und <code>

WP-Editor „Visuell“

<pre> unter Absatz/“Vorformatiert“.

<code> unter Format <> code.

Bemerkung: Bei Mehrgebrauch von <> code  über Plug-in TinyMC Advanced/Einstellungen bäte sich an, dessen in die Symbolleiste aufzunehmen und über Visuellmodus anzuwenden, welches aber hier meist nicht funktionell ist.

  • Starttag <pre> für typografische Formatierung eines Textes. Des Weiteren im Titel: HTML pre • Formatierter Text.
  • Starttag <code> für Computercode im Textverlauf
    • und in Anfügung von <code> innerhalb vom pre-Tag, würde bei Tranlation (textliche Übersetzung der Website) die korrekte Codeauszeichnung ebenso gewährleistet – welches aber von wegen Zeilenumbruch nicht so zu empfehlen ist, s. HTML code, dfn, var • Definitionen und Variablen.

Somit nächst, s. 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“>

<pre class="notranslate"> s. Website im Titel Notranslate: Einzelne Textpassagen vor der Übersetzung schützen.

  • 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

<pre> und <code> CSS-Styling

Designs Code entliehen der Website:

quer

Beispiel nach Belieben zu variieren oder reduzieren, CSS Stylesheet Editor:

/* 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"> bzw. <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;
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Blog Website wegerl.at bedient sich dem Dienst Gravatar der Automattic Inc. In Angabe der E-Mail-Adresse, welche deiner Nutzung von Gravatar, erfolgt der Service nach Art. 6 Abs. 1 lit. f) DSGVO. – und nachdem dein Kommentar von wegerl.at freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.