HTML pre + code
und Code-Highlighten

Info echo

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Ansprechend! – so gehts hier zum Progress
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Werkraum ist Werkraum und Frontend ist Frontend
Illustraion SVG unDraw; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
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. Der code-Tag kann auch innerhalb vom pre-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 POESIE

Codes 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!

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

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